Menu Help

[m0o0oeh]

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.



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

[rafiki]

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

[m0o0oeh]

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

Joe

[macwiz]

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

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

[m0o0oeh]

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

[macwiz]

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">

[m0o0oeh]

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

[m0o0oeh]

Hey guys,

After much googling, I found this, 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