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. Advertising

  2. Elisa

    Grant Wagner Guest

    Elisa wrote:

    > 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


    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. Advertising

  3. Re: use javascript onmouseover to trigger hover state of anotherimage

    Elisa wrote:
    > 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?


    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. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ciuin
    Replies:
    3
    Views:
    1,042
    Chris F.A. Johnson
    Feb 5, 2007
  2. Jason Heydasch
    Replies:
    1
    Views:
    210
  3. Bart van Deenen

    div onMouseOver doesn't trigger in iframe

    Bart van Deenen, Mar 4, 2005, in forum: Javascript
    Replies:
    2
    Views:
    120
  4. Ciuin
    Replies:
    1
    Views:
    112
    Ciuin
    Feb 5, 2007
  5. Ciaran
    Replies:
    60
    Views:
    964
    Thomas 'PointedEars' Lahn
    Jun 29, 2010
Loading...

Share This Page