phpBB.de

Verfasst: **14.02.2006 15:07**

Hi! Habe zwei Probleme bei folgendem Code:

a) Im Opera funktioniert das zwar perfekt, wenn ich dann aber von der
Ziel Seite (des Links) per Zurück Button wieder zurück gehe,
sind beide Links weiß. Wenn man mit der Maus rüber fährt,
wird -rollover.gif angezeigt, aber sobald man wieder runter ist, ist alles
weiß...

b) Im Internet Explorer wird nur #visitenkarte angezeigt, und der zweite
Links komplett ignoriert...

Anzumerken ist dabei, dass ich "display:block" völlig blind und ohne
Kenntnis, was das eigentlich bewirkt benutze...

Code: Alles auswählen

#visitenkarte       { display:block;
             background-image:url(visitenkarte.gif);
             width:200px; height:100px }
#visitenkarte:hover { background-image:url(visitenkarte-rollover.gif); 
#visitenkarte:link { background-image:url(visitenkarte-rollover.gif }
#visitenkarte:visited { background-image:url(visitenkarte.gif }
#visitenkarte:active { background-image:url(visitenkarte-rollover.gif }

#contact       { display:block;
             background-image:url(contact.gif);
             width:200px; height:100px }
#contact:hover { background-image:url(contact-rollover.gif); 
#contact:link { background-image:url(contact-rollover.gif }
#contact:visited { background-image:url(contact.gif }
#contact:active { background-image:url(contact-rollover.gif }

Wäre sehr nett, wenn mir jemand sagen könnte, was ich da falsch
mache...

Edit:
Außerdem erscheinen beide Bilder untereinander statt nebeneinander...

Code: Alles auswählen

<a href="visitenkarte.html" id="visitenkarte"></a>
<a href="contact.html" id="contact"></a>

Verfasst: **14.02.2006 19:05**

Zu deinem Edit:
einfach nach dem Link

Code: Alles auswählen

<br>

einfügen dann gehts.

Zum rest:

Code: Alles auswählen

#visitenkarte:hover { background-image:url(visitenkarte-rollover.gif);
#visitenkarte:link { background-image:url(visitenkarte-rollover.gif }
#visitenkarte:visited { background-image:url(visitenkarte.gif }
#visitenkarte:active { background-image:url(visitenkarte-rollover.gif }

Naja, wei nicht was das sein soll, laut meinen Informationen macht man das folgendermaßen:

Code: Alles auswählen

#visitenkarte a:visited { background-image: url(ghhkasd); }

nach dem schema bei allen und man sollte nicht die schließende Klammer vergessen...

mfg
n3or

Verfasst: **14.02.2006 21:40**

hm... mit diesem Code:

Code: Alles auswählen

<style>
#visitenkarte       { display:block;
             background-image:url(visitenkarte.gif);
             width:200px; height:100px; }
#visitenkarte a:hover { display:block; background-image:url(visitenkarte-rollover.gif);} 
#visitenkarte a:link { background-image:url(visitenkarte-rollover.gif );}
#visitenkarte a:visited { background-image:url(visitenkarte.gif );}
#visitenkarte a:active { background-image:url(visitenkarte-rollover.gif );}

#contact       { display:block;
             background-image:url(contact.gif);
             width:200px; height:100px }
#contact a:hover { background-image:url(contact-rollover.gif); }
#contact a:link { background-image:url(contact-rollover.gif );}
#contact a:visited { background-image:url(contact.gif };}
#contact a:active { background-image:url(contact-rollover.gif };}
 </style>

Wird es zwar richtig angezeigt, allerdings wechselt das Bild beim drüberfahren nicht...

Zum Edit: Ich wollte ja nicht, dass es untereinander, sondern das es
nebeneinander angezeigt wird... aber mittlerweile find ichs
untereinander fast schöner

Verfasst: **15.02.2006 23:12**

Also gut auf ein neues, ich hoffe ich habe dich diesmal richtig verstanden:
Du willst das immer visitenkarte.gif bzw. contact.gif angezeigt wird und nur wenn jemand darüber fährt visitenkarte bzw. contact-rollover.gif angezeit wird?! Wenn ja, hier der code:

Code: Alles auswählen

<style>
#visitenkarte       { display:block;
             background-image:url(visitenkarte.gif);
             width:200px; height:100px; }
#visitenkarte a:hover { display:block; background-image:url(visitenkarte-rollover.gif);}
#visitenkarte a:link { background-image:url(visitenkarte.gif );}
#visitenkarte a:visited { background-image:url(visitenkarte.gif );}
[#visitenkarte a:active { background-image:url(visitenkarte-rollover.gif );} ]

#contact       { display:block;
             background-image:url(contact.gif);
             width:200px; height:100px }
#contact a:hover { background-image:url(contact-rollover.gif); }
#contact a:link { background-image:url(contact.gif );}
#contact a:visited { background-image:url(contact.gif };}
[#contact a:active { background-image:url(contact-rollover.gif };} ]
 </style>

Wobei du den von mir mit [] eingeklammerten code weglassen kannst da dort automatisch der a:hover greift

Hoffe so ist das was du meinst...

mfg
n3or

Verfasst: **16.02.2006 13:29**

kann man es mal online sehen?

phpBB.de

Ganz einfacher CSS Hover Effekt -> und ich scheitere!

Ganz einfacher CSS Hover Effekt -> und ich scheitere!