Text - Mouseover - Bild

[simpLe]

Hallo.

Ich weiß nicht genau, ob das ganze mit HTML funktioniert, kenne mich da leider nicht ganz so gut aus. Mit Javascript geht's aufjedenfall, aber wenn das jemand abgeschaltet hat, bringts ja nix.

Wenn ich mich nicht täusche gehts mit HTML und CSS..

Jetzt erstmal, was ich möchte:
Wenn ich mit der Maus über einen Text fahre, möchte ich, dass zB neben dem Text ein Bild erscheint, wenn ich von dem Text runterfahre, solls wieder weggehen. Besser wärs, wenn das Bild direkt neben dem Mauspfeil/Zeiger wäre, muss aber nicht sein.

Sorry, dass ich hier gleich eine Frage stelle, bin neu hier.. Habe vorher schon ca. 1 Stunde gegoogelt, gelesen.. aber da finde ich immer nur was, Bild - Mouseover - Bild oder Link - Mouseover - Bild oder so..

Grüße

 

[threadi]

Klar, über die CSS-Pseudoklasse hover gibt es 2 Möglichkeiten für dich:

- Bild als img-Tag innerhalb des Links einfügen und mittels display (block|none) ein- und ausblenden
- Bild als Hintergrundbild des Links einfügen und nur beim hover anzeigen

 

[simpLe]

Danke threadi für die schnelle Antwort, aber ich kann dir nicht ganz folgen.

Also bei der 1. Methode, kann ich mir da selbst aussuchen, wo das Bild erscheint? Also geht's auch direkt neben der Maus? Wo finde ich dazu den passenden Code? - Muss ich dafür ein neues Stylesheet erstellen, oder nicht?

 

[threadi]

Du musst nur dein CSS entsprechend ergänzen, ja.

Bei beiden Varianten kann man sich die Position des Bildes selbst aussuchen, wobei bei der zweiten Variante mit dem Hintergrundbild eine Positionierung teilweise etwas schwierig ist. Kommt drauf an was Du genau erreichen willst.

 

[simpLe]

Ok, danke. Leider kenn ich die Codes nicht auswendig, und weiß auch nicht, wo ich den passenden hover Code hinbekomme.. Was muss ich ins CSS schreiben, und was in die HTML Seite? Wär wirklich super, wenn du mir diesbezüglich auch noch helfen könntest - außer, es ist zu viel Arbeit.

 

[threadi]

Ganz einfaches Beispiel fürs CSS:

a img { display: none; }
a:hover img { display: block; }

HTML sollte klar sein.