Ändern Sie Text und Bild auf Mausklick/Mouseover in Javascript

Ich fand heraus, wie man Bild bei Mouseover durch Javascript ändern. Sie können jedoch nicht herausfinden, wie Sie die Beschreibung unterhalb des Bildes mit Mouseover/Mausklick auf das jeweilige Bild hinzufügen. Ich bin nicht gut in jQuery. Bitte helfen Sie mir, das Problem nur in Javascript zu lösen.Ändern Sie Text und Bild auf Mausklick/Mouseover in Javascript

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

Quelle

2016-10-20 Kumar

Wenn Sie Javascript verwenden wollen, dann wird die Antwort

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

sein, und wenn Sie JQuery verwenden möchten dann

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

Hoffentlich wird es Ihnen

Quelle

2016-10-20 10:50:49

Bitte versuchen Sie den obigen Code. Wenn ich den Mauszeiger auf eines von vier Bildern in myDiv setze, wird das Hauptbild durch das verschobene Bild ersetzt. – Kumar

Der von Ihnen erwähnte Code ist hilfreich beim manuellen Hinzufügen. Aber ich möchte, dass sowohl Text als auch Bild beim Maus-Hover erzeugt werden müssen. – Kumar

Ich weiß, das ist mit CSS-Display-Eigenschaft möglich. Aber nicht in der Lage, herauszufinden, wie man Javascript einfügt. – Kumar

Gebe Hilfe Jedes Ihrer Bilder hat ein Datenattribut:

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

diese dann auf schweben verwenden:

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

Jetzt brauchen Sie nur eine Beschreibung div wie zuvor.

Quelle

2016-10-20 10:52:53 PhilBrockwell

ich den Code aktualisiert gearbeitet hat. Bitte schauen Sie und helfen Sie mir. Ich konnte mir nicht vorstellen, wie ich es mit der Bildveränderungsfunktion, die ich verwende, überblenden würde. – Kumar

Ersetzen Sie die if-Anweisung wie oben – PhilBrockwell

Hier von der oben genannten Lösung, die Sie freigegeben haben, konnte ich die gleiche Beschreibung auf allen Bildern, die ersetzt wurden, aktualisieren. Ich möchte eine individuelle Beschreibung für jedes Bild. – Kumar

Ändern Sie Text und Bild auf Mausklick/Mouseover in Javascript

Antwort

Verwandte Themen