Замените изображение другим, когда другое изображение зависло на

Question

Я полный noob, поэтому, пожалуйста, пройдите.

Я пытаюсь заменить одно изображение вторым изображением, зависая на другом элементе. Моя проблема в том, что только первое изображение заменяется изображениями ссылок. Я даю каждому изображению идентификатор, я просто не уверен, как его применять.

Благодарим вас за любую помощь, которую вы можете предоставить!

Вот то, что я до сих пор:

Сценарий:

<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> 

Answer 1

Как о чем-то вроде этого? У вас есть div, содержащий image1.png. Когда вы нажимаете гиперссылку, вы хотите заменить image1.png на image2.png. Затем, когда вы перемещаете мышь от гиперссылке, image2.png вновь будет заменен image1.png:

Это ваш div содержащий изображение:

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

Это гиперссылка:

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

Вот функции JavaScript, которые заменят внутренний HTML div различными изображениями:

<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> 

Сообщите мне, если это то, что вы ищете.