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)
Natürlich geht das 
Ganz ohne JavaScript und garantiert mit jedem gängigen Browser. Und W3C-Konform 
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 .
Zuallererst brauchen wir natürlich ein Bild.
Und ein zweites, am besten gleich großes, das wir beim darüberfahren mit der Maus einblenden wollen.
Meine Bilder sind jeweils 350×298 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. Das sollte dann so aussehen:
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-Code:
<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-Code:
<style type="text/css">Hier der CSS Code</style>
oder ihr verwendet (eine) eure(r) CSS-Dateien.
PHP-Code:
.button{
display:block;
width:350px;
height:298px;
text-indent:-1000px;
background:url('images/bild1und2.jpg') no-repeat left top;
}
.button:hover{
background:url('images/bild1und2.jpg') no-repeat left bottom;
}
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 350×298 Pixel von links oben (left top) abbilden.
Das wars auch schon
Hier habe ich euch noch – ganz ohne Werbung – das Beispiel geuppt:
Hier das Beispiel, wenn es funktioniert:
Hier gehts in die Mine
Und hier, wenn der Alternativtext angezeigt wird:
Hier gehts in die Mine
Die Links führen auf blog.ratissari.at
no copyright – feel free to use in any way
Lg
Hendrik
Alle Rechte der Bilder verbleiben bei Codemasters und Turbine!
Laut dem Webmagazin mashable.com wurde vergangene Woche ein weiteres sogenanntes Easter Egg auf einer Webseite des Googlekonzerns gefunden. Easter Eggs sind kleine Überraschungen, welche in Software, vornehmlich Spiele, eingebaut werden, um dem neugierigen und erfindungsreichen Spieler eine Belohung für sein tiefes Interesse an der Software zu bieten. Die Softwareentwickler, welche bei Google für Youtube verantwortlich sind, haben den Videos ein nettes Addon geschenkt, mit dem man das weit bekannte, einfache Computerspiel “Snake” während eines Videos spielen kann. Bisher ist nicht bekannt, wann das Easteregg von den Programmierern eingebaut wurde, nahe liegt jedoch, dass es mit dem neuen Youtube-Player im April diesen Jahres auf das Videoportal gekommen ist.
Das Easter Egg kann nur bei Videos mit dem neuen Youtube-Player und auf der Webseite selber abgespielt werden. Eingebettete Videos sind davon ausgeschlossen. Um Snake auf Youtube zu spielen muss lediglich die linke und die obere Pfeiltaste gleichzeitig gedrückt werden, schon beginnt das Spiel.
