nicht angemeldet
Mouseover-Buttons und -Effekte mit CSS
0 0 
Gunnar Bittersmann
0 0 0 0
0 0 0 
Struppi
0
Mouseover-Buttons und -Effekte mit CSS
MudGuardHallo also ich bin erstmal nach dem vorgegangen was es hier bei selfhtml zu finden gab. In meiner css steht...
.ahome {
display:block;
background-image:url(images/home_inactive.gif);
width:58px; height:25px }
.ahome:hover {
background-image:url(images/home_active.gif);
}
.ateam {
display:block;
background-image:url(images/team_inactive.gif);
width:58px; height:25px
margin-top:-14px; }
.ateam:hover {
background-image:url(images/team_active.gif);
}
.aschedule {
display:block;
background-image:url(images/schedule_inactive.gif);
width:71px; height:25px }
.aschedule:hover {
background-image:url(images/schedule_active.gif);
}
in der html datei steht
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><ahome href="LINK HIER"> </a></p>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><ateam href="LINK HIER"> </a></p>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><aschedule href="LINK HIER"> </a></p>
die Buttons werden jedoch nicht angezeigt... Jetzt steht dort bei selfhtml außerdem:
Wenn verschiedene Rollovereffekte für verschiedene Buttons gewünscht sind, etwa in einer Menüleiste, dann kann man anstatt a:hover auch #button1:hover oder ähnliches schreiben, um zwischen den Buttons mit Hilfe des id-Attributs zu unterscheiden.
Daher meine Frage... wie muss man Befehl bei HTML aussehen, wenn ich diese 3 mousover Effekte einbauen will...
Hoffe ihr könnt mir helfen! Danke schon einmal im vorraus
-
hi,
in der html datei steht
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><ahome href="LINK HIER"> </a></p>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><ateam href="LINK HIER"> </a></p>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><aschedule href="LINK HIER"> </a></p>Was soll das sein?
Meta-Tags gehören in den Head, Textabsätze in den Body.
Wenn das also wirklich _so_ irgendwo drinsteht, ist es großer Unfug - den du dann bitte zuerst ausbesserst.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Was soll das sein?
Meta-Tags gehören in den Head, Textabsätze in den Body.
Wenn das also wirklich _so_ irgendwo drinsteht, ist es großer Unfug - den du dann bitte zuerst ausbesserst.gruß,
wahsagais geändert...Meta-Tag ist in den Head Bereich verschoben... ändert aber nichts an der tatsache, das die Buttons nicht angezeigt werden...
-
-
Hello out there!
in der html datei steht
... noch größerer Unfug als es wahsaga wahr haben will. ;-)
<p><ahome href="LINK HIER"> </a></p>
Es gibt in HTML kein 'ahome'-Element, 'ateam ' und 'aschedule' auch nicht.
Und ein Leerzeichen als Linktext ist auch reichlich sinnfrei.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
<p><ahome href="LINK HIER"> </a></p>
das mit ahome href funktioniert einwandfrei, jedoch nur wenn ich den teil der css datei mit style auch in die index.html packe anstatt in die main.css ... und das mit dem Leerzeichen nicht funktioniert weiß ich, der link kommt da auch erst später rein...
-
Hello out there!
<p><ahome href="LINK HIER"> </a></p>
▲1 ▲2
das mit ahome href funktioniert einwandfrei,
Das tut es ganz gewiss nicht.
und das mit dem Leerzeichen nicht funktioniert weiß ich, der link kommt da auch erst später rein...
Ich meinte auch nicht das Leerzeichen ▲1, sondern das ▲2.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
Hi!
Und ein Leerzeichen als Linktext ist auch reichlich sinnfrei.
Nein! Denke ich nicht. Schließlich hat er ja Buttons als Hintergrundbilder und braucht deswegen keinen Text.
Allerdings sollte er die richtige Größe mit width und height angeben, damit die Hintergrundgrafiken auch angezeigt werden.
szia, Lukas-
Hallo Lukas,
und was wenn mein Browser gar keine Bilder anzeigen kann?
gruss
OhneName-
Hi!
und was wenn mein Browser gar keine Bilder anzeigen kann?
Pech gehabt;-) Wie ist es mit dem guten alten alt="" Attribut? Ist das keine Alternative?
szia, Lukas-
hi,
Wie ist es mit dem guten alten alt="" Attribut? Ist das keine Alternative?
Für Bilder - ja.
Aber nicht für Links.Evtl. title - mit allen, auch der sichtbaren, Auswirkungen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Achja, stimmt. Habe irgendwie gedacht, dass bei Backgroundimages auch ein alt-Text erscheint. Mein Fehler :-)
szia, Lukas-
Hi,
Achja, stimmt. Habe irgendwie gedacht, dass bei Backgroundimages auch ein alt-Text erscheint.
Hintergrundgrafiken sind Verzierung, kein Inhalt. Ihr Fehlen ist per definitionem unerheblich. Deswegen wäre ein Alternativtext auch sinnfrei.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi!
Hintergrundgrafiken sind Verzierung, kein Inhalt. Ihr Fehlen ist per definitionem unerheblich. Deswegen wäre ein Alternativtext auch sinnfrei.
Vielen Dank für diese Belehrung. Das wusste ich zwar vorher auch schon, aber doppelt hält besser ;-)
szia, Lukas
-
-
-
-
-
Hallo Lukas,
und was wenn mein Browser gar keine Bilder anzeigen kann?
Das ist dann persönliches Pech. Wenn er so nen Rollover haben will, dann kann er das doch so machen.
Gruß Ben
-
Hello out there!
und was wenn mein Browser gar keine Bilder anzeigen kann?
Das ist dann persönliches Pech....des Betreibers der Webseite.
Übrigens denke ich, dass sich Suchmaschinen für Linktitel interessieren. Aber vermutlich sollen die Defizite mit Keywords ausgeglichen werden. >;->
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi!
Übrigens denke ich, dass sich Suchmaschinen für Linktitel interessieren. Aber vermutlich sollen die Defizite mit Keywords ausgeglichen werden. >;->
Am besten mit SEO Tags ;-)
szia, Lukas -
Hello out there!
und was wenn mein Browser gar keine Bilder anzeigen kann?
Das ist dann persönliches Pech....des Betreibers der Webseite.
Übrigens denke ich, dass sich Suchmaschinen für Linktitel interessieren. Aber vermutlich sollen die Defizite mit Keywords ausgeglichen werden. >;->
Natürlich tun sie das, aber davon hast du in deiner ausführlichen Antwort ja nichts geschrieben.
Es ist nur Pech des Betreibers Antworten zu bekommen, mit denen er nicht viel anfangen kann.
Gruß Ben
-
-
Hi,
und was wenn mein Browser gar keine Bilder anzeigen kann?
Das ist dann persönliches Pech.okay, dann hat Google bei Dir halt Pech, wenn Du das so willst. Deine persönliche Entscheidung ist aber kein Grund, jemand anders nicht auf einen *faktisch* vorhandenen *erheblichen* Mangel aufmerksam zu machen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
und was wenn mein Browser gar keine Bilder anzeigen kann?
Das ist dann persönliches Pech.okay, dann hat Google bei Dir halt Pech, wenn Du das so willst. Deine persönliche Entscheidung ist aber kein Grund, jemand anders nicht auf einen *faktisch* vorhandenen *erheblichen* Mangel aufmerksam zu machen.
Man kann jemandem mit
Und ein Leerzeichen als Linktext ist auch reichlich sinnfrei.
auf etwas aufmerksam machen und ihm dabei absolut keine Hilfe sein - ich würde fast sogar sagen, die Antwort ist ein wenig pampig -, oder man kann sowas freundlich machen und sich bei der Antwort ein bisschen Mühe geben. Irgendwie gefällt mir dabei die 2. Variante wesentlich besser, aber wie du ja schon gesagt hast, ist das meine persönliche Entscheidung. Aber ich weiss schon, es ist lustiger Leute mit kaum Informationen im Web stöbern zu lassen, bis sie vielleicht mal was finden, als ihnen gleich eine gescheite Antwort zu geben, insbesondere wenn man sie schon weiss.
Gruß Ben
-
-
-
Hallo Lukas,
und was wenn mein Browser gar keine Bilder anzeigen kann?
Dann gäbe es noch eine andere Methode.
Vermutlich kann man das auch besser erklären, aber vielleicht hilft das trotzdem weiter.mit freundlichen Grüßen
Ulrich
-
-
-
Es gibt in HTML kein 'ahome'-Element, 'ateam ' und 'aschedule' auch nicht.
Gunnar hat das Problem beschrieben und dir die Lösung direkt mitgenannt.
Verwende statt
<aXXXX href="LINK HIER"> </a>
besser
<a id="buttonX" href="***Platzhalter***"></a>
und beziehe dich in der CSS-Datei auf die jeweiligen Ids buttonX.Gruß, Volker
-
<p><ahome href="LINK HIER"> </a></p>
Es gibt in HTML kein 'ahome'-Element, 'ateam ' und 'aschedule' auch nicht.
Richtig! Und erst recht keines, welches mit <ahome> beginnt und mit </a> endet...
Pépe, wahrscheinlich meinst du eher <a class="home">...</a> (HTML) und a.home {...} (CSS).
--
Once is a mistake, twice is jazz.
-
-
Hallo also ich bin erstmal nach dem vorgegangen was es hier bei selfhtml zu finden gab. In meiner css steht...
.ahome {
display:block;
background-image:url(images/home_inactive.gif);
width:58px; height:25px }.ahome:hover {
background-image:url(images/home_active.gif);
}.ateam {
display:block;
background-image:url(images/team_inactive.gif);
width:58px; height:25px
margin-top:-14px; }.ateam:hover {
background-image:url(images/team_active.gif);
}.aschedule {
display:block;
background-image:url(images/schedule_inactive.gif);
width:71px; height:25px }.aschedule:hover {
background-image:url(images/schedule_active.gif);
}in der html datei steht
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><ahome href="LINK HIER"> </a></p>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><ateam href="LINK HIER"> </a></p>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<p><aschedule href="LINK HIER"> </a></p>Um, also deinen CSS Angaben nach, sollte deine Html-Datei in etwa so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; harset=UTF-8">
<style type="text/css">
.ahome {
display:block;
background-image:url(images/home_inactive.gif);
width:58px; height:25px }.ahome:hover {
background-image:url(images/home_active.gif);
}.ateam {
display:block;
background-image:url(images/team_inactive.gif);
width:58px; height:25px
margin-top:-14px; }.ateam:hover {
background-image:url(images/team_active.gif);
}.aschedule {
display:block;
background-image:url(images/schedule_inactive.gif);
width:71px; height:25px }.aschedule:hover {
background-image:url(images/schedule_active.gif);
}</style>
</head>
<body>
<a class="ahome" href="http://de.selfhtml.org/"> </a>
<a class="ahome" href="http://de.selfhtml.org/"> </a>
<a class="ahome" href="http://de.selfhtml.org/"> </a>
</body>
</html>Dat ist aber nur so nen grober Umriss, du solltest dich mal genauer mit dem Aufbau einer Html-Datei auseinandersetzen. Selfhtml bietet dir dafür alles, was du brauchst.
Gruß Ben
-
Um, also deinen CSS Angaben nach, sollte deine Html-Datei in etwa so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; harset=UTF-8">
<style type="text/css">
.ahome {
display:block;
background-image:url(images/home_inactive.gif);
width:58px; height:25px }.ahome:hover {
background-image:url(images/home_active.gif);
}.ateam {
display:block;
background-image:url(images/team_inactive.gif);
width:58px; height:25px
margin-top:-14px; }.ateam:hover {
background-image:url(images/team_active.gif);
}.aschedule {
display:block;
background-image:url(images/schedule_inactive.gif);
width:71px; height:25px }.aschedule:hover {
background-image:url(images/schedule_active.gif);
}</style>
</head>
<body>
<a class="ahome" href="http://de.selfhtml.org/"> </a>
<a class="ahome" href="http://de.selfhtml.org/"> </a>
<a class="ahome" href="http://de.selfhtml.org/"> </a>
</body>
</html>Dat ist aber nur so nen grober Umriss, du solltest dich mal genauer mit dem Aufbau einer Html-Datei auseinandersetzen. Selfhtml bietet dir dafür alles, was du brauchst.
Gruß Ben
Hallo
das klappt schon fast :D nur würde ich halt gerne den teil mit <style>...</style> extra in einer css datei haben worauf ich dann mittels...<a class="ahome" href="http://de.selfhtml.org/"> </a> z.b. zugreife. Jedoch funktioniert das nicht er zeigt die buttons nicht an. Wenn ich das so kopiere wie du es hier gepostet hast, zeigt er den Button Home zwar an aber ich kann ihn mit margin-top oder margin-left nicht mehr verschieben...PS: Tut mir leid das ich mich hier so doof anstelle, aber ich bin noch dabei mich mit allem vertraut zu machen :(
-
Also Du speicherst alles was bi <style> </style> steht in einer seperaten Text-Datei nennst sie 'irgendwie.css'.
Dann schreibst Du im head deiner HTML-Datei:
<link rel="stylesheet" type="text/css" href="irgendwie.css">
http://de.selfhtml.org/css/formate/einbinden.htm#separat
(Wenn die CSS-datei im selben Verzeichnis liegt wie die HTML Datei)
-
-
-
Also Du hast zwei gute Möglichkeiten:
Elemente die mehrfach vorkommen: class=""
Element das nur einmal vorkommt: id="".ahome {
display:block;
background-image:url(images/home_inactive.gif);
width:58px; height:25px }.ahome:hover {
background-image:url(images/home_active.gif); }Hier sagst Du alles was class="ahome" 'heißt' schaut so aus. Egal was es für ein Element ist.
Du könntest aber auch gemeint haben: Jeder Link (<a ...></a>) der class="home" 'heißt' soll so aussehen. Das wäre dann:
a.home {
display:block;
background-image:url(images/home_inactive.gif);
width:58px; height:25px }a.home:hover {
background-image:url(images/home_active.gif); }Sowas gibst Du dann beim HTML Element mit class="" an.
a.home bedeutet es gilt nur für Links. Ohne a vor dem Punkt hast Du es nicht für ein spezielles HTML-Element definiert.
Möchtest du es per id="" nutzen (für elemente die im Dokument nur einmal so formatiert werden) sieht das ganze so aus:
a#home:hover {
background-image:url(images/home_active.gif); }oder
#home:hover {
background-image:url(images/home_active.gif); }in der html datei steht
<p><ahome href="LINK HIER"> </a></p>
<p><ateam href="LINK HIER"> </a></p>
<p><aschedule href="LINK HIER"> </a></p>Da sollte dann stehen:
<a class="home" href="URI">sinnvoller Text</a>
oder
<a id="home" href="URI">sinnvoller Text</a>
Je nachdem was Du nun verwendest id oder class.
Ich hoffe es war verständlich.
Dann noch der Hinweis: Mouseover mit CSS funktioniert beim MS IE nur für Links. Sonst könntest Du diesen Effekt auf fast jedes Element anwenden.
-
Hallo also ich bin erstmal nach dem vorgegangen was es hier bei selfhtml zu finden gab. In meiner css steht...
.ahome {
display:block;
background-image:url(images/home_inactive.gif);
width:58px; height:25px }.ahome:hover {
background-image:url(images/home_active.gif);
}einfacher wäre es, wenn du die sogenannte sliding doors Technik anwendest.
Du definierst _eine_ Grafik für jeden Button in dem jeweils beide Grafiken enthalten sind:
+-----------+
| |
|text-normal|
| |
+-----------+
| |
|text-hover |
| |
+-----------+dann einfach in deiner CSS Datei:
a:link
{
background-image: url(....);
background-position: 0 0;
}
a:hover
{
background-position:-XXpx 0;
}Wobei XX die Höhe einer Grafik ist. Das hat ausserdem den Vorteil, dass deine :hover Grafik auf jeden schon geladen ist.
Struppi.
--
Javascript ist toll (Perl auch!)-
Hi,
+-----------+
|text-normal|
+-----------+
|text-hover |
+-----------+
a:hover
{
background-position:-XXpx 0;
}
Wobei XX die Höhe einer Grafik ist. Das hat ausserdem den Vorteil, dass deine :hover Grafik auf jeden schon geladen ist.Du willst bei Hover die Grafik um die Höhe der Grafik nach links verschieben?
Der erste Wert ist die horizontale, der zweite die vertikale Position.
Und die halbe Höhe wäre als Verschiebung ausreichend ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard
Hi,
+-----------+
|text-normal|
+-----------+
|text-hover |
+-----------+
a:hover
{
background-position:-XXpx 0;
}
Wobei XX die Höhe einer Grafik ist. Das hat ausserdem den Vorteil, dass deine :hover Grafik auf jeden schon geladen ist.Du willst bei Hover die Grafik um die Höhe der Grafik nach links verschieben?
Der erste Wert ist die horizontale, der zweite die vertikale Position.
ok, ich geb's zu, verwechselt.
Und die halbe Höhe wäre als Verschiebung ausreichend ...
Das meinte ich mit "Höhe _einer_ Grafik "
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
-
Danke für die Vorschläge habe das Problem gelöst und alles läuft einwandfrei :)