Я полный 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>
Как насчет чего-то подобного? У вас есть div
содержащий image1.png
. Когда вы image1.png
гиперссылку, вы хотите заменить image1.png
на image2.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>
Позвольте мне знать, если это то, что вы ищете.
function mouseOver1() { document.getElementById("image").innerHTML = '<img src="image2.png" />'; } function mouseOut1() { document.getElementById("image").innerHTML = '<img src="image1.png" />'; }function mouseOver2() { document.getElementById("image").innerHTML = '<img src="image3.png" />'; } function mouseOut2() { document.getElementById("image").innerHTML = '<img src="image4.png" />'; }
и т. д. Спасибо!
document.images
? Что такоеdocument.images.targetimage
?