Hallo,
in diesem Tutorial möchte ich euch zeigen wir ihr einfach einen Mousovereffekt erstellen könnt!
So sieht es am Ende aus!(ihr könnt die Farben ändern)
Befolge einfach folgenden Schritte:
1. Erstelle dir einen neuen Ordner auf deinem Desktop (oder wo du
willst) und nenne ihn so, wie das Projekt heißen soll. Bei mir ist das
der Fall Tutorial".
2.(überspringen, wenn Buttons schon vorhanden sind und bei 3.
weitermachen) Nun ist es an der Zeit, dass ihr eure eigenen Buttons
erstellt. Ich habe dazu ein paar Bilder gemacht:
2.1 Öffne Photoshop oder ein Bildbearbeitungsprogramm
deiner Wahl. Erstelle ein neues Projekt mir ->Datei->Neu. Gebt
z.B. die Maße 960px x 52 px ein. Nun hast einen langen Balken, den du
beliebig designen kannst. Meiner sieht so aus: (Ich habes es kleiner
gemacht und werde es via css-Befehl über die Komplette Seite strecken.
Ihr könnt sie nutzen, wenn ihr wollt.
2.2 Erstelle nun ein neues Projekt mit den Maßen (ihr
könnt sie beliebig änder) 160px x 52 px. Nun erstellt einen Button, wie
er aussehen soll, wenn die Maus nicht über dem Button ist und einen
Button, wenn die Maus über dem Button ist. Meine sehen so aus:
Normaler Button:
Mouseover Button:
Wenn ihr wollt, könnt ihr sie nutzen. Anschließen erstellt wieder ein neues Projekt und zwar nun mit den Maßen 160px x 104. Nun fügt die beiden Buttons einfach untereinander ein. Der Nicht-Mousover Button oben und der andere unten.
So sieht es bei mir aus:
Speichert diese in eurem erstelltem Ordner als buttons.png
_________________________________________________
3. Nun zum HTML Code
Erstellt euch ein neues Textdokument in dem Ordner öffnet es und speichert es unter index.html !WICHTIG! Beim Speichern auf "Alle Dateien" stellen !WICHTIG!
Dann erstellt ein weiteres Dokument auf die gleich Weis und nennt es
"style.css". Nun öffnet eure index.html Datei und schreibt folgendes:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="navigation_bg">
<div id="navigation">
<a href="index.html"><div class="navigation_button"><p>SEITE 1</p></div></a>
<a href="index.html"><div class="navigation_button"><p>SEITE 2</p></div></a>
<a href="index.html"><div class="navigation_button"><p>SEITE 3</p></div></a>
<a href="index.html"><div class="navigation_button"><p>SEITE 4</p></div></a>
<a href="index.html"><div class="navigation_button"><p>SEITE 5</p></div></a>
<a href="index.html"><div class="navigation_button"><p>SEITE 6</p></div></a>
</div>
</div>
</body>
</html>Bearbeitet nun die style.css
HTML Code:
body
{
background-color: #0090ff;
margin: 0px auto;
min-width:960px;
}
#navigation_bg
{
width: 100%;
height: 52px;
background-image: url(navigation_bg.png);
background-repeat: repeat-x;
}
#navigation
{
width: 960px;
margin: 0px auto;
text-align: center;
}
#navigation a
{
text-decoration:none:
}
.navigation_button
{
float: left;
width: 160px;
height: 52px;
background-image: url(buttons.gif);
background-position: 0px 0px;
cursor: pointer;
}
.navigation_button p
{
font-size: 16px;
font-family: Arial;
color: white;
margin: 0px;
margin-top: 14px;
}
.navigation_button:hover
{
background-position: 0px -52px;
}Ich hoffe, dass euch das Tutorial ein wenig weitergeholfen hat. Falls es das getan hat, wäre ein Thx nett 
Hier nochmal der komplette Ordner:
Tutorial-Dateien.rar
VT
MfG,
Mekaro
