roll over button

[Worljumper]

hallo
ich würde gerne wissen wie man roll over buttons erstellt.
ich arbeite gerade an einer page, wo ich roll over buttons benötige
bitte antwortet schnell

worldjumper

 

[_Thor_]

Was verstehst du denn unter roll over buttons?

 

[Worljumper]

ich meine mit roll over button, dass wenn du mit der maus über eine button fährst sich sein aussehen ändert

 

[RiotDIon]

nen roll over button ist nen button der sich verändert wenn man mit der maustaste hindrübergeht

beispiel ? kuck hier mal : gPotato.eu: das Free to Play MMORPG Portal auf Deutsch | Kostenlose online PC Spiele.

ganz ober kommt was orangenes;ugl

 

[dasch]

denn versuch es mal mit css und hover ;)

 

[_Thor_]

In der simpelsten Form

<a href="">...</a>

a {border-bottom: 1px dotted #000;}
a:hover {border-bottom: 1px double #f00;}

 

[Worljumper]

ich bin noch nicht so erfahren
ich habe es so gemacht

<a href="a {border-bottom: 1px dotted #000;}
a:hover {border-bottom: 1px double #f00;}">
<img src="wolke_home.gif"></tr>

da
passier nichts
außerdem wollte ich auch eher, dass beim drübergehen dein anderees bild angezeigt wir

 

[fiedel]

Die Styles extrahiert man dazu auch in eine externe css-Datei, da sonst der hover-Effekt nur schlecht möglich wäre und es nebenbei die eleganteste Variante ist. Dein Code ist übrigens vollkommen falsch! Du hast weder das Prinzip von HTML, noch von CSS verstanden, daher empfehle ich dir, lern das Zeugs, sonst wirst du nicht weit kommen!

style.css

a.effekt {
border-bottom: 1px dotted #f00;
}
a.effekt:hover {
border-bottom: 1px double #f00;
}

datei.html

<a href="#" class="effekt">Home</a>

Wie man Stylesheets einbindet, kannst du hoffentlich googlen.

 

[Toastbrot]

außerdem wollte ich auch eher, dass beim drübergehen dein anderees bild angezeigt wir

Nun, dann so:

datei.html:

<a href="[COLOR=Blue]#[/COLOR]"></a>

style.css:

a:link { 
background-image: url([COLOR=Blue]bild1.jpg[/COLOR]);
height: [COLOR=Blue]Bildhöhe[/COLOR];
width: [COLOR=Blue]Bildbreite[/COLOR];
}
a:hover {
background-image: url([COLOR=Blue]bild2.jpg[/COLOR]);
height: [COLOR=Blue]Bildhöhe[/COLOR];
width: [COLOR=Blue]Bildbreite[/COLOR];

Das blaue ist das, was du verändern musst. Stylesheet einbinden und fertig.

 

[fiedel]

außerdem wollte ich auch eher, dass beim drübergehen dein anderees bild angezeigt wir

Achso, das habe ich leider übersehen, danke Toastbrot! ;-)

Ich würde jedoch noch eine kleine Änderung vornehmen, da ein Link ohne Inhalt für Vorlese-Browser oder Suchmaschinen wertlos ist.

datei.html:

<a href="#">Alternativtext</a>

style.css:

a:link { 
background-image: url([COLOR=Blue]bild1.jpg[/COLOR]);
height: [COLOR=Blue]Bildhöhe[/COLOR];
width: [COLOR=Blue]Bildbreite[/COLOR];
text-intent: -100em;
}
a:hover {
background-image: url([COLOR=Blue]bild2.jpg[/COLOR]);
height: [COLOR=Blue]Bildhöhe[/COLOR];
width: [COLOR=Blue]Bildbreite[/COLOR];
text-intent: -100em;

 

[Worljumper]

danke für die hilfe
ich habe es jetzt aber doch anders gelöst

 

[Efchen]

Nämlich ?