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>

[FoxLucky]

I'm really glad you posted this. I was going to do something similar with my friends list, only using popovers (and a seperate code) for each friend in the same place. This will definitely save some time.

HOWEVER... It doesn't work in IE so you might want to see if you can figure that out! I've never seen anything like that LOL.

[Clashing]

great goodness!! i have been looking allll around for that kind of rollover code! great job with that, buddy! =P

[Wasney]

Dang...it doesn't work in IE?!...I ran out of time last night to test it there...guess today I play with IE... :(


EDIT- Wow...just looked at it on IE...dang thing kills it...I will try my best to get it working right in both FF and IE :)


EDIT2 - Well, I almost have it working the same in both IE and FF...just need another hour I think.

[freeflow]

Once you figure it out I suggest you submit it to the script section. If you want of course. It would be used more there.

[Wasney]

I am getting closer and closer...but still haven't gotten it. Here is the code so far...

About Me:

CODE

<style type="text/css">

.links {position: absolute; top: 555px; left: 500; width: 200px; height: 500px; font: 12px;z-index:3;}
.links ul li{margin:0px; padding:2px; line-height:0px;}
.links a {display: inline; text-align: left; font: bold sans-serif;margin:0px; border-width: 0;text-decoration: none; color: 000000;border-right: 1px solid 505050;z-index:3;}
.links a:hover {background: 000000; color: ffffff;z-index:3;margin:0px; padding:2px; line-height:0px;}
.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>

Id Like To Meet:

CODE

<div class="links">

<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>

</div>

But now it has different problems. It works ok in FireFox, but in IE it gets extra brakes from only gos knows where, and when you hover it glitches up weirdly.


If there are any CSS gurus out there help would be liked :)


I also plan on putting it into the scripts section after it works good. I will be erasing all the url's and such to :)

[Clashing]

hmm, i'm still trying to fix and change things around in your code but i'm not having luck =/. when you hover the name, there's a different name that shows up... so, i'm trying to get rid of that but i don't have a clue.

[Clashing]

i think i have just got it. you need to get rid of those </a> 's at the end of those links and put a '<br>' at the end of the link. also, get rid of the z-index:3 's in the code. you don't need that. try it and let me know if it works on yours.

[Wasney]

I trid what you said and it doesn't do much different. When I test my code outside myspace it works, except for the hover (i had this fixed before but it makes other problems). I think I might start from scratch again, and figure it out.

Plus, I think myspace is treating the code different then normal websites would. That might be why I just cant get it.

Getting rid of the </a>'s really doesn't do much. It leave the links open, but doesn't matter. The z-index are needed for some layouts that use index's, in order for the div to be on top. Me and a few friends that work with CSS are gettin closer and closer. Every time we fix something another thing goes wrong tho. :(

[Wasney]

Sorry for the double post but I feel it is needed...


Here it is, the finished code. Works for me on both FF and IE6. The only problem with it is that in IE the links have some sort of background color. If you erase the coloring the code wont work. I have no clue why, as I just started messing with CSS 2 days ago. If you are going to use it I would only recommend changing the color values, since so far if you leave them blank the code fails. You can change all the coordinates to your liking, that doesn't seem to give a problem.

Also, do not delete the z-indexes. Change them to match your layout if it uses them. If you leave them out when your layout uses them the code wont work right in FF

Well, that is all I can think of, good luck :)

About Me:

CODE

<style type="text/css">

.links {position: absolute; top: 555px; left: 500; width: 200px; height: 700px; font: 16px Verdana, sans-serif; z-index: 2;}
.links a {display: block; text-align: left; font: bold sans-serif; padding: 1px;border-width: 0; text-decoration: none; color: FFC; background: 444; z-index: 2;}
.links a:hover {color: 411; background: AAA; z-index: 2;}
.links a img {height: 0; width: 0; border-width: 0; z-index: 2;}
.links a:hover img {position: absolute; top: 45px; left: 97px; height: 100px; width: 100px;  z-index: 2;}

</style>

I'd Like To Meet:

CODE

<div class="links">

<a href="LINK URL"> LINK TEXT <img src="IMAGE URL" border="0" height="100" width="100"/></a>

</div>

[anime-essence]

You should change the background color to transparent. It looks really weird with a gray background in Internet Explorer. This is a neat script though. Very professional looking.

[Wasney]

What code would I put for the color to be transparent?

[anime-essence]

Remove background and replace with background-color:transparent; .

[Clashing]

you can check my myspace. i have a friend list with image to the side. or should i post the code in here so you can get what i just did... i'm not quite sure if it works in firefox as well. but i'll definitely test that.

[Wasney]

Remove background and replace with background-color:transparent; .

Well, I switched the backgrounds to transparent...and then the images wont show...I don't know why...but I think they depend on a background...

you can check my myspace. i have a friend list with image to the side. or should i post the code in here so you can get what i just did... i'm not quite sure if it works in firefox as well. but i'll definitely test that.

I can't find a link to your myspace so I can't see what it looks like.

[Clashing]

hah, well it's up to you if you want to see what i got on there. the link is in my profile on here.

[Clashing]

eh, that's not the right link. thanks for informing! =P

[Clashing]

my pictures go right out of the layout box?? hmm, i'll fix that. you have firefox or something?

[Clashing]

oh, well at least it works in both firefox and ie. i haven't heard of opera, eh.

[Clashing]

whoa, thomas!! hah! you shouldn't get a screenshot of my profile! what were you thinking!? lol. well, i know that deal. it's not big deal to me. =P but the comment box looks like it needs to be fixed to be the same size as the input box.

[Clashing]

and do me a favor. take the screenshot out of this topic. =)

[Clashing]

ohh, that's much better... hah. i should make my personal myspace private.

a picture of this topic?! what the heck? haha. i never said that! i said to take this picture OUT of this topic... lol.

[Clashing]

eh, you're right. i won't make my profile private. but i wouldn't post my personal layout out on here.

niice screenshot! hah. that's pretty funny.

[Wasney]

Wow PrinCesse, I really like your layout. And I don't see any problems with it at all on FF :)

[Clashing]

thanks! =)