Change Image – Keep Text Same

[Total: 0    Average: 0/5]

This shows how to have an image change pictures on a mouseover and on a mouseout.

Head Code:

<script type=text/javascript src="http://www.js-examples.com/bin/div_construct.js"></script>
<script type=text/javascript>
var _M = "This is my static text";
var _I = new Array();
    _I[0] = "<img src='http://www.js-examples.com/js/pic1.gif' border=0 alt='pic1'>";
    _I[1] = "<img src='http://www.js-examples.com/js/pic2.gif' border=0 alt='pic2'>";
var _divImg = new NewDiv(window,"d1",_I[0],250,200,0,0,1,"ABSOLUTE");
var _divTxt = new NewDiv(window,"d2",_M   ,250,230,0,0,5,"ABSOLUTE");
</script>

Body Code:

<script type=text/javascript>
_divImg.output();
_divTxt.output();

function MOver() {
  _divImg.setBody(_I[1]);
}
function MOut() {
  _divImg.setBody(_I[0]);
}
</script>

<BR><a href="#" onmouseover="MOver()" onmouseout="MOut()">MouseOverMe</a>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *