Image swap in different table cell

HuntHerr · 01-30-2005, 02:36 PM

Anyone know the code for image swap/rollover in which on mouse rollover, an image in a different cell changes?
thanks

ender · 01-30-2005, 02:55 PM

Code:

function findObj(objID){ return document.getElementById?document.getElementById(objID):document.all?document.all[objId]:null; }

function changeImage(newImgSrc) {
    var newImg = findObj("newImg");    
    if (!newImg) return;

    newImg.src = newImgSrc;
}

The HTML that could go with this is:

Code:

<html>
<head>
<script><!-- INSERT SCRIPT HERE --></script>
</head>
<body>

<table>
<tr>
    <td>
        <span id="oldImg" onmouseover="changeImg('newImg.jpg');">A cell</span>
    </td><td>
        <img id="newImg" src="oldmg.jpg">
    </td>
</tr>
</table>

</body>
</html>

Obviously this might need some work to make it more exensible.. but the base code is there. Furthermore, I don't know if you need the image to change back after the mouse leaves as well.

If you need more info, just ask.

-Ted

HuntHerr · 01-30-2005, 06:13 PM

Not working for me, is this the correct code?

Code:

<html>
<head>
<script>
function findObj(objID){ return document.getElementById?document.getElementById(ob  jID):document.all?document.all[objId]:null; }

function changeImage(newImgSrc) {
    var newImg = findObj("jack2.jpg");    
    if (!newImg) return;

    newImg.src = newImgSrc;
}</script>
</head>
<body>

<table width="469">
<tr>
    <td width="227">
        <span id="oldImg" onmouseover="changeImg('jack2.jpg');">a cell</span>
    </td><td width="230">
        <img id="newImg" src="jack.jpg">
    </td>
</tr>
</table>

</body>
</html>

ender · 01-30-2005, 06:47 PM

No.. try replacing the findObj('jack2.jpg') with findObj('newImg');