• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Wie binde ich OnMouseOver mit Hyperlink richtig in CSS ein?

P

pit

New member
Hi,

wie binde ich eigentlich richtig einen OnMouseOver-Effekt mit CSS ein!

In meinem Beispiel (siehe Link) will ich 4 Buttons DIREKT hintereinander in die obere und untere Navigationsleiste einfügen.

Mein Problem:
Nur mal der Button: Füge ich den Button in der CSS-Datei ein, so paßt er einwandfrei (siehe obere Leiste).
Füge ich den Button in der unteren Leiste über die HTML-Datei ein, so ist der einfach breiter (siehe Beispiel) bzw. da kommt irgendwo ein Zwischenraum rechts und unten her. Die beiden Buttons (oben u. unten) sind von den Abmessungen gleich!

Wie fügt man also einen Button für OnMouseover inkl. Link zu einer anderen Seite richtig mit CSS ein?
(bei berühren des Buttons soll das Bild ausgetauscht werden, beim Mausklick die verlinkte Seite erscheinen)

Wie bekommt man die Buttons direkt hintereinander ohne einen Abstand dazwischen und unten?

Beispiel - OnMouseOver

Gruß,
Peter
 
Zuletzt bearbeitet:
Hi.

Probier mal margin (das ist der Außenabstand). Also <img src="" style="margin: -5">. Das sit zwar nicht die feine Art, aber woran es bei dir liegt, erkenne ich momentan auch nicht.

Poste mal den Quelltext der CSS-Datei.

Gruß, December
 
Eigentlich so:
Code: 
img {float:left;}
Da Du dann aber mit anderen Grafiken in Deinem Dokument Konflikte bekommen könntest,
solltest Du dafür eine eigene Klass verwenden.
Beispiel:
Code: 
.buttons {float:left;}
 
Hi,

vielen Dank, aber wie realiesiere ich den OnMouseOver-Effekt mit CSS. Lese gerade bei Selfhtml nach aber
blicke noch nicht ganz durch!

Soll ich nun die Buttons im Dokument oder in der CSS-Datei einbinden?

Gruß,
Peter
 
Das hier:
Code: 
a.button:link, a.button:visited, a.button:hover, a.button:active {
  background:url(normal.gif) no-repeat;
  display:block;
   width:120px;
   height:20px;
}
a.button:hover {
  background:url(hover.gif) no-repeat;
}
in die css-Datei und das hier:
Code: 
<a href="" title="" class="button"></a>
in Deinen Quältext.
(Angaben sind Beispielwerte)
 
Hi,

vielen Dank! Hat geklappt. Nur noch eine Frage:
Wie bekomme ich 4 verschiedene Buttons nebeneinader? Muss ich die class (a.buttons) in der CSS-Datei 4x mit unterschiedlichen Namen eingeben (a.buttons-1, a.buttons-2, ... Ich habe eigentlich 8 Links (4 oben, 4 unten). Dann wird das ganz schön viel. Oder gibt es eine einfachere Lösung?

Beispiel

Gruß,
Peter :grin:
 
Moin!

Gib den Dingern das, was Du jest als Klassen hast als id und zusätzlich ein und dieselbe Klasse. Dann kannst Du einmal alle Attribute bis auf die Hintergrundbilder in die entsprechende Klasse packen und individuell nach der id die Bilder für "normal" und hover zuweisen...

Ahoi - Pit
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben