it-swarm.com.de

Bild im Hover ändern

Wie kann ich diesen exakten Code ändern, um den Mouseover-Effekt zu erzielen?

Ich habe versucht, den anderen Fragen und Antworten zu folgen, konnte sie jedoch nicht wirklich befolgen.

Der HTML-Code lautet also:

<a href="RR.html"><img src="R3.jpg" width=700 height=300 /></a>

<div>
    <a href="SSX.html"><img src="SSX.jpg" height=100 width=120 /></a>
    <a href="MPreview.html"><img src="MaxPayne3Cover.jpg" height=100 width=120 /></a>
    <a href="NC.html"><img src="NC.jpg" height=100 width=120 /></a>
    </br>
</div>

Jetzt möchte ich das große Bild ändern, wenn sich der Mauszeiger über den kleinen Bildern befindet.

23
Johnny Hankgard

Versuchen Sie den folgenden Code. Es funktioniert

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title><br />
    </head>

    <body>
        <p>
            <script type="text/javascript" language="javascript">
                function changeImage(img){
                   document.getElementById('bigImage').src=img;
                }
            </script>

            <img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
            <p>&nbsp; </p>
            <div>
                <p>
                    <img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
                </p>
                <p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>

                <p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>

                <p>&nbsp;</p>
                </br>
            </div>
    </body>
</html>

Ich habe den Code so modifiziert, dass er mit einiger Verzögerung funktioniert. Aber er animiert nicht.

function changeImage(img){
    // document.getElementById('bigImage').src=img;
    setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
20

Probieren Sie es aus, es ist so einfach und das kürzeste, ändern Sie einfach die URL des Bildes:

<a href="TARGET URL GOES HERE">
    <img src="URL OF FIRST IMAGE GOES HERE"
         onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
         onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
    </img>
</a>
49
zak

Oder mag das:

<a href="SSX.html">
    <img src="SSX.jpg"
         onmouseover="this.src='SSX2.jpg';"
         onmouseout="this.src='SSX.jpg';"
         height=100
         width=120 />
</a>

Ich denke, das ist der einfachste Weg.

10
Asif

Kein JavaScript erforderlich, wenn Sie diese Technik verwenden

<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>

sie benötigen Css, um es zu kontrollieren

.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}

denken Sie daran, div etwas Klasse zu geben und sie in Ihrem CSS-Namen zu erwähnen, um Ärger zu vermeiden :)

6
Nizam Kazi

Der einfachste Weg für ein Roll Over-Bild oder ein Mouse Over-Bild für Webseiten-Menüs

<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"   
   onmouseout="document.myimage1.src='images/ipt_home1.png';">
  <img src="images/ipt_home1.png" name="myimage1" />
</a>
4
Darvin

Wenn Sie kein Javascript verwenden möchten, können Sie CSS und: hover selector verwenden, um denselben Effekt zu erzielen.

Hier ist wie:

index.html:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>

stylesheet.css

.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
3
Karl
<script type="text/javascript">
    function changeImage(img){
       img.src=URL_TO_NEW_IMAGE;
    }
</script>

<a href="RR.html"><img id="bigImage"
                       onmouseover="changeImage(document.getElementById('bigImage'));"
                       src="R3.jpg"
                       width=700
                       height=300/></a>
<div>
    <a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
    <a href="MPreview.html"><img src="MaxPayne3Cover.jpg" height=100 width=120/></a>
    <a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
    </br>
</div>
3
andrrs

Verwenden Sie einfach dieses: 

Beispiel:

<img src="http://nineplanets.org/planets.jpg" 
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>

Funktioniert am besten, wenn die Bilder dieselbe Größe haben.

Kopier das

<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
2
Vikshay

Hier ist ein vereinfachtes Codebeispiel:

.change_img {
    background-image: url(image1.jpg);
}
.change_img:hover {
    background-image: url(image2.jpg);
}
0
user2851286