These days I spent many hours designing and creating my template because I want to make it look professional and beautiful. I`m still working on my template but soon it will be ready. During this time I used many effects like changing an image on mouseover (hover). This can be done with three methods ,one using a short javascript code and one using a bit longer CSS code, one using CSS sprites. 1. Using javascript
This code doesn`t need any CSS code , just change the URLs of the images.
<img src='http://first-image.jpg' onmouseover="this.src='http://second-image.jpg'" onmouseout="this.src='first-image.jpg'"/>
2. Using CSS
This method is more advanced, place the first piece of code , the CSS part right before ]]></b:skin> ,the HTML part of the code can be placed anywhere between <body> and </body> or even inside a gadget (sidebar).
The CSS part of the code:
.class-name {The HTML part of the code:
display:block;
background-image:url(http://first-image.jpg);
width:100px;
height:100px;
}
.class-name:hover {
background-image:url(http://second-image.jpg);
}
<a class='class-name'></a>NOTE: Use the same class name at both of codes , you can use any name. Change the width and height attributes to the size of you image , if the first and second images have different size place the width and height attribute of the second image after the line with the URL of the second image.
3. Using CSS Sprites
I will write more about this method in another post more detailed.
11 comments:
cool site,
well done …….. good job man
Thats great info, I can use this for my site. Nicely written too, I'll check back with you again...
it is really very helpful.
This is one of the useful technical tips for blogger.now most people have their own blogspots.So ,
these tips will be very useful to them.
really very informative,...i was wondering how to do that,..now i got the idea but can u please provide some attractive cursors for the same?
again am very thankful to you>>>:)
Thanks a lot for sharing the programs,that too with 3 different languages is very useful. these programs seems to be easy....
thanks for the code. i was hear through the search of image preview code and i finally got it here. useful tip my blog.
With the help of this code we can change the image instantly when page is loaded without using JvaScript.
Great post!! Thanks for sharing such an wonderful information ...
image mouseover is important in terms of displaying the text. this code of CSS is helpful for two images are place together and format it easily.
Nice post. Im still curious to see how you work with CSS Sprites.
Post a Comment