Menu Help

Hey guys,

I'm a wee bit stuck. I remember seeing a friends website way back when, and it had the menu bar on the vertical, and when you rolled over a button, another image was displayed in like a tv-screen image. And there was a seperate image for each button, and I thought that absolutely rocked. Unfortunately, he wouldn't, and still won't tell me how he managed to do this. Which is why I am reaching out to the Interwibbles to help me try and work out how I can replicate this effect for myself. If anyone is unsure as to what I am on about, then see below.

http://i14.photobucket.com/albums/a304/bunkerline/meh.jpg

For every button, there would be a seperate image displayed upon rollover in that top square

If anyone can help me, I'd be most appreciative.

Joe

a:hover{
background-image:url(yourrolloverimg.gif);
}

Can that show the rollover on a different image then?.

Joe

Try JavaScript. The image can be different for each link.

<a href="URL" onmouseover="image1.src='IMAGE URL;"
onmouseout="image1.src='SAME IMAGE URL';"

I basically want each button to have a seperate image that upon hover, displays the seperate image in the top box. Can the example macwiz and / or rafiki have used do that?

Joe

You would need JavaScript for that.

CSS pseudo classes are for the entire page, not on a per tag basis.

If you want the top image to change, that is slightly more complicated than what I gave you.


The JS would be:

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
image_off= new Image(100,100);
image_off.src=image.jpg";

image2= new Image(100,100);
image2.src="image2.jpg";
image3= new Image(100,100);
image3.src="image3.jpg";
image4= new Image(100,100);
image4.src="image4.jpg";
image5= new Image(100,100);
image5.src="image5.jpg";
}

function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
//-->
</SCRIPT>


The HTML would be:


<P>
<A HREF="url" onMouseover="change1('pic1','image2')" onMouseout="change1('pic1','image_off')">LINK</A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic1','image3')" onMouseout="change1('pic1','image_off')">LINK</A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic1','image4')" onMouseout="change1('pic1','image_off')">LINK</A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic1','image5')" onMouseout="change1('pic1','image_off')">LINK</A>
<P>
<IMG SRC="image.jpg" name="pic1" width="100" height="100" border="0">

Right. Any idea how I'd go about making something like this? I barely know HTML, let alone Javascript and CSS.

Joe

::EDIT:: Stupid question - missed half your post! Lol, sorry old chap!

J

Hey guys,

After much googling, I found this (http://scripterlative.com/files/thumbsmart.htm), which seems to do what i want, albeit in a decidedly different way around.

Just got to work out how the hell to use it now!

Cheers all!

Joe