Bild wechseln wenn maus drauf ist

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bild wechseln wenn maus drauf ist

    Hallo!

    Ich wills für ein kleines Projekt hinkriegen das wenn ich ein Bild hab, das es sich in ein anderes Bild wechselt wenn die Maus drüber zeigt. Geht das mit HTML?
    (die bilder sollen natürlich von mir definiert sein)

    Gruß,
    Ciah
  • Habe für dich mal den HTML-Code rausgesucht.


    Quellcode

    1. <span onMouseOver="imagechange.src='URL-Bild2.jpg'" onMouseOut="imagechange.src='URL-Bild1.jpg'">
    2. <img src="URL-Bild1.jpg" border="0" id="imagechange"></span>

    Bild-URL wie gewünscht abändern - "id bzw. imagechange" bitte nicht abändern! Wenn man mehrere Bilder auf diesem Prinzip wechseln will, muss man jeweils andere ID's verwenden, z.b. imagechange2, imagechanged3,...
    Der img-Code <img src="http://www..../bild.jpg" border="0" id="imagechange"> kann natürlich auch in einen Link-Code eingebettet werden. (daher border="0" schon vorbereitet)




    mfg
    Underkane
  • Vielen Dank, Broken Sword, dass du den Thread nochmal aufgemacht hast!

    Für einige Leute sicher interessant, wie das ganze in reinem HTML zu bewerkstelligen ist. Denn es gibt schließlich Menschen, die JavaScript lieber links liegen lassen. Webentwickler, wie User sollten die Möglichkeit haben auf JS zu verzichten. Folgend also ein kleines Tutorial, wie man den Maus-Über-Effekt ("hover") auch auf Bilder anwenden kann - ganz ohne Java, JavaScript, Perl, Flash und den ganzen... Rest :D.

    Zuallererst brauchen wir natürlich ein Bild.
    Ich nehme mal eines, welches das urheberechtlich geschützte Bild der Minen von Moria zeigt. Da die MMORPG-Sippe "Die Standhaften" eine Erlaubnis zum Veröffentlichen der Bilder hat, solange sie keinem kommerziellen Zweck gewidmet sind, verwende ich dieses schöne Bild :) Den Link zur Webseite schicke ich dem zuständigen Moderator, er soll sich das bitte Anschaun. Ggf, verwende ich andere Bilder.

    Bild 1

    Und ein zweites, am besten gleich großes, das wir beim darüberfahren mit der Maus einblenden wollen.
    Ich nehme mal eines, welches das urheberechtlich geschützte Bild der Minen von Moria zeigt. Da die MMORPG-Sippe "Die Standhaften" eine Erlaubnis zum Veröffentlichen der Bilder hat, solange sie keinem kommerziellen Zweck gewidmet sind, verwende ich dieses schöne Bild :) Den Link zur Webseite schicke ich dem zuständigen Moderator, er soll sich das bitte Anschaun. Ggf, verwende ich andere Bilder.

    Bild 2

    Meine Bilder sind jeweils 350x298 Pixel groß. Diese Zahlen sollten wir uns merken :)

    Am elegantesten lösen wir unser Problem, wenn wir beide Bilder in eine Datei einfügen. Schafft Übersichtlichtkeit, hilft beim Fehler finden und kommt einfach besser (IMHO). Wir fügen die beiden Bilder einfach untereinader ein. Das können wir auch mit Paint machen, dafür brauchen wir keine Grafikspezialisten sein. :D Das sollte dann so aussehen:

    Bild 1 + 2

    Der Grundstein ist also gelegt. Nun müssen wir den Browser nur anweisen, beim laden und ansehen der Seite den oberen Teil und beim drüberfahren mit der Maus den unteren Teil anzuzeigen.
    Wie könnte ein solcher Link aussehen? Wir haben die möglichkeit Pseudoklassen zu deklarieren, wenn wir mit CSS arbeiten. Der Vorteil an CSS: Es entspricht dem W3C, also dem Standard für Arbeiten mit HTML (salopp gesagt) und wird von allen gängigen Browsern ausnahmslos unterstützt (nochmal etwas salopp formuliert ;)).
    Überlegen wir uns aber erst den Link:

    PHP-Quellcode

    1. <a href="http://www.in.de/mine/rein" class="button">Hier gehts in die Mine</a>


    Wir entscheiden uns mal für die Klasse "button". Ihr könnt das nenne, wie ihr wollt, müsst euch aber merken, was ihr da hinschreibt ;). Der Rest ist ein "normaler" HTML-Link. Der "Link-Name", also "Hier gehts in die Mine" ist übriges auch die Alternativ-Anzeige, falls die Bilder nicht hinhauen. Das heißt, ihr habt eine Alternative Darstellungsform, die von der W3C bei Bildern gewünscht wird.

    Nun aber ab zum Deklarieren der Klasse. Das machen wir entweder per

    PHP-Quellcode

    1. <style type="text/css">Hier der CSS Code</style>
    oder ihr verwendet (eine) eure(r) CSS-Dateien.

    PHP-Quellcode

    1. .button{
    2. display:block;
    3. width:350px;
    4. height:298px;
    5. text-indent:-1000px;
    6. background:url('images/bild1und2.jpg') no-repeat left top;
    7. }
    8. .button:hover{
    9. background:url('images/bild1und2.jpg') no-repeat left bottom;
    10. }


    Die Klasse Button wird hier "über das Bild gelegt" und die Größe angegeben. Nun wollen wir das automatische Widerholen blokieren, das normalerweise passiert (no-repeat) und sagen dem Browser, er soll das Bild in der Größe 350x298 Pixel von links oben (left top) abbilden.

    Das wars auch schon :)

    Hier habe ich euch noch - ganz ohne Werbung - das Beispiel geuppt:
    Beispiel.html

    Lg
    RamsesV

    Alle Rechte der Bilder verbleiben bei Codemasters und Turbine!