Seite 1 von 1
Grafiktausch mit CSS
Verfasst: 26.09.2005, 17:33
von bydlo
moin moin,
hab grade folgende aufgabe zu lösen.
grafische links sollen mit nem mouseover (grafiktausch) erstellt werden und gleichzeitig sollen die links aber auch von suchmaschinen verfolgt werden können.
damit scheidet JS ja aus.
das wird wahrscheinlich auch mit CSS funktionieren.
hat mal jemand nen link zu ner verständlichen anleitung parat?
vielen dank axel
Grafiktausch mit CSS
Verfasst: 26.09.2005, 17:38
von mark
Grafiktausch mit CSS
Verfasst: 26.09.2005, 17:53
von Lima
Es gibt eine ganze einfach Methode. Du musst einfach die Hover Grafik unter die Backgrund Grafik setzten und beim hovern den Background um die gewünschte Pixel Anzahl verschieben.
Wenn du möchtest kann ich es auch noch genauer erklären.
Verfasst: 26.09.2005, 18:02
von bydlo
ahoi,
danke für die links.
@lima
ich habs jetzt mal folgendermaßen versucht.
<td id="1" width="50" height="50"><a href="2.html"><img src="bilder/quer8_klein.jpg" width="51" height="50" border="0" align="middle"></a></td>
dann eine id im exteren CSS angelegt
#1 { }
#1 a { }
#1 a:hover { background-image: url("quer8_klein_over.jpg") }
so gehts allerdings nicht.
falls du hier auf den ersten blick den fehler findest würd ich gerne so machen.
falls nicht würd ich dein angebot (nähere erklärung) gerne annehmen.
gruss axel
Verfasst: 26.09.2005, 18:25
von Liesl_Weppen
Hi,
wenn Du den Mouseovereffekt über die externe CSS machst, kann es zu Verzögerungen kommen, weil das Hover-Bild erst dann geladen wird, wenn die Mouse über den Link fährt. D.h. die Hoverbilder müssen alle bereits mit der Seite geladen werden, ohne das sie sichtbar wären.
Eine besserer Lösung (ebenfalls mit CSS) findet sich hier:
https://www.artikel-online.de/Examples/ ... menue.html
Für das Beispiel oben könnte es so funktionieren:
sprich: die id hinter dem a aufrufen.
Verfasst: 26.09.2005, 18:32
von bydlo
@liesl_weppen
danke,
brauch es nicht für die navigation.
da nutze ich es schon erfolgreich & verstehe auch nicht warum es in diesem fall nicht funktioniert.
hier handelt es sich um eine bildergalerie mit miniaturen .
die miniaturen sollen alles links sein (sumafreundlich) auf denen ein grafikhover stattfinden soll.
hab jetzt schon alle varianten versucht die mir so eingefallen sind.
bin grade etwas ratlos.
gruss axel
Verfasst: 26.09.2005, 18:38
von mark
{ background-image: url("quer8_klein_over.jpg") }
Probier es ohne Leerstelle und Anführungszeichen
Code: Alles auswählen
background-image:url(quer8_klein_over.jpg)
Das sollte gehen.
Grafiktausch mit CSS
Verfasst: 26.09.2005, 18:40
von Lima
Die von Liesl_Weppen verlinkt Lösung ist genau die die ich meine. Sie wirkt auf Grund der vielen CSS Angaben ein wenig überladen. Den eigentlichen Hover Effekt bewirken nur zwei Befehle:
background: url(MenueBeispiel.gif);
&
background: url(MenueBeispiel.gif) 0px -22px no-repeat;
Verfasst: 26.09.2005, 21:19
von HW
eventuell mal
https://www.artikel-online.de/Artikel/W ... ation.aspx
durchlesen.
Dort gibt es auch ein kleines Beispiel
