Change img on mouseover

change image on mouseover

by web-nfo.com

HTML

<table id="overview" border="0" bordercolor="black" align="center" style="user-select:none; -moz-user-select:none; -khtml-user-select:none;" onselectstart="javascript:return false;">
    <tr>
        <td><img id="q0" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
        <td><img id="q1" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
        <td><img id="q2" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
        <td><img id="q3" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
    </tr>
    <tr>
        <td><img id="q4" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
        <td><img id="q5" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
        <td><img id="q6" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
        <td><img id="q7" src="http://placehold.it/50x30" alt="" border=0 height=150 width=200 onmouseover="updateQuestion(this, true)" onmouseout="updateQuestion(this, false)" onclick="goForth(this)"></img></td>
    </tr>
    <tr>
        <td><img id="q8" src="http://placehold.it/50x30" alt=""...

JavaScript

function updateQuestion() {
    for(var i=0; i<12; i++) {
        if(questions[i]==0) {
            document.getElementById("q"+i).src="http://dummyimage.com/50x30/000/fff";
            //$('#q'+i).attr('src', 'img/neutral-d.png');
            //$('#q'+i).src='img/neutral-d.png';
        } else if(questions[i]==1) {
            document.getElementById("q"+i).src="http://dummyimage.com/50x30/829528/fff";
            //$('#q'+i).attr('src', 'img/positive-d.png');
            //$('#q'+i).src='img/positive-d.png';
        } else {
            document.getElementById("q"+i).src="http://dummyimage.com/50x30/999999/fff";
            //$('#q'+i).attr('src', 'img/negative-d.png');
            //$('#q'+i).src='img/negative-d.png';
        }
    }
}