Der Martin: Mouseovereffekt verschwindet wenn button verlinkt wird

Beitrag lesen

Hallo,

Ich habe Buttons mit Fireworks erstellt.

darunter kann ich mir im ersten Moment nichts vorstellen, beim Weiterlesen komme ich aber auf die Vermutung, dass du Bilder (Grafiken) erstellt hast (Fireworks scheint also wohl ein Grafikprogramm zu sein).

Mit CSS habe ich diese jetzt mit einem mouseover-effekt versehen.

Die Bilder? Oder die Links, die du mit diesen Bildern gestaltest? Bitte versuche, dich genau auszudrücken, das ist meistens sehr wichtig, um nicht missverstanden zu werden.

<a href:"link">
<img src:"bild">
</a>

Dieses Beispiel dürfte eigentlich gar nichts anzeigen, weil es fehlerhaft ist. Du solltest dich vielleicht noch ein bisschen mit den Grundlagen von HTML befassen. Attributname und Attributwert werden in HTML mit einem "=" getrennt. In CSS ist das anders, da wird der Wert mit einem ":" vom Eigenschaftsnamen getrennt. Bitte nicht verwechseln!

Dein Beispiel sollte also ungefähr so aussehen:

<a href="ziel-url"><img src="bild-url" alt="alternativtext"></a>

dann verschwindet mein mouseovereffekt!

Der war ja auch noch nie da, oder verstehe ich da was falsch?

Muss ich die Verlinkung schon im CSS-skript machen?

Nein, die Verlinkung nicht, nur die Verzierung. ;-)
Also mal langsam. Du willst einen Link, der im Ruhezustand z.B. bild1 anzeigt, und beim draufzeigen (hover) bild2. Richtig? Dann würde ich das ungefähr so machen:

<a href="ziel-url"><img src="bild1" alt="ersatztext" class="normal"><img src="bild2" alt="ersatztext" class="hover"></a>

Dazu im CSS:

~~~css a img.normal
  { display: inline; }
 a img.hover
  { display: none; }
 a:hover img.normal
  { display: none; }
 a:hover img.hover
  { display: inline; }

  
Das ist jetzt natürlich nur eine von vielen Möglichkeiten. Eine andere wäre, den Link selbst als Blockelement zu formatieren und die Bilder nur als Hintergrundbilder im CSS anzugeben - eins für den Normalzustand, und eins für :hover. Das hat aber den Schönheitsfehler, dass der Link dann keinen Inhalt mehr hat. Die beste Methode in meinen Augen wäre ein Textlink, der nur die verschiedenen Bilder als Hintergrundbild bekommt. Das lässt sich dann auch wieder sehr sinnvoll und elegant mit CSS gestalten.  
  

> ich möchte kein java.script verwenden!  
  
Ich auch nicht. ;-)  
Übrigens wird Javascript normalerweise zusammengeschrieben.  
  
So long,  
 Martin  

-- 
Alkohl ist ungesund,  
Rauchen ist schädlich,  
Sex ist unanständig  
- und die Erde ist eine flache Scheibe.