0

私は全くの初心者ですので、お気軽にどうぞ。

別の要素にカーソルを合わせているときに、1 つの画像を 2 番目の画像に置き換えようとしています。私の問題は、最初の画像だけがリンク画像に置き換えられていることです。各画像にIDを付けましたが、それを適用する方法がわかりません。

あなたが提供できる助けを前もってありがとう！

これが私がこれまでに持っているものです：

脚本：

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

1 に答える 1

2

このようなものはどうですか？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>

の内部 HTMLdivを別の画像に置き換える JavaScript 関数を次に示します。

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

これがあなたが探しているものかどうか教えてください。

于 2013-11-12T19:19:01.813 に答える