Question

I have been asked to make a change to our website (it uses asp [about which I know nothing]), a solution based on css and javascript would be easier for me.

Is it possible to have a graphic on the webpage change when the user moves the cursor over a certain <li> item, eg.

• option 1
• option 2
• option 3

When the mouse is moved over option 1 it will result in a certain picture being shewn, another for option 2 and a different one again for option 3.

Answer 1

Given the following HTML:

<ul>
    <li>Some text</li>
    <li>Some text</li>
</ul>

<img src="http://davidrhysthomas.co.uk/playtime/img/dwLogoS.png" id="graphic" />

And the JavaScript:

var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
for (i=0; i<lis.length; i++){
    lis[i].onmouseover = function(){
        graphic.src = "http://davidrhysthomas.co.uk/linked/astrid_avatar.png";
    };
    lis[i].onmouseout = function(){
        graphic.src = originalGraphic;
    };
}

This is certainly possible.

If you want to amend this so that each li triggers a specific image to appear, then you can cause that using the following, or something similar:

var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
for (i=0; i<lis.length; i++){
    lis[i].onmouseover = function(){
        graphic.src = "http://example.com/path/to/images/" + i + ".png";
        // this generates image sources of the form:
        // http://example.com/path/to/images/1.png
        // http://example.com/path/to/images/2.png
        // ...and so forth
    };
    lis[i].onmouseout = function(){
        graphic.src = originalGraphic;
    };
}

To use an array of image sources, it’s possible to use:

var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
var images = [
    "http://davidrhysthomas.co.uk/linked/astrid_avatar.png",
    "http://davidrhysthomas.co.uk/img/dexter.png"
    ];
for (i=0; i<lis.length; i++){
    lis[i].setAttribute('data-altimage',images[i]);
    lis[i].onmouseover = function(){
        graphic.src = this.getAttribute('data-altimage');
    };
    lis[i].onmouseout = function(){
        graphic.src = originalGraphic;
    };
}

JS Fiddle demo.

And, finally, to leave the replaced image on the page (rather than replacing the original source of the image onmouseout), simply remove the onmouseout function:

var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
var images = [
    "http://davidrhysthomas.co.uk/linked/astrid_avatar.png",
    "http://davidrhysthomas.co.uk/img/dexter.png"
    ];
for (i=0; i<lis.length; i++){
    lis[i].setAttribute('data-altimage',images[i]);
    lis[i].onmouseover = function(){
        graphic.src = this.getAttribute('data-altimage');
    };
}

JS Fiddle demo.