SCRIPT - Nav list with img to side, :D Options

[Wasney]

This took me all day to figure out, and since it took that long I figure I will post it here to help others out :)

You can see it in action HERE until I change my layout again.

What this does - This places a DIV layer over all your layers containing a list of links. When you hover over a link a image is displayed. To move the Link List about just change the values in the ".links" to whatever you want. And then to place the image change the value in the ".links a:hover img" to what you want. Just remember that the images position depends on the Link List...

ABOUT ME:

CODE

<style type="text/css">

.links {position: absolute; top: 555px; left: 500; width: 200px; height: 500px; font: 12px;z-index:3}
.links a {display: block; text-align: left; font: bold 1em sans-serif;padding: 1px; margin:1px; border-width: 0;text-decoration: none; color: 000000; background: 444;border-right: 5px solid 505050;z-index:3}
.links a:hover {background: 000000; color: ffffff;border-right: 500px double white;z-index:3}
.links a img {height: 0; width: 0; border-width: 0;z-index:3}
.links a:hover img {position: absolute; top: 55px; left: 100px; height: 100px; width: 100px;z-index:3}

</style>

I'd Like to Meet:

CODE

<div class="links">

<a href="http://www.myspace.com/forgottenb3auty">Kirsten<img src="http://i78.photobucket.com/albums/j92/Wasney/kirsten.jpg" border="0" height="100" width="100" alt="I LOVE HER!!!" /></a>
<a href="http://www.myspace.com/myspacezjs">Zack<img src="http://i78.photobucket.com/albums/j92/Wasney/zack.jpg" border="0" height="100" width="100" alt="Zack" /></a>
<a href="http://www.myspace.com/hgm2">Nick<img src="http://i78.photobucket.com/albums/j92/Wasney/nick.jpg" border="0" height="100" width="100" alt="Nick" /></a>
<a href="http://www.myspace.com/cbrown989">Chris<img src="http://i78.photobucket.com/albums/j92/Wasney/chris.jpg" border="0" height="100" width="100" alt="Chris" /></a>
<a href="http://www.myspace.com/stephanie050690">Steph<img src="http://i78.photobucket.com/albums/j92/Wasney/steph.jpg" border="0" height="100" width="100" alt="Steph" /></a>
<a href="http://www.myspace.com/peoplesuprising">PU<img src="http://i78.photobucket.com/albums/j92/Wasney/band.jpg" border="0" height="100" width="100" alt="PU" /></a>
<a href="http://www.myspace.com/miniwaz">Nick<img src="http://i78.photobucket.com/albums/j92/Wasney/nickcuz.jpg" border="0" height="100" width="100" alt="Nick" /></a>
<a href="http://www.myspace.com/waz_is_the_shit">Steve<img src="http://i78.photobucket.com/albums/j92/Wasney/steve.jpg" border="0" height="100" width="100" alt="Steve" /></a>
<a href="http://www.myspace.com/wasney">Vince<img src="http://i78.photobucket.com/albums/j92/Wasney/vince.jpg" border="0" height="100" width="100" alt="Vince" /></a>
<a href="http://www.myspace.com/darkangel1028">Mom<img src="http://i78.photobucket.com/albums/j92/Wasney/ma.jpg" border="0" height="100" width="100" alt="Ma" /></a>
<a href="http://www.myspace.com/svhsgirl">Jess<img src="http://i78.photobucket.com/albums/j92/Wasney/jess.jpg" border="0" height="100" width="100" alt="Jess" /></a>
<a href="http://www.myspace.com/6stringthis">Cody<img src="http://i78.photobucket.com/albums/j92/Wasney/cody.jpg" border="0" height="100" width="100" alt="Cody" /></a>
<a href="http://www.myspace.com/x3duckie_lovex3">Amanda<img src="http://img527.imageshack.us/img527/7197/untitled2mx2.jpg" border="0" height="100" width="100" alt="Amanda" /></a>

</div>