JavaScriptでmouseclick/mouseoverのテキストと画像を変更します。

javascriptを使用してmouseoverで画像を変更する方法を知りました。しかし、それぞれの画像にmouseover/mouseclickで画像の下に説明を追加する方法を理解することができません。私はjQueryがうまくいかない。 JavaScriptの問題を解決するのを手伝ってください。JavaScriptでmouseclick/mouseoverのテキストと画像を変更します。

<html> 

<head> 
    <style> 
    .imgStyle { 
     height: 100px; 
      width: 100px; 
      border: 3px solid grey; 
     } 
    </style> 
</head> 

<body> 
    <img src="img/img_01.jpg" id="mainImage" /> 

    <div id="describ01" style="display:none">Description 01</div> 
    <div id="describ02" style="display:none">Description 02</div> 
    <div id="describ03" style="display:none">Description 03</div> 
    <div id="describ04" style="display:none">Description 04</div> 
    <br /> 
    <div id="myDiv" onmouseover="changeImage(event)"> 
     <img src="img/img_02.jpg" class="imgStyle" /> 
     <img src="img/img_03.jpg" class="imgStyle" /> 
     <img src="img/img_04.jpg" class="imgStyle" /> 
     <img src="img/img_05.jpg" class="imgStyle" /> 
    </div> 

    <script type="text/javascript"> 

     function changeImage(event) { 
     event = event || window.event; 

     var targetElement = event.target || event.srcElement; 

     if(targetElement.tagName == "IMG") { 
     document.getElementById("mainImage").src = targetElement.getAttribute("src"); 
     } 
     } 
    </script> 
    </body> 

    </html>

出典

2016-10-20 Kumar

JavaScriptを使用したい場合は、答えは

document.getElementById("description").innerHTML = 'Hello World';

、あなたはjQueryのを使用したい場合は、その後

$("#description").html("Hello World");

うまくいけば、それはあなた

出典

2016-10-20 10:50:49

上記のコードをお試しください。 myDivの4つの画像のいずれかにマウスカーソルを置くと、メイン画像がホバリング画像に置き換えられます。 – Kumar

上記のコードは、手動で追加する際に役立ちます。しかし、私はテキストと画像の両方がマウスのホバーで生成される必要があります。 – Kumar

これはcssの表示プロパティで可能です。しかし、どのようにjavascriptでブレンドを把握することができません。 – Kumar

与えるのを助けるだろう各画像にデータ属性：

<img src="img/img_02.jpg" class="imgStyle" data-text='text goes here' />

その後ホバーでこれを使用します。

if(targetElement.tagName == "IMG") { 
    document.getElementById("mainImage").src = targetElement.getAttribute("src"); 
    document.getElementById("description").innerHTML = this.getAttribute("data-text"); 
};

今、あなたは唯一以前のように1つの記述div要素を必要としています。

出典

2016-10-20 10:52:53 PhilBrockwell

を働いていませんでした。私を見て助けてください。私はそれを私が使用している画像変更機能とブレンドする方法を理解することができませんでした。 – Kumar

if文を上記のように置き換えます。 – PhilBrockwell

上記の解決方法から、置き換えられたすべてのイメージについて同じ記述を更新することができました。私は各画像の個別の説明が欲しい。 – Kumar

JavaScriptでmouseclick/mouseoverのテキストと画像を変更します。

答えて

関連する問題