Cool Jquery stuff for beginners part 2

I’ve started playing around with Jquery while working on a personal project, and it’s actually very easy. I’ve stumbled upon some nice stuff that I have decided to share with everyone.

I will do this in several part, one post per coding “trick”.

If you are learning Jquery, you can use those examples to see what can be done and get you started.

All the examples should work if you just copy/paste them in a html page, if additional extensions are required, download them and put them in the same directory as your html page.

Make stuff appear and dissapear !

This is a little script that will let you make part of your html page visible – when your mouse goes over certain areas (this event is called “hover”) – and hidden – when your mouse leave that area

Required :

<html>
<head>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//function called when the mouse goes over an <img>
    $("img").hover(function(event){
        //Here I query the id attribute of the image your are hovering
        //so that I can use it to distinguish which image is active
    	var clicked = $(this).attr("id");
    	//Change the visibility and position of the html element
    	//with id "text$theIdOfTheActiveImage" example : text0
    	$("#text"+clicked).css({"visibility":"visible", "position":"absolute", "top":"35px","left":"300px"});
    }, function(event){ //mouse leave the image
    	var clicked = $(this).attr("id");
    	//make the text invisible again
    	$("#text"+clicked).css({"visibility":"hidden"});
        }
    );
});
</script>
</head>
<body>
<img id="0"
	src="https://upandcrawling.files.wordpress.com/2010/06/img_32831.jpg"
	style="width: 100px; height: 100px;" />
<img id="1"
	src="https://upandcrawling.files.wordpress.com/2010/06/img_3287.jpg"
	style="width: 100px; height: 100px;" />
<p id="text0" style="visibility: hidden;">This is a picture of the moon!</p>
<p id="text1" style="visibility: hidden;">This is a picture of the sky !</p>
</body>
</html>

Notice that I have assigned an id to each image to distinguish them from each other, this id also appears in the id attribute of the <p> that I want to associate with the image, and I use it to make the chosen text visible.

The attributes that I change (visibility and position) are CSS parameters,  you can customize this script to change the image color, text size, font  and much more…

Go ahead and have some fun !

Have any tricks you want to share with us ? Mail me or post a comment !

This is part 2 of my “Cool Jquery stuff for beginners” series.

Here is part 1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s