Frage stellen

Auf der HP - Foto über Foto

1.2k Aufrufe
Gefragt in Webseiten HTML von
schwierig auszudrücken. Hab es auch nicht in der SUCHE gefunden.
Ich habe ein Foto auf meiner HP.
Dies zeigt unser Feuerwehrhaus mit geschlossenen Hallentoren.
Jetzt möchte ich gerne, das wenn man auf die Tore klickt, besser noch, wenn man mit der Maus darüber fährt das zweite Foto erscheint.
Dies zeigt genau dasselbe Bild mit geöffneten Toren.
Beide Bilder mit Stativ aufgenommen und gleich groß.
Wie kann ich das möglich machen ?
Mir fällt nix ein.

Gruß und Danke Rudy

4 Antworten

0 Punkte
Beantwortet von
per mouseover sollte das machbar sein
siehe hier: www.on-mouseover.de/script1.htm
0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
Hallo ritterrudi,

falls Du ohne Javascript auskommen möchtest, geht es auch mit CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">
a.IrgendeinName
{
display:block;
background-image:url(Bild1.png);
width:100px; height:70px
}
a.IrgendeinName:hover
{
background-image:url(Bild2.png);
}
</style>

<body>
<table >
<tr>
<td><a class='IrgendeinName'></a>
</td>
</tr>
</table>
</body>
</html>


Bild1 und Bild2 liegen in diesem Beispiel gleichen Verzeichnis, wobei Bild1 normalerweise erscheint, Bild2 beim Überfahren mit der Maus. Die Größe musst Du passend zu Deiner Webseite einstellen.

Gruß
computerschrat
0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
Nochmal hallo,

bevor die Anweisung <body> kommen darf, muss natürlich noch der Header mit </head> geschlossen werden. Ich sehe gerade, dass ich da beim Kopieren eine Zeile verloren habe :-(

Gruß
computerschrat
0 Punkte
Beantwortet von
das ist zwar so möglich, wie in Antwort 2 beschrieben (mal abgesehen von dem sinnlosen Tabellenlayout - wozu ein Rückgriff ins Layouten mit Tabellen wenn daneben CSS doch schon bekannt ist?) hat aber einen Riesen-Nachteil: Das zweite Bild wird erst beim hovern geladen, erst einmal verschwindet also das alte Bild und ganz langsam - je nach Dateigröße und Übertragungsrate baut sich das neue auf. Da es sich wohl um ein Intro-Bild handelt unterstelle ich eine größere Datei, wo das schon mal recht unschön aussehen kann.

Mitt CSS-Sprites lässt sich dies vermeiden!
...