✔ CSS Rollover Grafiken

Status
Nicht offen für weitere Antworten.
D

draekster

Grünschnabel
Hallo erst mal!
Bin neu hier.

Also nun zu meinem Problem:

Ich bin ein html neuling der sich mal daran verucht hat eine eigene HP zu basteln.
Die Seite hat 3 Frames und im linken soll eine Menüleiste sein.
Da mir das so mit normalen Buttons zu langweilig war hab ich die animieren wollen.
Also immer wenn man mit der Maus drüber geht das sich der Button da ändert.
Mit Java hat das zwar 1A geklappt aber wenn ich jez die Werbung dort blocke gehen auch die Buttons nich mehr.

Jez hab ich erfahren das man das ganze auch per CSS machen kann und versuche nun seit 2 Tagen das hinzukriegen.
Bis jetzt ohne wirklichen Erfolg.

Kann mir das bitte jemand erklären wie ich das machen kann?
Mit dem Tut was es hier gibt konnte ich mich nich so wirklich anfreunden und über die SuFu hab ich auch leider nichts entsprechendes gefunden.

Vieleicht noch als anmerkung:
Das sind 6 verschiedene Buttons die vertikal angeordnet sein sollen.
Und noch das ganze soll immer mit Grafiken gemacht werden (also Maus weg> normaler button; Maus drüber> gedrückter Button)
 
Zuletzt bearbeitet:
Hi,

mein CSS-Tutorial CSS-Rollover vermittelt aber die Grundtechnik, die zum Einsatz kommt, und das in zwei Variationen.

Wenn du jedem Link seine individuelle Hintergrundgrafik zuweisen willst, musst du dies über entsprechende IDs regeln:

Code: 
a#home { background:url(home.jpg); }
a#home:hover { background:url(home_hover.jpg); }

a#news { background:url(news.jpg); }
a#news:hover { background:url(news_hover.jpg); }

/* usw. */
Code: 
<a href="#" id="home">...</a>
<a href="#" id="news">...</a>
<!-- usw. -->
 
also du kansts das ganze für alle links oder für einzelne links definieren:

Heir mal wie man es auf auf bestimmte Links anwendet:

HTML: 
<a href="#" id="effekt"></a>

Im CSS(kommt in den Head) sieht das so aus:

Code: 
a#effekt{
/*Definitionen für Link bei normalzustand*/
}
a:hover#effekt{
/*definitionen bei überfahren mit der maus*/
}

Wenn du es für alle links machen wilst lässt du weinfach die id weg und schreibst :
Code: 
a{
/*Definitionen für Link bei normalzustand*/
}
a:hover{
/*definitionen bei überfahren mit der maus*/
}

edit : zuu spät...
 
OK
Danke schonmal für die schnellen antworten.
Ich habs zwar versucht aber auch mit deinem Tut hab ich es nur geschaft das da steht

"link1
link2
link3"

Und mit den individuelen Button hab ich noch über haupt nichts hin gekriegt.
Hier is ma mei Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type"><title>menuetest</title>
<style type="text/css">
<!--
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
text-align: center;
display: block;
a#home { background:url(home.png); }
a#home:hover { { background:url(homemo.png); }
a#news { background:url(news.png); }
a#news:hover { { background:url(newsmo.png); }
-->
</style></head><body><h1>menuetest</h1>
<a href="home.thml" id="home"></a>
<a href="news.html" id="news"></a>
<br></body></html>

Sorry wenn ich mich doof an stell............
 
Probiers mal so:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>menuetest</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
text-align: center;
display: block;
}
a#home {
background:url(home.png); 
padding:10px;
}
a:hover#home { 
background:url(homemo.png); 
}
a#news {
padding:10px;
background:url(news.png); 
}
a:hover#news {
background:url(newsmo.png); 
}
</style>
</head>
<body>
<h1>menuetest</h1>
<a href="home.html" id="home">home</a>
<a href="news.html" id="news">news</a>
<br>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst für die Links auch eine Breite und Höhe bestimmen, die der Dimension des Hintergrundbildes entspricht:

Code: 
a {
text-decoration: none;
text-align: center;
display: block;
width:100px; /* entspricht der Grafikbreite */
height:25px; /* entspricht der Grafikhöhe */
}

@HuRaHoRRe: die ID wird vor der Pseudoklasse notiert:

Code: 
a#home {
background:url(home.png); 
}
a#home:hover { 
background:url(homemo.png); 
}
a#news {
background:url(news.png); 
}
a##news:hover {
background:url(newsmo.png); 
}
 
Nö
geht leider auch nich

zeigt immernoch das selbe wie vorher

edit:
ups Maik ha bich zu spät gesehn
ich probiers mal
 
Zuletzt bearbeitet:
mhh was heisst das selbe?

Ich habs vorher nochmal editiert probiers nochmal....

Bei mir funktioniert es einwandfrei :/ musst halt die grösse der Links noch definieren usw...
Denn wenn kein Text zwischen <a></a> steht oder keine Grössen angegeben sind kann das Bild auch nirgends angezeigt werden.

edit: Es ist extrem wie schnell hier gepostet wird.. wenn man gleich beim drücken des Speichern Buttons bemerkt das man ein Fehler im Code hat, hat man nicht einmal mehr die Zeit ihn zu korrigieren...^^
Ist echt ein Pluspunkt für dieses Forum :)
 
Zuletzt bearbeitet:
@HuRaHoRRe: Bitte beachte den Punkt 15 der Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.
 
Also ich hab die Maße jetzt drin
geht aber auch noch nich

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type"><title>menuetest</title>
<style type="text/css">
<!--
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {text-decoration: none;
text-align: center;
display: block;
width:165px;
height:35px;
}
a#home { background:url(home.png); }
a#home:hover { { background:url(homemo.png); }
a#news { background:url(news.png); }
a#news:hover { { background:url(newsmo.png); }
-->
</style></head><body><h1>menuetest</h1>
<br></body></html>

und ich hab gemerkt das die Links mit den ID's die normalerweise nach <hi>menuetest</h1>
kommen müsten immer wieder von meinem prog rausgelöscht werden wenn ich Speicher (ich hab Kompozer)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück