Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Menu Help

  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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.



    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

  • #2
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Code:
    a:hover{
    background-image:url(yourrolloverimg.gif);
    }

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Can that show the rollover on a different image then?.

    Joe

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Try JavaScript. The image can be different for each link.

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

  • #5
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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:
    Code:
    <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:

    Code:
    <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">
    Last edited by macwiz; 07-16-2008 at 04:10 AM.

  • Users who have thanked macwiz for this post:

    m0o0oeh (07-16-2008)

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by m0o0oeh; 07-16-2008 at 04:10 AM.

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •