JQuery for Dummys Aka for Starting Web Developers

This tutorial might be hard to follow so very soon there will be a video tutorial creating a similar effect!

JQUERY is a lightweight JavaScript Library that emphasizes interaction between JavaScript and HTML It was released January 2006 at BarCamp NYC by John Resig (Wikipedia.org).

Yeah Yeah that is a fact but whats in it for you. Easy - The ease of use and the final opportunity to use chaining.
Ok Chaining means that you can call pre-written functions in a single line using the dot notation
so something like this
this.stop().animate('blabla').doWhatYouWantThatJqueryisCapableOff

Also Jquery gives you an opportunity to easily add CSS modify CSS interact with any tags, write XML ,wirte HTML, animate things, use AJAX and lots of lots of powerful things that takes hours to code but are written for you. You just need to know how to call those functions or to use them properly

Ok no more boring stuff I promise. Today I'm going to show you something cool. "Popup pictures when you hover over the text" With today's Internet commerce and sites like ebay, any car make, myspace,facebook and and all other pimped out sites it is an absolute must to add interactablility to your site. Today's tutorial will show you a simple list of names, that when hovered over show you a picture of that person. Since I don't want to get sued I'm going to use my own pictures but you can adjust that to anyone you want when building your website.

So lets begin!

PREREQUISITES
For this tutorial you will need to have a basic knowledge of html, and css. Also you have to be able to create a project in VISUAL STUDIO or Dreamweaver or notepad or whatever. Other than that I will try to be as descriptive as possible. If you don't know something go ahead and ask me questions

The Programs and files you will need (in case you don't know)
HTML EDITOR(Visual Studio, or Dreamweaver or Notepad or anything you like)
JQUERY framework that can be downloaded here -- >http://www.jquery.com Once you are there you will see a big black button with blue letters that says "Download (jQuery)". Above it there are two options to download the production version or development. Unless you are going to debug the Jquery library I recommend you leave the check boxes as they are and just click the download jquery. It will redirect you to the google website and once clicked on the only link there you will get that jquery framework. Once it is saved on your computer add it to your project.
I'm going to be using VISUAL STUDIO 2008 for our tutorial.

LET THE MAGIC BEGIN
1)Lets create our HTML document
Create a basic HTMLdocument . Inside your html document in the < head > section include a link to your jquery file and your CSS document (this should be pretty straightforward. In the < body > section just create a paragraph of text and then below it a basic unordered list of links with the id of hovers going nowhere (#) with four or five names. Those are going to be the objects over which we will hover that would have images associated with them.
Here is What my code looks like
Tutorial image #1
Thats it pretty simple, if you execute the code (preview your html file in browser) you should see something like this. Preview1

2)Clean up the look of our HTML document with basic css styling
Open your style.css file and insert the following code. I'm leaving the paragraph above our unordered list
untouched because it is hardly the purpose of our tutorial.
#hovers
{
list-style:none;
}
#hovers li
{
display:inline;
margin-right:100px;
padding:3px 5px 5px 5px;
background-color:#999999;
}
#hovers li a:link, a:visited
{
color:#F2FFBB;
font-weight:bold;
}
#hovers li a:hover
{
color:White;
font-weight:bold;
}
After you have added the styling above your output should be similar to this: Preview2
For those of you who is new to css lets break the above code down a lil bit.
So in our unordered list we wrote < ul id="hovers"> We assigned our unordered list.
So our first CSS block (#hovers{....} ) applies to styling an unordered list with an id of hovers. Here we set the list style to none which gets rid of bullets.
Next #hovers li { ...} means apply the css styling to the list items within our ul tag with id of hovers.
Here we make display as inline that means our list objects will be displayed in one line rather than in a block.
then we set the margin between each item of 100px that is the distance between our list items
then we set the padding on the top right bottom and left sides. That is the distance between the border and the text because when we set the background color that will give us extra space between border and the text.
Next we style the way our links display which just specifies the colors for the link visited and hover and makes the text bold.
This should be very simple for most of you because that is the basic knowledge for this tutorial
Ok one more thing before we do jQuery is lets make a modification to our html.
Enclose our unordered list in a div wrapper! ....... and modify the links so that they have href ="#yourImage,jpg" >Your Image Description< / a > instead of just #.
This is what my modified < body > section .code looks like Tutorial image #2
3.LETS DO SOME jQuery
ok so as I mentioned before jQuery is basically a JavaScript library so the syntax is just like JavaScript with some cool new features! So just like javascript you can either do a script within your < head > section or loaded up externally. For the purpose of this tutorial since its not going to be that much lets just write a script within our < head > tags.

In your head section after you imported jquery enter the following code:JQUERY CODE
I will break it down here line by line
K so after the script opening tag of type text/javascript we see our first jquery line
$(document).ready(function(){ .......}); - this simply means when the document has loaded create a function and execute the code in between curly brackets

Next block is:
$('a').hover(function(evt){
var href = $(this).attr('href').substring(1,$(this).attr('href').length);
var html = '< div id="info" >';
html += '< img src="' + href + '" alt="Me in 2006" / >';
html += '< /div >';
What is all this garbage? all will be explained don't be scared
It says get the a tag(any link) and when the user hovers over that link execute the function that takes in the event.
Inside the function create a varialbe called href (var href)
Set it eqaul to an attribute href of the current link except for the first character (#). Here we use substring function to basically get the whole link but starting from 2 character. (substring(1,$(this).attr('href').length);
The substring syntax is as always substring(starting character index,ending character index),
the characters start at column 0. So if your first parameter is 0 that means you are starting from the beginning of the string 1 is 2 character, 2 is 3 character and so forth. So when i say substring(1,...) i am skipping the (#) character. Then i basically say get the substring all the way to the last character.

Next create a variable html and set it to a string < div id="info" >"
take that newly created variable and concatenate to an existing string the following string
'< img src="' + href + '" alt="Me in 2006" / >' (html += is equivalent to saying html=html+ for those who don'w know)
this line is the key in the whole thing. href will take the value of the a href tag that you are hovering over. That is why we had to create that modification to our html in the previous step
and then finally concatenate the closing div to our html string (< / div >)

Next Block is
$('#container').append(html).children('#info').hide().fadeIn(400)
$('#info').css('top', evt.pageY-20)
.css('left',evt.pageX + 30);
What this says is find our div with an id of container in which we enclosed our unordered list.$('#container)
append to it our html string that we build in previous step (.append(html))
and then inside that html string find the div with an id of #info (.children('#info')
Hide it .hide()
when showing fade it in over 400 milliseconds (.fadein(400)
If you notice that one line uses the JQUERY magic the "CHAINING" - we are calling different functions in one line using the dot notation
Ok then add some css to our #info id. make the top corner of the image be located where the mouse is -20 pixels in the y direction and + 30 in the x direction another words slightly higher and offset to the right!

And the last block
},function() {
$('#info').remove();
});
$('a').mousemove(function(evt) {
$('#info').css('top', evt.pageY-20)
.css('left', evt.pageX+30);
});
});

That is not that hard considering everything above it.
We are saying once we hover off the link remove that div with #info id, another words remove the image
And lastly we say when we are on the tag and the mouse moves make sure that our offset stays the same!

One more thing, in order for the offset to work add one more tiny css block in your style.css as follows
#info
{
position: absolute;
}
Other wise the image will always show up on the left at the age of the page!

ok That is it we arrived at the final destination which is the demo at the top!

Hope this tutorial helps and wasn't extremely confusing but if you have any questions please don't hesitate to ask!

Sources for historical fact about John Resig (http://en.wikipedia.org/wiki/JQuery)