How to change class of a div by hovering on another element

Question

What I'm trying to achieve is basicly having navigation elements like

link1 link2 link3

and below them there's an image

[x] <- defaultImage

Now what I want is when I hover over link1 the image changes to image1, when I hover over link2 the image changes to image2,... and when I onMouseOut - the image goes back to defaultImage

I had this working with

function mouseOverImage(elm) {
var id = document.getElementById("catPic");
img.style.width = elm.getAttribute('data-cat-width');
img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
var id = document.getElementById("catPic");
img.style.width = img.getAttribute('data-default-width');
img.style.height = img.getAttribute('data-default-height');
}

+

<ul>
<li>
<a href="link.htm" data-cat-image="images/img11.jpg"
data-cat-width="280px"
data-cat-height="336px" onmouseover="mouseOverImage(this)"
onmouseout="mouseOutImage()">link1</a>
</li>

<li><a href="link2.htm" data-cat-image="images/img22.jpg"
data-cat-width="280px"
data-cat-height="436px" onmouseover="mouseOverImage(this)"
onmouseout="mouseOutImage()">link2</a></li>

+

<div class="floatimg">
<img src="" width="0" height="0" alt="" id="catPic"
data-default-image="images/default.jpg"
data-default-width="0px" data-default-height="40px">
</div>

and it works fine

BUT

Now I want to change approach, and instead of using different images each time when calling for change via onMouseOver I want to use Sprites

And I'm really struggling how should I approach it?

I generated an image sprite out of few images and I have a code like

.sprite-1, .sprite-2, .sprite-3, .sprite-4,
{ display: block; background: url('tmp.png') no-repeat; }
.sprite-3 { background-position: -0px -0px; width: 280px; height: 441px; }
.sprite-4 { background-position: -288px -0px; width: 280px; height: 420px; }
.sprite-5 { background-position: -576px -0px; width: 280px; height: 420px; }

I have no idea about Scripts so please treat this as a total newb question and if you have and answer please tell me where to put the code

Thanks a lot for any help!

Answer 1

First, make some functions to add and remove a class from a HTMLElement , you'll be interested in the Element.className property for this..

function hasClass(e, c) {
    return (' ' + e.className + ' ').indexOf(' ' + c + ' ') !== -1; // in list
}

function addClass(e, c) {
    if (!hasClass(e, c)) e.className += ' ' + c; // add if not in list
    return e;
}

function removeClass(e, c) {
    var i, s = ' ' + e.className + ' ';
    c = ' ' + c + ' ';
    while (-1 !== (i = s.indexOf(c))) { // while class in list
        s = s.slice(0, i) + ' ' + s.slice(i + c.length); // replace with space
    }
    e.className = s.slice(1, -1); // set
    return e;
}

Then attach listeners in your favourite way, for example you can use a similar pattern to your existing way if you write functions for mouseover and mouseout such as..

function chooseImage(x) {
    addClass(
        document.getElementById("catPic"),
        'sprite-'+x
    );
    // unchooseImage('default here');
}
function unchooseImage(x) {
    // chooseImage('default here');
    removeClass(
        document.getElementById("catPic"),
        'sprite-'+x
    );
}

There is another property which you could use, element.classList , but this isn't fully supported by all browsers yet (only basic support in IE 10).

---

The following would be for .sprite-1 and .sprite-2 .

<a href="example.htm"
   onmouseover="chooseImage(1)"
   onmouseout="unchooseImage(1)">link1</a>
<a href="example.htm"
   onmouseover="chooseImage(2)"
   onmouseout="unchooseImage(2)">link2</a>

Answer 2

Just in case someone need it, this can be achieved by pure CSS if the elements has the same parent. Usign the ~ or sibiling selector. A further explanation on how it works can be found here .

The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.

I made a jsfiddle to enlight the trick. https://jsfiddle.net/cwh7dww1/