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

[Mickey]

Try this tutorial.

[ZeT0]

With that tutorial Mike, do I have to .div overlay it to where I want each link to go, like my first post?

[Maccabee]

position absolute sucks, and using two images for rolloevers is a terrible idea.

[Mickey]

You don't need to use DIVs to position them around. You can just assign a class for each link to designate where they should go.

[ZeT0]

Do you know how to do the roll overs like on this myspace :
www.myspace.com/confessionhc

STYLE:

CODE

div.navigation a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:1;
}
.navigation { position: absolute; top: -460px; left: 50%; height: 0px; width: 900px; overflow: visible; background-color: transparent; margin-left: -665px; _margin-left: -704px; _top: -468px; text-align: left; z-index:8;}

DIV :

CODE

<div class="navigation">
<table id="DANCEGAVINDANCE_navigation" width="900" border="0" cellpadding="0" cellspacing="0">
<tr>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0zNjk0MDc3MTk="><img src="http://i25.tinypic.com/2zz8dcm.jpg" alt="" width="313" height="35" border="0" /></a></td>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zNjk0MDc3MTkmTXlUb2t"><img src="http://i25.tinypic.com/347jkpl.jpg" alt="" width="251" height="35" border="0" /></a></td>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNjk0MDc3MTk="><img src="http://i26.tinypic.com/23h3kux.jpg" alt="" width="173" height="35" border="0" /></a></td>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vYmlnY2FydGVsLmNvbS8="><img src="http://i30.tinypic.com/11lo4lz.jpg" alt="" width="213" height="35" border="0" /></a></td>


</tr>
</table>
</div>

This LOOKS like the easiest way.
Does anyone else do it like this?
If so, keen to explain it? :)

[Mickey]

Read this post on TJ's band page customization tutorial. It uses the same method.

[ZeT0]

Oh, it does too!
I never even noticed.
Thanks heaps. :)

[Mickey]

Is this good for closing?

[ZeT0]

Sure is.

[Mickey]

Topic closed & moved.