Rollovers ( help! ), I don't understand. Options

[ZeT0]

I still don't understand how to do a rollover image.
I've looked at LEAST 10 different tutorials, still can't get it.
It seems to be the most common way is to have the words on the layout, say in the header, in a darker colour.
Then an overlay on top of that, with the lighter colour, and once hovered, changes the lighter colour picture's opacity to 0.
That is how I'd like to do it. ( Or any way that is simpiler. )
I have how ever found another way to do it ;

CODE

<style>div.message {position: absolute; top: 0; left: 50%; margin-top: 1085px; margin-left: -292px; width: 154px; height: 52px; color: 000000; font-family: arial; font-size: 12px; font-weight: bold; text-align: left; overflow: auto; padding: 4px;
}</style>

<div class="message"><style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<a href="LINKTOWEBSITE">
<img src="NORMALIMAGEHERE" class="nohover" />
<img src="ROLLOVERIMAGEHERE" class="hover" />
</a>
</style></div>

Etc, etc...
This is a VERY long procedure if there are multiple links, such as a contact box.
I used this code for a recent myspace I have created, and doing the 4 links actually took longer than the rest of the layout it self.
www.myspace.com/djvbs
If anyone could make a tutorial, or tell me how to do roll overs, an easier/better way, I'd appreciate it VERY much.
Especially a video tutorial! :)
Thankyou.

[Maccabee]

This is how I do it.
HTML:

CODE

<ul>

    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>

</ul>

CSS:

CODE

:focus { outline:none; }


.navigation li{
float: right;
display:inline;
text-indent:-9999px;
}

a.about:link, a.about:visited, a.about:active
{
background-image:url(images/about.gif);
display:block;
width:100px;
height:50px;
background-position: 0 0px;

}

a.about:hover
{
background-image:url(images/about.gif);
background-position: 0 -50px;
}

In this case, the image is 100px wide and 50px high. See how that works? and that way the browser only has to load the image once so when you hover it will change immediatly because the browser doesnt have to load a new image. here is the image.



And the hard part is that you then have to add more css for each link to change the image. So it is tedious but you can skimp. Unless you choose not to use a custom font and ust use actuall text then you can do something like this.

html:(same)

CODE

<ul>

    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>
    <li><a href="/about/" class="about">about</a></li>

</ul>

css:

CODE

:focus { outline:none; }


.navigation li{
float: right;
display:inline;
text-align: center;
}

a.about:link, a.about:visited, a.about:active
{
background-image:url(images/about.gif);
display:block;
width:100px;
height:50px;
background-position: 0 0px;
color:white;
}

a.about:hover
{
background-image:url(images/about.gif);
background-position: 0 -50px;
}

Something like that, and then have an image like the one above but with no text.

You will need to a firm grasp of html and css to get this. and the

CODE

:focus { outline:none; }

Is just so it doesnt look like this once you click.
edit:nvm it isnt showing in the image.

click to enlarge

See that ugly purple line telling the browser that the link has been visited?

Done.

Reason for edit: Please use [codebox] tags instead of [code] tags for longer codes and [thumb] tags instead of [img] tags for large images. - Mike