Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Turning off the Internet Explorer Image Toolbar
by Stefan Mischook
Create Rollover/MouseOver Effect
by Ades Tynyshov
Images
by Depiction.net
Rollover Images
by Jacorre.com
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Create Rollover Image in CSS
rss

Create Rollover Image in CSS

Author: PiticStyle More by this author

Added: June 27, 2008 Rating:  Average Rating: 3 Votes: 14 Position: 8133 of 13009Average Rating: 3 Votes: 14 Position: 8133 of 13009Average Rating: 3 Votes: 14 Position: 8133 of 13009Average Rating: 3 Votes: 14 Position: 8133 of 13009Average Rating: 3 Votes: 14 Position: 8133 of 13009 Level: Beginner Software:  Dreamweaver

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.

image 1image 2

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

image 3

image 4

3. Go in the location where you save your page and open it

image 5

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!



Author's URL: www.piticstyle.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Create Rollover Image in CSS"