1

の1つの画像と、の別の画像をswapImage交換するを自分のサイトに実装したかったのです。基本的に、私が見つけた解決策では、おそらく別の画像を交換することもできます。mouseovermouseoutmousedownmouseup

私はこれを8つの異なるネストされたタブで発生させており、それらはすべて同じページにあります。

javascriptは次のようになります。

<script type="text/javascript">
    function swapImageFiat(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageHarley(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageHotWheels(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageVoltron(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageBenchmade(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageCrew(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageReuters(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageMarsVolta(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function preLoadImages() {
        for(var i = 0; i < arguments.length; i++) {
            var theImage = new Image();
            theImage.src = arguments[i];
        }
    }
</script>

また、各画像のインラインコードは、基本的に次のようになります。

<img class="diagram" src="img/fiat.gif" id="imgToSwapFiat" alt="Diagram" data-title="Fiat Diagram" onClick="swapImageFiat('imgToSwapFiat', 'img/fiat-animated.gif')" onmouseout="swapImageFiat('imgToSwapFiat', 'fiat.gif')" height="189" width="358" />

使用するIDを減らし、同じ繰り返しスクリプトを減らし、インラインコードを短くしたいと思います。ただし、JQueryやその他のスクリプトに煩わされることなく、画像とそのIDを変更
できる柔軟性も必要です。これが私が使用している理由ですgetElementById。

そのJavaScriptやインラインコードを書くためのより効率的な方法はありますか？

また

マウスアウトではなく、アニメーションの再生が停止した後、画像を元の画像に戻す方法はありますか？

4

3 に答える 3

2

this関数には最終的に実際の要素オブジェクトが必要になるため、要素IDの代わりに使用します。

スクリプトの例：

function swapImageFiat(imgEle, imgSrc) {
    imgEle.src = imgSrc;
}

画像のHTMLの例：

<img src="initial.jpg" onclick="swapImageFiat(this, 'clicked.jpg')" onmouseover="swapImageFiat(this, 'hovered.jpg')" onmouseout="swapImageFiat(this, 'left.jpg')" />
于 2012-10-20T03:57:18.410 に答える
1

ええ、確かにあります。Janが述べているように、すべての機能は同じです。それらすべてを複製する必要はありません。また、マウスオーバー/マウスアウトまたはマウスダウン/マウスアップをアタッチするだけで、HTMLからインラインイベントハンドラーコードを削除できます。

効果を持たせたい各画像に新しい属性を追加し、ページの読み込み時にjsを実行して、ハンドラーをアタッチするだけです。

ここでは、カスタム属性を使用（および存在を確認）しました。画像にそれらがある場合は、ハンドラーをアタッチします。そうでない場合は、他の通常の画像と同じです。これは、再利用可能で、使用する手間がほとんどないので便利です。

アニメーションGIFが再生されたら画像をリセットすることについては、おそらくJanの最初の提案を見てみます。アイデアのわずかな変更は、最後のフレームを透明にしてから、アニメーション画像を静的画像の上（z-index上）に配置することです。完了すると、元の画像が再び表示されます。これらの画像を再生する必要がある場合は、これらの画像を更新するためのシステムを決定する必要があります。わからないのですが、おそらくsrcを''に設定してから、animated.gifに戻すと、アニメーションが最初から再生されます。このようなアプローチを試みるかどうかを確認する必要があります。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

function mInit()
{
    var imgList = document.getElementsByTagName('img');
    var i, n = imgList.length;
    for (i=0; i<n; i++)
    {
        if (imgList[i].hasAttribute('img2'))
            imgList[i].addEventListener('click', imgClick, false);
        if (imgList[i].hasAttribute('img3'))
            imgList[i].addEventListener('mouseover', imgHover, false);
        if (imgList[i].hasAttribute('img4'))
            imgList[i].addEventListener('mouseout', imgOut, false);
    }
}

// because these function are attached with addEventListener, the 'this'
// keyword refers to the image element itself. No need for IDs..
function imgClick()
{
    this.src = this.getAttribute('img2');
}
function imgHover()
{
    this.src = this.getAttribute('img3');
}
function imgOut()
{
    this.src = this.getAttribute('img4');
}


window.addEventListener('load', mInit, false);

</script>
<style>
</style>
</head>
<body>
    <img src='img/gladiators.png'>  <!-- this image won't be touched, as it doesn't have img1, img2 or img3 attributes -->
    <img src='img/opera.svg' img2='img/chromeEyes.svg' img3='img/rss16.png' img4='img/girl2.png'/>
</body>
</html>
于 2012-10-20T06:51:49.293 に答える
0

ジェイはあなたの関数について良い提案をしていますが、それはすべて同じことをします。関数から名前を削除すると、それ以外は同じであることがわかります。また、関数名はまったく違いがありません。この場合、重要なのは関数に渡す引数だけです。

マウスアウトではなく、アニメーションの再生が停止した後、画像を元の画像に戻す方法はありますか？

gifをループしないようにし、アニメーションの最後のフレームを元の画像と同じにすることができます。AFAIKは、アニメーションGIFがどのフレームにあるかをJavascriptで検出する方法はありません。

本当に元の画像に戻したい場合は、Javascriptを使用して画像を完全にアニメーション化できます。すべての画像（またはスプライトマップ）をプリロードしてから、フレームごとにロードする関数を記述します。

于 2012-10-20T04:10:25.953 に答える