JavaScriptにイメージロールオーバーを追加するには

隠しコンテンツが表示され、別のイメージに切り替わり、再度クリックすると元の状態に戻りますというイメージがあります。私はこのサイトで見つけたコードを少し使用しています。画像にもロールオーバーを追加したいと思います。私はjavascriptによく精通していないので、私はこれを行う方法を困惑しました。どんな助けもありがとうございます。JavaScriptにイメージロールオーバーを追加するには

<head> 
<script language="javascript" type="text/javascript"> 
var imageNo = 2; 
function swapImage() { 
image = document.getElementById('image') 
switch (imageNo) { 
case 1: 
    image.src = "images/img.png" 
    imageNo = 2 
    document.getElementById('content').style.display = 'none' 
    return(false); 
case 2: 
    image.src = "images/img1.png" 
    imageNo = 1 
    document.getElementById('content').style.display = 'block' 
    return(false); 
} 
} 
</script> 
</head> 

<body> 
    <h4><a href="#"><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></a></h4> 
    <div id="content" style="display:none">This content toggles</span> 
</body><code>

出典

2012-03-31 vic

onmouseoverイベントを使用すると、イメージ要素のマウスオーバーで同じ動作が必要になります。

<img id="image" name="image" src="images/img.png" border="0" 
     onclick="swapImage();" onmouseover="swapImage();"/>

出典

2012-04-01 00:00:26 ShankarSangoli

お返事ありがとうございました。私はそれを試してみましたが、画像の上にマウスを置いたら、コンテンツを表示して隠すために、カーソルを画像から移動しなければならないという問題がありました – vic

onmouseout = "swapImage（）;"を追加してみてください – lifeIsGood

私はそれもやってみましたが、画像をクリックするとコンテンツが隠され、カーソルを移動するとコンテンツが表示されるという問題がありましたそれがなければならないとき。 – vic

CSS :hoverセレクタは単純です：

#image:hover { 
    background: url(your/image.png); 
}

出典

2012-04-01 00:16:51

次フィドルhttp://jsfiddle.net/AGgha/3/を参照してください。
あなたのjs devをもっと簡単にして、あなたのdivをアニメーション化することができます。
imintのように、infinte swapingにsetIntervalを使用しています。

出典

2012-04-01 00:37:18 marspzb

whoa、私は初心者ですo htmlこれは私の頭の上に少しです。私はそのコードで少し演奏しましたが、私は実際に何をしているのか分かりません。あなたがホバリングするときに、どのようにイメージを循環させないようにしますか？画像がクリックされた後にコンテンツを表示することのみ可能ですか？ – vic

あなたがフィドルを見たら、関数とミリ秒数（x）を渡すsetIntervalを実行するmouseIn/mouseOut関数があります。その関数はxミリ秒ごとに呼び出されます。同じパラメータ（関数とミリ秒数のx）を持つsetTimeoutを呼び出す必要がある場合は、その関数を呼び出すと、xミリ秒後にメソッドが1回実行されます。ホバー上のコンテンツのみを表示したい場合は、mouseIn/mouseOut関数を変更してdisplay = "block"を使ってコンテンツを表示するか、jQueryを使用してスライドアップ/ダウンを行います – marspzb

JavaScriptにイメージロールオーバーを追加するには

答えて

関連する問題