Bild änder mit hover

Hallo Users

Ich habe ein Problem.Ich schaffe es nicht ein Code zu machen, der macht dass wenn man mit der Maus über das Bild fährt ein anderes Bild erscheint an der gleichen stelle.

Mein Code: <div id="L"> <a href="logout.php"><img src="her.png" alt="LOGOUT" /></a> </div>

Ich will das Bild logouts.png haben als zweites Bild.

Danke schon im voraus
Gruss HKM :sunglasses:

Wie findet ihr mich?

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 Teilnehmer

Wieso antworte ich hier eigentlich drauf…
http://lmgtfy.com/?iie=1&q=css+hover+change+image
Das sollte wohl ausreichen.

html5
<div id="L"><a href="logout.php"><img src="her.png" onmouseover="this.src='logouts.png'" onmouseout="this.scr='her.png'"/></a></div>

lg

Bei Smartphone ist hover meist nicht so supi.
Bist Du Dir sicher das Du dir so ein Projekt zutraust wenn Du schon solche kleinen sachen nicht weißt. Oje wünsche Dir viel Glück. Hab mir Deine Seite angesehen. Farben solltest Du vieleicht nicht zu viele nehmen und auch media screen css nutzen. Damit die Seite auch für Smartphone benutzerfreundlich wird. Weiterhin viel Glück. Wir haben alle mal angefangen.

@mueller-kfz Ich habe die Farben nur genommen damit ich die Divcontainer besser sehe.
Die Farbe ändere ich nachher noch.Und mediascreen nehme ich nachher auch noch.

HKM

Ä Chris_2080 bei mir wird das Bild gewechselt wenn ich mit der Maus drauf gehe, aber nicht es wird nicht zurück gewechselt.
Was muss ich tun?

HKM

Da ist ein kleiner Tippfehler im Code zum Zurueckaendern.
<div id=“L”><a href=“logout.php”><img src=“her.png” onmouseover=“this.src=‘logouts.png’” onmouseout=“this.src=‘her.png’”/></a></div>
So sollte es gehen.

1 „Gefällt mir“

Tippfehler unterlaufen: scr -> src

Du willst Hilfe zum Programmieren auf deine Seite anbieten?..

jep, ich lerne noch.Die Website wird erst mit Inhalt gefüllt wenn ich programmieren kann.

HKM

Danke

oder Du machst es mit css.

.kasten{ float: left; margin-top: 100px; height: 100px; width: 100px; background-image: url(her.png); background-size: 100px 100px; background-repeat: no-repeat; } .kasten:hover{ cursor: pointer; background-image: url(logouts.png); background-size: 100px 100px; background-repeat: no-repeat; }
       <div class="kasten">
              <a href=“logout.php”> </a>
       </div>

Dann kanst Du auch weiche Hover gestallten.
Wobei wie gesagt hover effekte nur für PC sinn machen da Sie mit Handy zwar angezeigt werden aber user schon vorsichtig mit handy umgehen muß. Einfach mal testen.

Ich würde das mit CSS machen

Also HTML:

<div id="L"> <a href="logout.php"><img id="image" src="her.png" alt="LOGOUT" /></a> </div>

CSS:

    #image{
        content:url("her.png");
    }
    #image:hover{
        content:url("logouts.png");
    }