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