Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Simpler Mouseover-Effekt für Buttons



Ranking: +2   Kommentare: 2   |   Bewertung: Keine Berechtigung!  

Tach zusammen...!



Ich möchte euch (den CSS-Anfängern) zeigen, wie man in eine Navigation ganz einfach Buttons einbaut, die sich beim Mouseover verändern.

1.)
Zuerst erstellt man sich z.B. in Photoshop zwei Buttons oder man besorgt sie sich von einer beliebigen Grafik-Seite..
Es sind zwei Buttons notwendig, da beim Mouseover ja ein "anderer" bzw. der normale Button mit einem ebstimmten Effekt erscheinen soll.

Ich verwende in dem Fall einen von mir erstellen Button:

Hier der normale Ausgangsbutton:


...Und jetzt der mit dem Effekt:



Also wird dieser Button beim Mouseover einfach "heller".
(Hier gibt es genügend Tutorials zum Thema Buttons)

2.)
Jetzt erstellen wir eine Html-Seite mit folgendem Quelltext:

Code:




<html>

<head>

<title>Mouserover Tutorial</title>

<style type="text/css">

body {

    font-family:arial;

    }



#navbuttons a{

    display:block;

    background-image:url(tut.jpg);

    width:128px;

    height:19px;

    text-align:center;

    font-size:12px;

    color:#eafeb0;

    text-decoration:none;

    padding-top:4px;

    }

#navbuttons a:hover{

    background-image:url(tut_over.jpg);

    color:#38421b;

    }

</style>

</head>

<body>



<div id="navbuttons">

    <b>Navigation</b>

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

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

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

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

</div>

</body>

</html>



Das Wichtig ist hierbai eigentlich nur folgender Teil:

Code:


#navbuttons a{

    display:block;

    background-image:url(tut.jpg);

    width:128px;

    height:19px;

    text-align:center;

    font-size:12px;

    color:#eafeb0;

    text-decoration:none;

    padding-top:4px;

    }

#navbuttons a:hover{

    background-image:url(tut_over.jpg);

    color:#38421b;

    }



Hier werden die Eigenschaften des Buttons festgelegt. a bestimmt den "normalen" Zustand des Links/Buttons und a:hover den Effekt beim Mouseover, also in dem Fall ein Bilderwechsel!
Ganz wichtig bei dem #navbuttons a ist das display:block, da das Bild sonst nur in der Größe bzw. Breite angezeigt wird, wie der Link selbst breit ist! ALso darauf besonders achten...

3.)
Nachdem der Style festelegt wurde muss natürlich die Navigation auch in Html eingebettet werden:

Code:




<div id="navbuttons">

    <b>Navigation</b>

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

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

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

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

</div>



Ich denke das ist aber wiederum selbsterklärend, oder?

Hier Gibts das Ergebnis zu sehen: http://mario-schulte.de/tuts/css_button_mouseover/tut.html

Das Tutorial soll nur das Prinzip zeigen und jeder kann es an seine eigenen Wünsche anpassen!
Meine hier benutzten Buttons dürfen übrigens verwendet werden!

MfG

Veröffentlicht von: masigno1
Veröffentlicht am: 24 Jan. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Buttons CSS effekt HTML mouseover rollover


Themenverwandte Tutorials


Kommentar(e) (2)


YellowCheeseMachine sagt:

Sehr gutes Tutorial, vorallem würd ich es noch heute eher bevorzugen, als die JS variante, da nicht alle user mit JS surfen bzw aus sicherheitsgründen abstellen.

8 Jul. 2010 20:32:51 • Antworten


J U R A sagt:

kuhl :)


gruß bunt.+

10 Mar. 2009 19:53:38 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder