web-dev-qa-db-fra.com

Changer l'image en vol stationnaire

Comment puis-je changer ce code exact pour faire l'effet de survol au passage de la souris?

J'ai essayé de suivre certaines des autres questions et réponses, mais je ne pouvais pas vraiment les suivre.

Le code HTML est donc:

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

Maintenant, ce que je veux faire est de changer l'image de grande taille lorsque la souris survole les petites images.

htmlcsshover
23
Johnny Hankgard

Essayez le code suivant. Ça marche

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

J'ai modifié le code, comme si cela fonctionnerait avec un peu de retard.

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

Essayez ceci, c'est si facile et le plus court, il suffit de changer l'URL de l'image:

<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

Ou fais comme ça:

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

Je pense que c'est le moyen le plus simple.

10
Asif

Pas de JavaScript nécessaire si vous utilisez cette technique

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

le vous aurez besoin de css pour le contrôler

.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;
}

n'oubliez pas de donner une classe à div et de la mentionner dans votre nom CSS pour éviter tout problème

6
Nizam Kazi

Le moyen le plus simple de passer d'une image à une autre ou d'une image de souris à une autre pour les menus de pages Web

<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

Si vous ne voulez pas utiliser Javascript, vous pouvez utiliser CSS et: hover selector pour obtenir le même effet.

Voici comment:

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

Il suffit d'utiliser ceci: 

Exemple:

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

Fonctionne mieux avec les images étant de la même taille.

Copier cette

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

Voici un exemple de code simplifié:

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