Bild ändern onmouseover und onmouseout

Ich bin-Kodierung mit php, ich möchte ein einfaches Bild ändern, wenn die Maus auf Sie. Ich bin mit diesem code:

echo '<li class="'.$icon['footer_social_icon'].'">
        <img src="../wp-content/uploads/img1.png"
        onmouseover="this.src="../wp-content/uploads/img2.png";"
        onmouseout="this.src="../wp-content/uploads/img1.png";"/>
    </li></ul>';

Ich weiß nicht, warum es nicht funktioniert!

InformationsquelleAutor Aminesrine | 2014-03-06
  1. 3

    Blick auf die Zitate

    onmouseover="this.src="../wp-content/uploads/img2.png";"

    Dass ist der Grund, warum es scheitert. Sie müssen verwenden Sie einfache Anführungszeichen escaped, da man mit php die Ausgabe der HTML -

    onmouseover="this.src=\'../wp-content/uploads/img2.png\';"
    InformationsquelleAutor epascarello
  2. 2

    Ein besserer Ansatz könnte sein, nur CSS verwenden, weil Sie nicht haben, um sorgen zu viel über Codierung.

    in der CSS Folgendes tun:

    .icon {
      background-image: url('/the-name-of-your-image.png');
      width: 100px; /* width of your image */
      height: 100px; /* height of your image */
}
.icon:hover {
      background-image: url('/the-image-when-you=hover.png');
}

    Ihre HTML würde so Aussehen:

    <li class="icon"></li>

    Wenn jemand bewegt sich die Maus über das LI-element die CSS ändern, wird das Bild in das icon:hover und dann, wenn Sie die Maus bewegen, aus dem LI-element wieder zurück zu seiner ursprünglichen.

    InformationsquelleAutor Cameron
  3. 0

    epascarello die Antwort wird wahrscheinlich den trick tun.

    Können Sie auch beide Bilder als separate Bilder im li, und ändern Sie Sie mit CSS.

    echo '<li class="'.$icon['footer_social_icon'].'">
    <img src="../wp-content/uploads/img1.png" class="img1" />
    <img src="../wp-content/uploads/img2.png" class="img2" />
</li></ul>';

    CSS:

    .img2 {
    display: none;
}

li:hover .img1 {
    display:none;
}

li:hover .img2 {
    display: inline; /* Or block, whichever you prefer */
}

    Diese Weise funktioniert auch auf Rechnern ohne javascript.

    InformationsquelleAutor Sander Koedood
Schreibe einen Kommentar