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.

    Elisa, Jul 6, 2004
    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:

    <style type="text/css">
    img#one:hover, {
    border: 4px solid Blue;
    img#two:hover, img.two {
    border: 4px solid Red;
    <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 : '');
    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

    | Grant Wagner <>

    * Client-side Javascript and Netscape 4 DOM Reference available at:

    * Internet Explorer DOM Reference available at:

    * Netscape 6/7 DOM Reference available at:
    * Tips for upgrading JavaScript for Netscape 7 / Mozilla
    Grant Wagner, Jul 6, 2004
    1. Advertisements

  3. Yes, see <>

    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

    Thomas 'PointedEars' Lahn, Jul 11, 2004
    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.