mouseover mit CSS ?

Mozilla

weis jemand wie man mouseover mit CSS erstellt ?

die entsprechenden button parameter habe ich schon in der css aber funktionirt der mouseover effect [Blockierte Grafik: https://www.winpower.de/images/smilies/emojione/2639.png]

.button {
width:120;
HEIGHT:20;
background-color: gold;
color: black;
border: 2px solid #daa520;
border-left-color: #ffff00; border-top-color: #ffff00;
}
.buttonred
{
width:120;
HEIGHT:20;
background-color: gold;
color: red;
border: 2px solid #daa520;
border-left-color: #ffff00; border-top-color: #ffff00;
}

andreaskf

Re: mouseover mit CSS ?

Hallo Mozilla.

Eine Button Definition ist im eigentlichen Sinne nur für Formulare gedacht. Was Du ändern bzw. Einstellen mußt sind die Angaben für die Links. Das könnte in etwa so aussehen:

a.menu:link { color:#000000; background-color:gold; }
a.menu:visited { color:#000000; background-color:gold; }
a.menu:hover { color:#ff0000; background-color:gold; }
a.menu:active { color:#ff0000; background-color:gold; }

</style>

Mit a.menue (Menue kann auch andere Bezeichnung haben) definierst Du das aussehen und die Größe des "Button" (ist eigentlich keiner, sieht aber nachher so aus) Im Beispiel habe ich Deine Angbaben übernommen

Nun definierst Du die einzelnen Funktionen, wobei die einzelnen a.menue.... (Achtung ! Der Begriff muß angepasst werden, wenn Du ihn zuvor geändert hast) folgende Sinn haben:

...link = Das ist ein Link (Button)
...visited = aussehen, wenn der Link bereits besucht war/wurde
...hover = Mouseover
...active = aktiver Link

Das wäre nun die Funktion die das aussehen und so Steuert. Unterzubringen entweder im <head>Bereich mit den Tags <style> und </style> oder im CSS Stylesheet Script ohne die <style></style>Tags

Die einzelnen Links werden nun wie folgt geschrieben:

<a class="menue" href="......Zieladresse...." ...usw.> Linkname </a>

Wichtig ist auch hier das der Begriff menue Deiner Einstellung entspricht.

So kannst Du nun sogar die verschiedensten "Buttons" erstellen, und unter den verschiedenen Namen im Link per class="...." aufrufen.

Versuch es mal, und wenn Du Hilfe brauchst, meld Dich wieder.

miG

Mozilla

Re: mouseover mit CSS ?

soweit erstmal DANKE,hat bestens funktioniert!

allerdings werde ich das im gästebuch nicht anwenden können da ich dort nur eingeschränkte änderungen machen kann,die befehle selbst kann ich dort nicht ändern,gibt es noch eine andere möglichkeit diesen mouseover effekt hinzubekommen?

also das gästebuch arbeitet mit dem befehl:

...<INPUT type='submit' class='button' VALUE='Eintrag posten'>...

wobei ich die variablen "BUTTON" und "INPUT" per CSS ändern kann und im HEAD bereich der seite kann ich noch HTML einbauen sowie über und unter den einträgen.

Für mehr flexibilität können auch die Textfelder- und Buttonfarben geändert werden. Dazu wurden Klassen angelegt:

Textfelder haben die Klasse (class) input
Buttons haben die Klasse (class) button

In das Textfeld tragen Sie bitte die Adresse zu einer externen .css-Datei ein.

und beim chat habe ich das selbe problem

...<input type="submit" value="Start" method="post">...

[Editiert am 9/6/2005 von Mozilla]

andreaskf

Re: mouseover mit CSS ?

Hallo Mozilla.

Rein mit CSS ist dieses nicht möglich. Denn CSS kann lediglich das Aussehen verschiedener HTML Elemente steuern, aber keine Funktionen ausführen.
Wenn Du nun z.B. JavaScript hinzufügen willst, dann ist es möglich. Das ganze könnte dann in etwa so aussehen:
Scriptbeispiel als TXT
Habe ich mal mit Deinen Angaben erstellt. Wenn Du das ganze nach dem upload auf Deinen Rechner umbenennst (Dateiendung txt in html), dann kannst Du es gleich testen, da es eine lauffähige Seite ist.

Du kannst nun für Dein Script in den Headbereich das Java kopieren und das style, welches DU ja selbst erstellt hast.
Anschließend must Du bei Deinem Button die <input>Zeile aus meinem Beispiel übernehmen. Bitte verändere nur den Wert value="..." in einen beliebigen Text, der auf dem Button stehen soll.

Noch Fragen ? Dann wieder melden.

miG

[editiert] Solltest Du Probleme mit dem Einfügen haben, benötige ich eine Kopie der entsprechenden Seite per Email und kann Dir dann dabei helfen.

Mozilla

Re: mouseover mit CSS ?

besten dank!

habe jetzt 99% meiner seite mit der java variante ausgestattet(gefiel mir besser als die erste [Blockierte Grafik: https://www.winpower.de/images/smilies/emojione/1f609.png] )jedoch beim gästebuch kann ich das noch immer nicht anwenden,da ich auf die seite ja nur begrenzt einfluß habe(die seite ist extern und ein kostenloser anbieter),besteht die möglichkeit evtl. dort in den head bereich ein java prg zu laden die alle auf der seite vorkommenden button/submit automatisch mit der mouseover funktion ausstattet(es ist ja nur der eine da)?

auf den dortigen befehl ...<INPUT type='submit' class='button' VALUE='Eintrag posten'>... habe ich keinen weiteren (außer besagten CSS) einfluß,ich kann ihn nicht umschreiben!

andreaskf

Re: mouseover mit CSS ?

Hallo.

"Wo ein Wille, da auch ein Weg", so sag ich immer. Doch dafür bräuchte mehr Informationen zum GB. Wer ist denn der Anbieter, oder wo kann ich in die Bestimmungen und Möglichkeiten einsehen ?
Auch möglich wäre eine Kopie vom Quelltext.
Ohne die Info`s kann ich nur vermutungen anstellen, womit Dir allerdings weniger geholfen ist.
(Kannst auch per Mail senden, wenn gewünscht)

miG

Mozilla

Re: mouseover mit CSS ?

hab dir eine mail geschickt....

[Editiert am 10/6/2005 von Mozilla]

Mozilla

Re: mouseover mit CSS ?

auch wenns nicht geklapt hat ,trotzdem danke! [Blockierte Grafik: https://www.winpower.de/images/smilies/emojione/1f44d.png]

ok,die sache haben wir per mail geklärt ,kann also geschlossen werden [Blockierte Grafik: https://www.winpower.de/images/smilies/emojione/1f609.png]

mouseover mit CSS ?

WindowsPower.de Artikel

Jetzt mitmachen!