use javascript onmouseover to trigger hover state of another image

Discussion in 'Javascript' started by Elisa, Jul 6, 2004.

  1. Elisa

    Elisa Guest

    I have two images, each with defined CSS hover states. I would like a
    mouseover on one image to trigger the hover state of the other image.
    Is this possible using javascript? If so, how?

    Any help would be appreciated.

    Thanks,
    CJ
     
    Elisa, Jul 6, 2004
    #1
    1. Advertisements

  2. Elisa

    Grant Wagner Guest

    This isn't the most eloquent solution, but it should work, as long as you
    create a CSS class for each image id you want to provide this
    functionality for:

    <head>
    <style type="text/css">
    img#one:hover, img.one {
    border: 4px solid Blue;
    }
    img#two:hover, img.two {
    border: 4px solid Red;
    }
    </style>
    <script type="text/javascript">
    function setHover(id, state) {
    if (document.getElementById) {
    var otherImage = document.getElementById(id);
    if (otherImage && typeof otherImage.className == 'string') {
    otherImage.className = (state ? id : '');
    }
    }
    }
    </script>
    </head>
    <body>
    <img
    src="image1.jpg" id="one"
    onmouseover="setHover('two', true);"
    onmouseout="setHover('two', false);"<img src="image2.jpg" id="two"
    onmouseover="setHover('one', true);"
    onmouseout="setHover('one', false);"</body>

    I'm not sure there's any way to programmatically invoke the :hover psuedo
    class.

    --
    | Grant Wagner <>

    * Client-side Javascript and Netscape 4 DOM Reference available at:
    *
    http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

    * Internet Explorer DOM Reference available at:
    *
    http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

    * Netscape 6/7 DOM Reference available at:
    * http://www.mozilla.org/docs/dom/domref/
    * Tips for upgrading JavaScript for Netscape 7 / Mozilla
    * http://www.mozilla.org/docs/web-developer/upgrade_2.html
     
    Grant Wagner, Jul 6, 2004
    #2
    1. Advertisements

  3. Yes, see <http://pointedears.de/scripts/test/hoverMe/>

    You need to modify it a bit to use the "className" property
    (which I assume you mean by "CSS hover states") but if you
    then use the name of the second image in the event handler
    of the parent link of the first one and vice-versa, it should
    work.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jul 11, 2004
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.