CSS Rollover Grafiken @ tutorials.de: Tutorials, Forum & Hilfe

draekster · 04.10.07 13:44

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)

Maik · 04.10.07 13:48

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 :

1
2
3

<a href="#" id="home">...</a>
<a href="#" id="news">...</a>
<!-- usw. -->

HuRaHoRRe · 04.10.07 13:52

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-Code:

<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...

draekster · 04.10.07 14:38

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">

</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............

HuRaHoRRe · 04.10.07 14:44

Probiers mal so:

HTML-Code:

<!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>

Maik · 04.10.07 14:45

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;
[b]width:100px;[/b] /* entspricht der Grafikbreite */
[b]height:25px;[/b] /* 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); 
}

draekster · 04.10.07 14:49

Nö
geht leider auch nich

zeigt immernoch das selbe wie vorher

edit:
ups Maik ha bich zu spät gesehn
ich probiers mal

HuRaHoRRe · 04.10.07 14:51

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

Maik · 04.10.07 14:56

@HuRaHoRRe: Bitte beachte den Punkt 15 der Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.

draekster · 04.10.07 15:00

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">

</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)

HuRaHoRRe · 04.10.07 15:03

Die Links sind ja nicht mehr drin.(oder ist das jetzt das Rausgelöschte?)

Weis zwar nicht ob es was bringt aber lösche mal die zwischen den Style tags.

Maik · 04.10.07 15:04

Stimmt denn auch der Pfad zu den Grafiken?

Außerdem haben sich da zwei geschweifte Klammern reingemogelt:

Code :

a#home { background:url(home.png); }
a#home:hover { [color=red]{[/color] background:url(homemo.png); }
a#news { background:url(news.png); }
a#news:hover { [color=red]{[/color]  background:url(newsmo.png); }

Ansonsten kann ich da keinen Fehler im Stylesheet entdecken.

draekster · 04.10.07 15:08

die Pfade müssten stimmen, da ich ja alles im selben Ordner habe

HuRaHoRRe · 04.10.07 15:08

Genau die zwei Klammern...
Hätte ich eigentlich im oben geposteten Code schon entfernt...

Ich hätte da noch einen Tip für einen guten Editor

PSPad

Maik · 04.10.07 15:14

Dann stell die Seite mal online, damit man dort einen Blick drauf werfen kann, denn bei mir funktioniert dein Quellcode nach Beseitigung des genannten Fehlers einwandfrei.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

border bei rollover grafiken

PS-CS3=Rollover + Remote Rollover

ADOBE GOLive - Rollover mit *.psd Grafiken (Smart-Objects)

Rollover

rollover ? mit ps ? :D

E-Mail:

Abonnieren Abbestellen