✔ mit hover Bilder wechseln, aber nicht einfach hintergrundbild?
- Themenstarter son gohan
- Beginndatum
- Status
redlama
Erfahrenes Mitglied
CSS Code:
Und der HTML Code:
Dabei musst Du allerdings ein Bild als Platzhalter hinterlegen, ... (in meinem Fall das blank.gif
Ach ja, das musst Du übrigens für jeden Menüpunkt extra definieren!
redlama
Code:
.navi-news
{
background-image:url(images/b_redaktion.gif);
width:130px;
height:19px;
display:block;
}
.navi-news:hover, .navi-news:active, .navi-news:focus
{
background-image:url(images/b_redaktion1.gif);
}
HTML:
<a href="news.php" class="navi-news">
<img name="home" src="images/blank.gif" border="0" width="20" height="20"></a>Ach ja, das musst Du übrigens für jeden Menüpunkt extra definieren!
redlama
Gumbo
Erfahrenes Mitglied
Die Grafik ist nicht einmal nötig. Besser wäre sogar, es durch einen alternativen Text zu erstzen:
Code:
.klasse span {
display: none;
}
.klasse:link, .klasse:visited {
display: block;
width: 20%;
height: 20%;
background: url(Bild1);
}
.klasse:hover, .klasse:active, .klasse:focus {
background-image: url(Bild2);
}
HTML:
<a href="" class="klasse"><span>Alternativtext</span></a>Gut, dass es jetzt gerade so einen Thread gibt, da will ich mich doch mal frecherweise einklinken.
Ich baue Menügrafiken auch so ein, wie Gumbo es beschrieben hat.
Der große Vorteil ist schließlich, dass es ohne JavaScript funktioniert, womit man die erste Hürde schon mal genommen hat.
Jedoch macht mir folgendes Sorgen:
Es gibt ja diverse Arten, wie User ihre Browser "manipulieren" können.
Die erste wäre, das Laden von Bildern abzustellen.
Die Zweite ist, CSS auszuschalten.
Die dritte, JavaScript zu deaktivieren ist ja bereits umgangen.
Jedoch sehe ich bei dieser Variante noch folgendes Problem, für das mir bisher keine gute Lösung eingefallen ist:
Wenn ein User das Laden von Bildern abschaltet, aber CSS anläßt, was ich für die wahrscheinlichste Kombination der oben beschriebenen "Manipulationen" halte, wird er ja überhaupt nichts von dem Menü sehen.
Wenn er CSS abstellt, gibt es kein Problem, da er ja den Alternativtext hat.
Die Alternative von redlama (mit einem definierten alt-Attribut im img-Tag
), würde dazu führen, dass er bei Nicht-Anzeige von Bildern den Alternativtext sieht, aber bei Abschalten von CSS wieder nichts.
Eine Kombination von beiden Varianten, also Bild mit alt-Attribut und wechselndem Hintergrundbild und Alternativtext im span, welcher ausgeblendet wird, würde die Kombinationen CSS an/Bilder aus und CSS aus/Bilder an abdecken und dem User das Menü präsentieren. Ist jedoch beides deaktiviert, so würde der User den Text zwei mal sehen (einmal vom alt-Attribut und einmal aus dem span), was auch nicht unbedingt gewünscht ist.
Wer diese Überlegungen für rein theoretisch hält, dem möchte ich noch sagen, dass ich häufig mit solchen Einstellungen spiele, vor allem, wenn mich auf irgendeiner Seite etwas stört. Wenn ich dann auf die nächste Seite, vielleicht eine von mir oder ähnlich schreibenden Webdesignern, gehe kommt es schonmal vor, dass ich nix oder Blödsinn sehe.
Hat jemand dazu noch weitere Ideen? Man will ja schließlich keine User ausschließen und einen doppelten Text möchte man dem User ja auch nicht unbedingt zeigen.
@feh: Was für ein Problem hast Du denn mit Deinem select-Tag?
Gruß hpvw
Ich baue Menügrafiken auch so ein, wie Gumbo es beschrieben hat.
Der große Vorteil ist schließlich, dass es ohne JavaScript funktioniert, womit man die erste Hürde schon mal genommen hat.
Jedoch macht mir folgendes Sorgen:
Es gibt ja diverse Arten, wie User ihre Browser "manipulieren" können.
Die erste wäre, das Laden von Bildern abzustellen.
Die Zweite ist, CSS auszuschalten.
Die dritte, JavaScript zu deaktivieren ist ja bereits umgangen.
Jedoch sehe ich bei dieser Variante noch folgendes Problem, für das mir bisher keine gute Lösung eingefallen ist:
Wenn ein User das Laden von Bildern abschaltet, aber CSS anläßt, was ich für die wahrscheinlichste Kombination der oben beschriebenen "Manipulationen" halte, wird er ja überhaupt nichts von dem Menü sehen.
Wenn er CSS abstellt, gibt es kein Problem, da er ja den Alternativtext hat.
Die Alternative von redlama (mit einem definierten alt-Attribut im img-Tag
), würde dazu führen, dass er bei Nicht-Anzeige von Bildern den Alternativtext sieht, aber bei Abschalten von CSS wieder nichts.Eine Kombination von beiden Varianten, also Bild mit alt-Attribut und wechselndem Hintergrundbild und Alternativtext im span, welcher ausgeblendet wird, würde die Kombinationen CSS an/Bilder aus und CSS aus/Bilder an abdecken und dem User das Menü präsentieren. Ist jedoch beides deaktiviert, so würde der User den Text zwei mal sehen (einmal vom alt-Attribut und einmal aus dem span), was auch nicht unbedingt gewünscht ist.
Wer diese Überlegungen für rein theoretisch hält, dem möchte ich noch sagen, dass ich häufig mit solchen Einstellungen spiele, vor allem, wenn mich auf irgendeiner Seite etwas stört. Wenn ich dann auf die nächste Seite, vielleicht eine von mir oder ähnlich schreibenden Webdesignern, gehe kommt es schonmal vor, dass ich nix oder Blödsinn sehe.
Hat jemand dazu noch weitere Ideen? Man will ja schließlich keine User ausschließen und einen doppelten Text möchte man dem User ja auch nicht unbedingt zeigen.
@feh: Was für ein Problem hast Du denn mit Deinem select-Tag?
Gruß hpvw
redlama
Erfahrenes Mitglied
Ich persönlich nutze aus beschrieben Gründen nur Textlinks. Mit den entsprechenden Fonts (z.B. Comic Sans MS) kann man da auch recht lustige/interessante Links erzeugen.hpvw hat gesagt.:
Das immer mehr User JavaScript deaktiviert haben, bzw. JavaScript von einigen Programmen fast vollständig geblock wird, ist ja kein Geheimnis!
Aber ich bin mir nicht sicher, ob der "normale User" Bilder und CSS deaktiviert!
Ich vermute mal eher, dass das nur "Profis" und "Spezis" machen. Und ich glaube, die können damit umgehen, wenn mal was nicht funktioniert! Oder?
redlama
son gohan
Erfahrenes Mitglied
Hallo,
ja ich glaube auch, das nur Profis CSS abstellen würden, und bei Bilder naja da bestimmt genauso, also kaum wert beachtet zu werden, wenn es zumal nicht anders zu machen ist.
ach ja @hpvw vielen Dank nochmal für deine Nachfrage zu meinem select Tag, also ich habe das Problem, das das select Tag in der Navigation zu hoch ist. Beim hover Effekt wechselt der Hintergrund nicht bis oben hin und es entsteht ein unschönes Bild. Wenn ich jedem Tag eine bestimmte Höhe gebe die dem des select Tags gleichkommt, dann bleibt trozdem unten noch ein Rand und die Links sind auch alle nicht mittig sondern hängen zu weit oben. Naja, im ganzen sieht echt schlimm aus. Wenn du mir eine Seite nennen kannst oder ein Beispiel mit Zwei Links und einem select Tag wäre ich dir echt dankbar. Nun. Ich bin halt noch nicht so fit in CSS.
Gruß
feh
ja ich glaube auch, das nur Profis CSS abstellen würden, und bei Bilder naja da bestimmt genauso, also kaum wert beachtet zu werden, wenn es zumal nicht anders zu machen ist.
ach ja @hpvw vielen Dank nochmal für deine Nachfrage zu meinem select Tag, also ich habe das Problem, das das select Tag in der Navigation zu hoch ist. Beim hover Effekt wechselt der Hintergrund nicht bis oben hin und es entsteht ein unschönes Bild. Wenn ich jedem Tag eine bestimmte Höhe gebe die dem des select Tags gleichkommt, dann bleibt trozdem unten noch ein Rand und die Links sind auch alle nicht mittig sondern hängen zu weit oben. Naja, im ganzen sieht echt schlimm aus. Wenn du mir eine Seite nennen kannst oder ein Beispiel mit Zwei Links und einem select Tag wäre ich dir echt dankbar. Nun. Ich bin halt noch nicht so fit in CSS.
Gruß
feh
So ganz sicher bin ich mir nicht, ob ich Dein Problem richtig verstanden habe.
Evtl. helfen die CSS-Background Eigenschaften no-repeat, schau mal bei SelfHTML im CSS-Teil nach background (die allg. Eigenschaft für den Hintergrund), da sind ziemlich viele Möglichkeiten, auch zur Positionierung eines Hintergrundbildes beschrieben.
Evtl. helfen ja auch Spielereinen mit margin und padding bei Deinem Problem (z.B. padding-top bei den Links oder einen negativen margin-top beim select).
Du kannst auch versuchen, die Höhe des selects den Links anzupassen. Bei input geht sowas, aber select's sind zum Teil etwas immun gegen einige CSS-Formatierungen. Musst Du mal probieren, evtl. auch bei gleichzeitiger Änderung der Schriftgröße im select.
Du siehst, ich strauchel noch etwas, vielleicht postest Du ja mal einen Screenshot, damit wir Dein Problem besser verstehen.
@redlama
Ich würd's halt gerne jedem recht machen Naja, wenigstens sollte jeder die Seite benutzen können. Dann wird der User wohl am ehesten damit Leben können, wenn er den Text zwei mal lesen muss.
Gruß hpvw
Evtl. helfen die CSS-Background Eigenschaften no-repeat, schau mal bei SelfHTML im CSS-Teil nach background (die allg. Eigenschaft für den Hintergrund), da sind ziemlich viele Möglichkeiten, auch zur Positionierung eines Hintergrundbildes beschrieben.
Evtl. helfen ja auch Spielereinen mit margin und padding bei Deinem Problem (z.B. padding-top bei den Links oder einen negativen margin-top beim select).
Du kannst auch versuchen, die Höhe des selects den Links anzupassen. Bei input geht sowas, aber select's sind zum Teil etwas immun gegen einige CSS-Formatierungen. Musst Du mal probieren, evtl. auch bei gleichzeitiger Änderung der Schriftgröße im select.
Du siehst, ich strauchel noch etwas, vielleicht postest Du ja mal einen Screenshot, damit wir Dein Problem besser verstehen.
@redlama
Ich würd's halt gerne jedem recht machen
Naja, wenigstens sollte jeder die Seite benutzen können. Dann wird der User wohl am ehesten damit Leben können, wenn er den Text zwei mal lesen muss.Gruß hpvw
- Status
