nicht angemeldet
Simpler Austausch von einem Bild via reinem CSS
Gunnar BittersmannHallo,
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
-
Hallo Patrick,
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.
<p>
<a href="http://www.newgrounds.com">
<img src="home1.jpg" alt="home" width="100" height="100"
class="img">
</a>
</p>Solange Dein Bild im HTML steht, kannst du mit CSS-Hovereffekten nichts machen. Definiere das Bild als Hintergrundbild für Dein a-Element. Evtl. ist es dafür nötig, das a-Element als Blockelement auszuzeichnen und mit etwas Innenabstand zu versorgen.
Für den Hover-Effekt nutzt Du dann ganz normal die Pseudoklasse a:hover, der Du ein anderes Hintergrundbild zuweisen kannst.
Als Trick würde ich übrigens empfehlen, nicht 2 Bilder zu verwenden, sondern nur eins, das beide Zustände enthält (versetzt), und auf a:hover nur die Position des Bildes zu verändern. Dann hast Du beim hovern keine Ladeverzögerung (das zweite Bild muß ja geladen werden).
Gruß aus Köln-Ehrenfeld,
Elya
--
-
Solange Dein Bild im HTML steht, kannst du mit CSS-Hovereffekten nichts machen.
Ein Gegenbeispiel zu dieser Aussage findest du zB. hier: schau auf den "Obelisken"
-
Hallo Kirchenfreund,
Solange Dein Bild im HTML steht, kannst du mit CSS-Hovereffekten nichts machen.
Ein Gegenbeispiel zu dieser Aussage findest du zB. hier: schau auf den "Obelisken"
OK, ich hätte meine Aussage dahingehend konkretisieren müssen: den hover-Effekt solltest Du - sofern Du auch alte Browser wie den IE 6 unterstützen möchtest - nur auf a-Elemente anwenden, deshalb setze das Bild als Hintergrundbild ein. Natürlich nicht unelegant, dieser Bildtausch, zumal es bei Deinem Beispiel tatsächlich um Inhalte geht (die im HTML stehen sollten), und nicht um reine Deko (die im CSS gut aufgehoben ist), wie im Beispiel von Patrick.
Gruß aus Köln-Ehrenfeld,
Elya
--
-
Ersteinmal vielen Dank für die hilfreichen Antworten. Ich werde mich heute Abend noch einmal in Ruhe damit beschäftigen, und meine Ergebnisse mitteilen. Übrigens, die Bilder sollten eigentlich als Teil einer Navigation gedacht sein.
-
Hi Patrick,
wenn's ne Navigation werden soll, empfehle ich dir dieses Tutorial von Ulrich-Markus Fritz über Barrierefreie grafische Links.
Gruß
Antipitch -
Hello out there!
Übrigens, die Bilder sollten eigentlich als Teil einer Navigation gedacht sein.
Das was heißt? Sind die Bilder lediglich Verzierung im Hintergrund und im Vordergrund ist der Linktitel als richtiger Text oder enthalten die Bilder den Text?
Im zweiten Fall sollten sie KEINE Hintergrundbilder sein. Dann ist wohl auch die Ein-Bild-CSS-Variante nicht browserübergreifend zu realisieren, ohne schwerwiegende Nachteile inkaufzunehemen. JavaScript bietet sich für diesen Effekt an.
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
-
-
-
Moin,
Ein Gegenbeispiel zu dieser Aussage findest du zB. hier: schau auf den "Obelisken"
wobei dein Gegenbeispiel laut (natürlich mit Vorsicht zu genießender) aktueller Statistik für etwa 50% der Webuser nicht zu sehen ist.
Gruß
Antipitch-
wobei dein Gegenbeispiel laut (natürlich mit Vorsicht zu genießender) aktueller Statistik für etwa 50% der Webuser nicht zu sehen ist.
who cares? IE-Nutzer in allen Details zu berücksichtigen ist denn doch übertrieben. Allerdings wäre es durchaus möglich, das Gegenbeispiel durch simples ersetzen des <div> durch <a> selbst IE-Dinosaurier-verträglich zu gestalten.
-
-
-
So,
ging schneller als gedacht. Ich habe einfach mal eure Ratschläge befolgt ( bis auf das 2 Bilder in einem...weiß nicht sorecht wie ich das realisieren soll) und dabei ist folgendes rausgekommen:
------
#button1 {display:block;
background-image:url(home1.jpg);
background-repeat:no-repeat;
border:0px;
width:100px;
height:100px;
}#button1:hover {display:block;
background-image:url(home2.jpg);
background-repeat:no-repeat;
border:0px;
width:100px;
height:100px;
}------
Es funktioniert, genau so wie ich es mir gedacht habe. Das heisst aber noch lange nicht das es auch richtig ist. Bitte um sinnvolle Kritik, und vielen lieben Dank für eure Meinungen.
Alles Gute,
Patrick
-
Hello out there!
Bitte um sinnvolle Kritik
Die ist ohne das zugehörige HTML kaum möglich.
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
-
-