Seb Seb - 1 year ago 86
Javascript Question

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

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


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"); = elm.getAttribute('data-cat-width'); = elm.getAttribute('data-cat-height');
function mouseOutImage() {
var id = document.getElementById("catPic"); = img.getAttribute('data-default-width'); = img.getAttribute('data-default-height');


<a href="link.htm" data-cat-image="images/img11.jpg"
data-cat-height="336px" onmouseover="mouseOverImage(this)"

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


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

and it works fine


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 Source

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) {
    // unchooseImage('default here');
function unchooseImage(x) {
    // chooseImage('default here');

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"
<a href="example.htm"