Replace an image with another when a different image is hovered on

Question

I am a total noob, so please go easy.

I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.

Thank you in advance for any help you can provide!

Here is what I have so far:

Script:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>

HTML:

<div id="wrap">
    <div id="upper">
        <div class="u-top">
            <a href="javascript:warp()"><img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" /></a>
            <a href="javascript:warp()"><img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" /></a>
        </div>
        <div class="u-mid">
            <img src="http://www.dxmgp.com/group/images/bw_owners.png" />
        </div>
        <div class="u-low">
            <a href="javascript:warp()"><img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" /></a>
            <a href="http://www.dxmgp.com" onMouseover="changeimage(myimages[2],this.href)" onMouseout="changeimage(myimages[3],this.href)"><img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png"  /></a>
            <a href="javascript:warp()"><img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" /></a>
        </div>
    </div>
    <div id="lower">
        <div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
        <div class="logos">
            <a href="http://www.thescoutguide.com">
            <img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
            <a href="http://www.spatialinsights.com" onMouseover="changeimage(myimages[0],this.href)" onMouseout="changeimage(myimages[1],this.href)"><img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png"></a>
            <a href="http://www.imagebydxm.com">
            <img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
        </div>
        <div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
    </div>
</div>

What is `document.images`? What is `document.images.targetimage`? — vortexwolf, Nov 12 '13 at 19:09

score 2 · Accepted Answer · answered Nov 12 '13 at 19:19

How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:

This is your div containing the image:

<div id="image">
<img src="image1.png" />
</div>

This is the hyperlink:

<a href="#" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse over to change image</a>

Here are the JavaScript functions that will replace the inner HTML of the div with different images:

<script type="text/javascript">
function mouseOver() {
    document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
    document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>

Let me know if this is what you are looking for.

Thanks, @goddfree, but that seems to only work on the last element on the page. I'd like to for each image to be swapped out by another whenever each link is rolled over. Is it possible to assign the same image id to each specific link, has a variable rollover image rather than than same image being repeated? — gem.liza, Nov 12 '13 at 20:31
That worked perfectly! I just had to read another tutorial and correctly identify each function: `function mouseOver1() { document.getElementById("image").innerHTML = ''; } function mouseOut1() { document.getElementById("image").innerHTML = ''; }function mouseOver2() { document.getElementById("image").innerHTML = ''; } function mouseOut2() { document.getElementById("image").innerHTML = ''; }` etc. Thank you! — gem.liza, Nov 12 '13 at 22:24

Replace an image with another when a different image is hovered on

1 Answers1