Grafiktausch mit CSS

[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

[mark]

https://www.drweb.de/trickkiste/tricks234.shtml
und
https://www.drweb.de/trickkiste/tricks119.shtml

zum Beispiel

[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.

[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

[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:

Code: Alles auswählen

 a:hover#1 

sprich: die id hinter dem a aufrufen.

[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

[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.

[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;

[HW]

eventuell mal
https://www.artikel-online.de/Artikel/W ... ation.aspx
durchlesen.
Dort gibt es auch ein kleines Beispiel