Create Rollover Image in CSS
Create Rollover Image in CSS ( You can see the final result HERE )
I made two buttons for this tutorial, save it if you want to work with them.
[1] Open Notepad and type the next code:
<html>
<head>
<style type=”text/css”>
a.image {
display: block;
width: 300px;
height: 200px;
background-image: url(Home1.jpg);
background-repeat: no-repeat;
}
a.image:hover {
background-image: url(Home2.jpg);
}
</style>
</head>
<body>
<center>
<a class=”image” href=”http://www.piticstyle.com” mce_href=”http://www.piticstyle.com” target=”_blank”></a>
</center>
</body>
</html>
[2] Click on File > Save as and save like HTML
[3] Go in the location where you save your page and open it
Note: If your images don’t appear the problem is in the location where you save it your page. The images and index.html will need to be together, same location or
same folder. Thank you!
HERE is the final result!
Related post: Create Rollover Image in Adobe Dreamweaver CS3
Tags: cascade style sheet, Create Rollover Image in CSS, CSS, Design, how to, HTML, Rollover Image in CSS, Rollover in CSS, tips&tricks, tutorial, w3c, webdesign, world wide web consortium
October 24th, 2007 at 7:00 pm
[...] Related post: Create Rollover Image in CSS [...]
October 28th, 2007 at 10:48 pm
[...] we learn about Links and Pseudo-Classes in CSS. I have made tutorials about rollover’s here and here, but this is something different and we talk about [...]