nicht angemeldet
Hallo,
mir ist bewusst das dass Thema schon einmal in der FAQ kurz angerissen wurde, und das es schon Leute mit ähnlichen Problemen hier gab.
Allerdings komme ich einfach alleine nicht weiter, und benötigen Hilfe von Leuten die schon mehr Erfahrung im Bereich CSS gemacht haben als ich.
Das Problem was ich habe, bzw den Effekt den ich erzeugen möchte lautet wie folgt:
Ich habe 2 Bilder. Das eine Bild lautet home1.jpg, und das zweite home2.jpg. Während der User mit dem Mauszeiger über das Bild home1.jpg geht möchte ich das via CSS das Bild home2.jpg anstelle von home1.jpg eingeblendet wird. Alle Daten wie das HTML Dokument, die CSS und die Bilder liegen übrigens im selben Ordner.
Zuerst hier meinen einfachen HTML 4.01 Code in der Variante Strict:
------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<meta http-equiv="content-language" content="de">
<link rel="stylesheet" type="text/css" href="hover.css">
<title>
Hover
</title>
</head>
<body>
<p>
<a href="http://www.newgrounds.com">
<img src="home1.jpg" alt="home" width="100" height="100"
class="img">
</a>
</p>
</body>
</html>
------
In meiner CSS habe ich ein wenig rumgewurschtelt, konnte den Effekt aber nicht umsetzen. Daher sieht meine CSS gerade mal so aus:
img. {border:none;}
Das wars. Alles andere was ich mit :hover, background-image und co ausprobieren wollte schlug fehl. Das border:none ist auch nur da, damit um die Grafik herum kein blauer Rahmen erscheint.
Könnte mir hier ein kluger Kopf den Weg nun in CSS aufzeigen wie ich oben erwähnten Effekt erzielen kann? Und ist die Ansprechung über eine Klasse hier überhaupt richtig? Ich verstehe nämlich immer noch nicht ganz den Unterschied zwischen id´s, und Klassen bis auf die Tatsache das id´s nur einmal vergeben werden können.
Ich bin für jede hilfreiche Antwort äußerst dankbar.
Liebe Grüße,
Patrick
Gunnar Bittersmann