comment changer l'image sur un bouton image événement onmouseover en HTML?

J'ai 4 bouton image contenant une image. au survol de la souris, je dois changer l'image(j'.e charger une nouvelle image sur le bouton). Voici le code.

<div class ="submit" id="submit" >
    <input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" />
    <input  type="image" src="informative.png" value="Informative" class ="Informative" id="Informative" onclick="posting_by_user('Informative')"/>
    <input  type="image" src="brilliant.png" value="Brilliant" class ="Brilliant" id="Brilliant" onclick="posting_by_user('Brilliant')"/>
    <input  type="image" src="cool.png" value="Cool" class ="Cool" id="Cool" onclick="posting_by_user('Cool')"/>
</div>

Ici, j'ai chargé de vidage.png, instructif.png, brillant.png et cool.png. au survol de la souris sur chaque bouton, je dois changer l'image.

InformationsquelleAutor Raju.allen | 2012-02-07
  1. 2
    <input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" onmouseover="changeImg.call(this)" />

function changeImg(){
this.setAttribute("src","newImageFileName.jpg");
}

    Séparer votre code html est toujours conseillé.. cette réponse sera utile car il est plus propre et bon pour le débogage..

    • grâce Vivek Chandra. Son travail maintenant.
    • si vous êtes nouveau sur stackoverflow,il y a une coche à côté de chaque réponse,vous pouvez accepter une réponse en cliquant sur la coche.. accepter la réponse qui convient le mieux/résout votre problème..
    InformationsquelleAutor Vivek Chandra
  2. 2
    <input  type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" 
onclick="posting_by_user('Dumb')" 
onmouseover="this.src='informative.png';" 
onmouseout="this.src='dump.png';" />
    InformationsquelleAutor amka
  3. 2

    Essayer cette 

    $(document).ready(function() {
$('input[type=img]')
    .mouseover(function() { 
        var src =  "mouseover.png";
        $(this).attr("src", src);
    });
    InformationsquelleAutor Hemesh Singh
  4. 1

    Vous pouvez utiliser Javascript ou CSS pour cela, ci-dessous est le javascript approche.

    window.addEventListener("load", function load (event) {
    window.removeEventListener("load", load, false);
    tieEvents();
}, false);

function tieEvents() {
    var button = document.getElementById('Dumb');

    button.addEventListener("mouseover", hovered, false);
    button.addEventListener("mouseout", unhovered, false);

    function hovered() {
        button.src = "anotherimg.png";
    }

    function unhovered() {
        button.src = "anotherimg.png";
    }
};

    JSFiddle Démo

    Noter que les événements dans le HTML n'est pas une bonne pratique, il est préférable de les attacher en Javascript.

    Le CSS façon suivante:

    #Dumb {
    backgroud: url("dump.png");
}

#Dumb:hover {
    backgroud: url("another.png");
}

    JS Fiddle Démo

    InformationsquelleAutor fardjad
  5. 0

    vous pouvez utiliser les CSS

    1. règle l'affichage par défaut de regarder

    2. la souris passe dessus montre une autre image de la même taille exemple de base

      button1 {background: url(img/button1.png)}

      button1:hover {background: url(img/button1_hover.png)}

    ou vous pouvez utiliser l'image sprite, ont à la fois en une seule image
    et l'utilisation des règles CSS à modifier sa position

    http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

    InformationsquelleAutor Krsiak Daniel