Mouseovereffekt verschwindet wenn button verlinkt wird

[julee]

Hallo, ich hab da mal ne Frage:

Ich habe Buttons mit Fireworks erstellt. Mit CSS habe ich diese jetzt mit einem mouseover-effekt versehen. Wie können diese buttons jetzt angeklickt werden und zum Beispiel auf die nächste Seite führen?

Wenn ich es über
<a href:"link">
<img src:"bild">
</a>

im Html-Script mache, dann verschwindet mein mouseovereffekt! Wie kann ich das verhindern? Muss ich die Verlinkung schon im CSS-skript machen?

ich möchte kein java.script verwenden!

Wäre über eine schnelle Antwort sehr sehr dankbar!

Gruß Julee

[wucher wichtel]

Hallo!

Ich habe Buttons mit Fireworks erstellt. Mit CSS habe ich diese jetzt mit einem mouseover-effekt versehen. Wie können diese buttons jetzt angeklickt werden und zum Beispiel auf die nächste Seite führen?

Eigentlich so, wie du es auch geschrieben hast. Nur dass du ziemlich grobe Fehler gemacht hast.

Wenn ich es über
<a href:"link">
<img src:"bild">
im Html-Script mache, dann verschwindet mein mouseovereffekt!

Es ist kein Script! Ich weiß nicht, was die Doppelpunkte da in deinem Code suchen...? Attributwerte werden mit einem Gleichheitszeichen zugewiesen. Probier's mal mit

  
<a href="test.html">  
  <img src="test.png" width="60" height="20">  
</a>  

Du kannst dann den Links und Bildern noch Klassen oder IDs zuweisen und sie so über CSS ansprechen.

Wie kann ich das verhindern?

Indem du keine Fehler in den Quellcode reinsetzt. Aber dabei können wir dir nur wiklich weiterhelfen, wenn du uns diesen zeigst (Das war eine Aufforderung deinen Quellcode zu posten ;-))

Muss ich die Verlinkung schon im CSS-skript machen?

1: Es ist kein Script! 2: Nein! CSS ist für die Darstellung zuständig. Nicht für Verlinkung oder sonst irgendwas.

ich möchte kein java.script verwenden!

Das macht in diesem Fall Sinn :-)

ciao, ww

[Andy]

Hi,

da gibts ne tolle Seite wo alles drin steht!

Gruß Andy

[Der Martin]

Hallo Andy,

da gibts ne tolle Seite wo alles drin steht!

und warum sagst du das dem wichtel? Der weiß das bestimmt selbst. Antworte doch bitte auf den Beitrag, den du auch meinst, sonst verliert man doch hier den Überblick.

Ciao,
 Martin

[Der Martin]

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.