Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Create Rollover/MouseOver Effect
by Ades Tynyshov
How to make Rollover Buttons using DreamWeaver in less than 5 minutes!
by Akpro.net
Rollover Images
by Jacorre.com
Dreamweaver Form Rollover Buttons
by Vecpix.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.
HTML and CSS  Home HTML and CSS Tutorials Rollover Bullet List Images
rss

Rollover Bullet List Images

Author: Joseph Skidmore More by this author

Added: Aug 22, 2006 Rating:  Average Rating: 2.46 Votes: 13 Position: 11075 of 12257Average Rating: 2.46 Votes: 13 Position: 11075 of 12257Average Rating: 2.46 Votes: 13 Position: 11075 of 12257Average Rating: 2.46 Votes: 13 Position: 11075 of 12257Average Rating: 2.46 Votes: 13 Position: 11075 of 12257 Level: Experienced Software:  DreamweaverGoLiveFrontPage

Rollover Bullet List ImagesThis piece of code was asked for over at Weborum, it adds a pretty good effect to any bullet images (lists) you may already have on your site and is very easy to do.

Firstly let's create our HTML code for the list:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>

<title>CSS rollover Bullet List Example</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<ul id="rollover">
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
<li><a href="#">rollover Bullet List Example</a></li>
</ul>

</body>
</html>

Here we have our list with the ID rollover. This is so we can set our CSS for this list only (and not every list that appears on your site). Next is our CSS code:

<style type="text/css">
#rollover ul, #rollover li {
list-style-type: none;
line-height: 20px;
}

#rollover li a {
background-image: url(arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}

#rollover li a:hover {
background-image: url(orange_arrow.gif);
background-repeat: no-repeat; background-position: 0 .4em;
padding-left: 15px;
}
</style>

As you can see the main differences between this code and the code I used in my Advanced Lists Tutorial is that the li tags now have an extra attribute added to them: #rollover li a (for the links) and #rollover li a:hover (for the links on hover). As the links appear on the page they have the image arrow.gif but when you hover over them they have the orange_arrow.gif appear ... quite a nifty trick isn't it?

To see this code in working action here is one I prepared earlier: Rollover Bullet List Example.



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 "Rollover Bullet List Images"