Image Replacement for li:hover

Discussion in 'Programming' started by xianrev, Aug 7, 2007.

  1. #1
    Hi, I believe this is something that could be done with Javascript, though PHP might be employed as well..
    What I'm looking to do here is have an img src tag, where the image itself will be based on whether a li tag is currently being hovered over (using the whatever:hover to make li:hover work on IE).
    Basically, I'm to have a menu using ul/li to list the menu items. Inside of each li will be an image (not a background image, just regular html to display it). Can Javascript be used to switch out the image on the fly based on whether the li is being hovered over?

    <script>
    $image = imgOff.gif
    
    if li:hover = true then $image = imgOn.gif
    else
    $image = imgOff.gif
    endif
    </script>
    
    <ol>
    <li> Menu Item <img src=$image> </li>
    <li> Menu Item <img src=$image> </li>
    </ol>
    Code (markup):
    Psuedo code ftw! Looks more like vb than anything else, I guess, but hopefully it gets the point across..

    I couldn't find anything like this when I searched the forum (in any of the boards, actually), though I may have overlooked a thread. If someone can point me in the direction of a thread (or, even better, a script!) that details how this might be achieved, I would very much appreciate it.
    Looking back, PHP might be a better solution than Javascript. *shrug*

    Again, thanks for any help anyone might be able to provide. Cheers.
     
    xianrev, Aug 7, 2007 IP
  2. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #2
    PHP is serverside not client and therefore cannot react to a hover reaction without the use of ajax (aka javascript)

    Javascript or CSS would work - all you need to do is google for a mouse roll over script
     
    AstarothSolutions, Aug 7, 2007 IP
  3. yangyang

    yangyang Banned

    Messages:
    757
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #3
    There're 2 ways:

    1. Use a javascript snippet to emulate hover effect with onmouseover event such as this one. Instead of working out the styles in js, look how he managed to add a class to the element in question onmouseover and style it in CSS.

    2. Use a :hover hack for IE (6) so that :hover is enabled just as how it's specified in the CSS 2.1 specs.
     
    yangyang, Jan 19, 2009 IP