li hover/onmouseover changes a picture

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.

---

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.

---

Considering "clean" solution it is not (directly). You could attach mouseover handler whitch would call a loadImage() function with predefined argument list. loadImage() then could ask a server for a specific image based on context and load it on list item

---

This is with jQuery:

Markup

<ul>
    <li>PHP</li>
    <li>MySQL</li>
    <li>HTML5</li>
</ul>

<img id="thumb" 
     src="http://www.portable-net.co.uk/images/logos/unknown-logo.png"/>

JS

$('li').mouseover(function() {
    var myText = $(this).text();
    var myImg  = $("#thumb");
    switch (myText) {
        case 'PHP':
            myImg.attr('src', 
           'http://www.php.net/images/logos/php-med-trans-light.gif');
        break;
        case 'MySQL':
            myImg.attr('src', 
           'http://www.mysql.com/common/logos/mysql-167x86.png');
        break;
        case 'HTML5':
            myImg.attr('src', 
            'http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png');
    }
});

---

Yes it's possible, you just have to use a mouseover handler on each of your <li>.

EDIT: sample can be provided if needed.

EDIT2: http://jsfiddle.net/gajfk/1/ is a simple example (image are not scaled and so on, it's just to show the mouseover handling)