so ändern Sie die Bild-auf-Taste Bild onmouseover-Ereignis in HTML?

Ich habe 4 image-Taste mit einem Bild. bei mouseover habe ich um das Bild zu ändern(ich.e laden Sie ein neues Bild auf die Schaltfläche). Hier ist der 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>

Hier habe ich geladen dump.png, informativ.png-genial.png und cool.png. auf die Maus über jede Schaltfläche, die ich habe, um das Bild zu ändern.

wo ist der code?
Mögliche Antwort? stackoverflow.com/questions/540349/...
Exor : ich kann den code anzuzeigen.
Ja ich könnte es mir jetzt.. 🙂

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");
}

    Trennung von Ihrem code aus html wird immer empfohlen.. diese Antwort wird hilfreich sein, es ist sauberer und gut für debugging..

    Dank Vivek Chandra. Ihre Arbeitsweise.
    wenn Sie neu auf stackoverflow,es ist ein Häkchen neben jeder Antwort,können Sie akzeptieren die Antwort, indem Sie auf die Häkchen.. akzeptieren Sie die Antwort, die am besten passt/Ihr problem behebt..

    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

    Versuchen, diese 

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

    InformationsquelleAutor Hemesh Singh

  4. 1

    Können Sie entweder Javascript oder CSS, unten ist die javascript-Ansatz.

    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 Demo

    Beachten Sie, dass die Einstellung von Ereignissen in der HTML ist nicht eine gute Praxis, es besser zu binden, die Ihnen in Javascript.

    Den CSS Weg ist wie folgt:

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

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

    JS Fiddle Demo

    InformationsquelleAutor fardjad

  5. 0

    können Sie CSS verwenden,

    1. Regel werden Standard-look

    2. auf Maus-hover zeigt ein anderes Bild in der gleichen Größe basic-Beispiel

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

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

    oder verwenden Sie sprite-image, haben beide in einem Bild
    und verwenden Sie CSS-Regeln, um seine position zu ändern

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

    InformationsquelleAutor Krsiak Daniel

Schreibe einen Kommentar