Welcome to the knowledge base! This section is dedicated to transferring our knowledge of web and graphic design to you. We will update the section with tips and tricks in CSS, HTML, Javascript, PHP, as well as Photoshop and others. Get ready to learn!
You have disabled the CSS. Click one of the links below to re-enable.
SKINS: Burgandy style Smoke style
SKINS: Burgandy style Smoke style
SKINS: 
See something we have done and want to learn how! Let us know!
Using Javascript to create mouse rollovers is so 2003. Here you can learn how to create rollovers in css, which are faster and easier to manage.
Step 1
You need to create a single image which contains all the image states (normal, hover, visted, action) in whatever image editing software you prefer.
EX 1:
Step 2
Next, you will be creating an anchor tag in your html which is the height and width of the portion of the image you want viewable.
<a id="button" href="#"></a>
Step 3
Now you will need to edit your CSS for this element. Using CSS you can define background positions for all image states.
That's it! Click below to see the example in action! Enjoy!
#button{
display:block;
width:100px;
height:50px;
background-image: url(images/button.jpg);
background-position:0px 0px;
}
#button:hover{
background-position:-100px 0px;
}
#button:active{
background-position:-300px 0px;
}
#button:visited{
background-position:-200px 0px;
}
#button:visited:hover{
background-position:-100px 0px;
}
#button:visited:active{
background-position:-300px 0px;
}
*Note: having a :visited state in your image will elongate your code and many leave it out. It does add to the layout and navigation though so it is your choice. display:block;
width:100px;
height:50px;
background-image: url(images/button.jpg);
background-position:0px 0px;
}
#button:hover{
background-position:-100px 0px;
}
#button:active{
background-position:-300px 0px;
}
#button:visited{
background-position:-200px 0px;
}
#button:visited:hover{
background-position:-100px 0px;
}
#button:visited:active{
background-position:-300px 0px;
}
That's it! Click below to see the example in action! Enjoy!
Linkage: Easy CSS Rollovers Example
Quick Jump: Return to top