nicht angemeldet
Navigationsleiste von JavaScript auf CSS portieren
Hallo,
ich möchte ein eine Navigationsleiste (mit mehreren Grafikbutton und Mouseovereffekt) von JavaScript auf CSS portieren. Für jeden Button hatte ich bei der JavaScript-Navigation ein extra Buttonpaar erzeugt.
Nun will ich unter CSS nur mit einem großen GIF arbeiten, so dass der Button (als auch das Austauschbild für den Mouseovereffekt) aus einem definierten Bildteil des "einen" GIF erzeugt wird. Das ausgetauschte Bild braucht nur beim überfahren der Maus über den Button angezeigt werden - jedoch nicht dauerhaft beim Anklicken.
Ich habe unter http://www.superfluousbanter.org/archives/000186.php schon etwas gefunden was meinen Vorstellungen sehr nahe kommt. Leider entspricht es nicht ganz meinen Bedürfnissen und ist zu komplex. Ich möchte mehrere einzelne Buttons untereinander erzeugen die voneinander getrennt sind. Oben genanntes Beispiel (siehe Link) sieht jedoch die Navigation als eine einzelne Navigationsleiste vor.
Kann mir jemand einen Lösungsansatz oder Link nennen welcher für mein Vorhaben geeignet ist? Besonders wichtig ist mir, dass die zukünftigen Buttons aus nur einem GIF erzeugt werden und ich die einzelnen Buttons individuell positionieren kann.
-
Hallo Daniel!
Hoffe ich verstehe dich richtig, dann sollte nämlich ganz einfach das hier helfen: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations -
Hallo,
Kann mir jemand einen Lösungsansatz oder Link nennen welcher für mein Vorhaben geeignet ist? Besonders wichtig ist mir, dass die zukünftigen Buttons aus nur einem GIF erzeugt werden und ich die einzelnen Buttons individuell positionieren kann.
Also ich verstehe dich nicht wirklich, das ist doch genau das was du haben willst. Und positionieren kannst du deine Links doch mit CSS ganz anders als die, das hat mit dem System nichts zu tun. Kannst du noch einmal erklären was du genau machen willst?
Grüße
Jeena Paradies--
Trauriger Mensch den ich bemittleide
http://jeenaparadies.de/weblog/2004/september/trauriger-mensch/
SELFTreffen in Dresden - Ein Bericht
http://community.de.selfhtml.org/treffen/2004/dresden/-
Hallo!
Ich seh' da grad' was in der Signatur: bemitleiden wird mit einem "t" geschrieben ;-) (es sei denn, daß zweite hat noch einen tieferen Sinn)
Gruß
Matthias
--
ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
http://www.makaio.de/quotations-
Hallo,
Ich seh' da grad' was in der Signatur: bemitleiden wird mit einem "t" geschrieben ;-) (es sei denn, daß zweite hat noch einen tieferen Sinn)
Ähm ja, Jeena und die Rechtschreibung :) Danke für den Hinweis, ist jetzt hoffentlich weg :)
Grüße
Jeena Paradies--
Trauriger Mensch den ich bemitleide
http://jeenaparadies.de/weblog/2004/september/trauriger-mensch/
SELFTreffen in Dresden - Ein Bericht
http://community.de.selfhtml.org/treffen/2004/dresden/
-
-
Hallo,
Also ich verstehe dich nicht wirklich, das ist doch genau das was du haben willst. Und positionieren kannst du deine Links doch mit CSS ganz anders als die, das hat mit dem System nichts zu tun. Kannst du noch einmal erklären was du genau machen willst?
Zum besseren Verständnis hier mal ein Beispiel der aktuellen JS-Navigation. Die Buttonbeschriftung ist das GIF selber.
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
Hier stehen die JS-Funktionen MM_swapImgRestore, MM_preloadImages, MM_findObj und MM_swapImage.
//-->
</script>
</head>
<body onload=";MM_preloadImages('button1_hover.gif','button2_hover.gif')">
<div style="position:absolute; left:20px; top:30px"><a href="link1.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('link1','','button1_hover.gif',1)"><img src="button1.gif" name="link1" width="120" height="28" alt=""></a></div>
<div style="position:absolute; left:20px; top:60px"><a href="link2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('link2','','button2_hover.gif',1)"><img src="button2.gif" name="link2" width="120" height="28" alt=""></a></div>
</body>
</html>
-
-
Hallo.
Nun will ich unter CSS nur mit einem großen GIF arbeiten, so dass der Button (als auch das Austauschbild für den Mouseovereffekt) aus einem definierten Bildteil des "einen" GIF erzeugt wird.
Kein Problem. Zu diesem Zweck lassen sich Hintergrundbilder ja verschieben.
Ich habe unter http://www.superfluousbanter.org/archives/000186.php schon etwas gefunden was meinen Vorstellungen sehr nahe kommt. Leider entspricht es nicht ganz meinen Bedürfnissen und ist zu komplex. Ich möchte mehrere einzelne Buttons untereinander erzeugen die voneinander getrennt sind.
Dann könnte dich http://forum.de.selfhtml.org/archiv/2003/10/60368/#m340148 ff. interessieren.
MfG, at -
Hi,
Ich habe unter http://www.superfluousbanter.org/archives/000186.php schon etwas gefunden was meinen Vorstellungen sehr nahe kommt.
Hier werden jedoch keine Grafiken eingesetzt. Nur Textlinks, deren Hintergrundfarbe wechselt.
Kann mir jemand einen Lösungsansatz oder Link nennen welcher für mein Vorhaben geeignet ist? Besonders wichtig ist mir, dass die zukünftigen Buttons aus nur einem GIF erzeugt werden
Du meinst also, daß Du (wie in dem genannten Beispiel) Terxtlinksm aber mit Hintergrundgrafiken benötigst? Vielleicht hilft Dir http://www.1ngo.de/web/buttons.html? Das geht auch mit einer einzigen Grafik, wie Matthias schon anmerkte.
Oder wenn Du ganz auf Grafiken verzichten kannst, sieh' Dich mal bei http://css.maxdesign.com.au/listamatic/ um.freundliche Grüße
Ingo-
Hallo
Oder wenn Du ganz auf Grafiken verzichten kannst, sieh' Dich mal bei http://css.maxdesign.com.au/listamatic/ um.
Wieso verzichten? Da sind ja auch Beispiele mit Hintergrundgraphiken dabei. :-)
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo) -
Hi,
Ich habe unter http://www.superfluousbanter.org/archives/000186.php schon etwas gefunden was meinen Vorstellungen sehr nahe kommt.
Hier werden jedoch keine Grafiken eingesetzt. Nur Textlinks, deren Hintergrundfarbe wechselt.Natürlich werden Grafiken eingesetzt. Genauer: Eine (Hintergrund-)Grafik.
Er meinte sicherlich nicht das Menü der Seite, sondern das Menü, welches auf der Seite ausführlich vorgestellt wird! =:-)
Und was passiert, wenn man die Größe der (Menü-)Schrift verändert? =:-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
Er meinte sicherlich nicht das Menü der Seite, sondern das Menü, welches auf der Seite ausführlich vorgestellt wird! =:-)
Oops, da habe ich mal wieder nicht den Seiteninhalt beachtet;-)
Allerdings hat das Beispielmenü ja auch im IE einen Haken. Wie auch immer, ein Link auf http://www.nundroo.com/nav_matrix/welcome2.html wäre hilfreicher gewesen.Und was passiert, wenn man die Größe der (Menü-)Schrift verändert? =:-)
Tja, was meinst Du, warum ich entgegen meiner Prinzipien in diesem Beispiel klammheimlich px verwendet habe ;-))
Aber Du hast ja Recht ... ich habe die Schriftgröße jetzt mal in em definiert, allerdings etwas kleiner, so daß sie zumindest im IE bis zum Schriftgrad "sehr groß" paßt und werde wohl dieses kleine Problem auch noch kurz erwähnen.
Weißt Du übrigens zufällig, warum der Mozilla bei einer line-height Angabe in Höhe der Hintergrundgrafik von 21px den Text nicht vertikal zentriert, sondern in Abghängigkeit der Schriftgröße nach oben (bei kleineren Schriftgrößen) bzw. nach unten setzt?
freundliche Grüße
Ingo-
Hi,
Allerdings hat das Beispielmenü ja auch im IE einen Haken.
Einen, der nicht mit dem eingearbeiteten Workaround behoben werden kann? (zugegeben: ganz wohl ist mir dabei auch nicht =;-))
Tja, was meinst Du, warum ich entgegen meiner Prinzipien in diesem Beispiel klammheimlich px verwendet habe ;-))
Erwischt! ;-)
Weißt Du übrigens zufällig, warum der Mozilla bei einer line-height Angabe in Höhe der Hintergrundgrafik von 21px den Text nicht vertikal zentriert, sondern in Abghängigkeit der Schriftgröße nach oben (bei kleineren Schriftgrößen) bzw. nach unten setzt?
Da bin ich leider überfragt. :-/
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
Weißt Du übrigens zufällig, warum der Mozilla bei einer line-height Angabe in Höhe der Hintergrundgrafik von 21px den Text nicht vertikal zentriert, sondern in Abghängigkeit der Schriftgröße nach oben (bei kleineren Schriftgrößen) bzw. nach unten setzt?
Da bin ich leider überfragt. :-/
schade. Oder irgend eine Idee, wie ich den Mozilla dazu bewegen kann, den Text vertikal zu zentrieren oder zumindest etwas höher anzuzeigen. Leider geht's hier auch nicht um Gecko vs. IE, da Opera dieses Verhalten nicht hat - und eine Browserweiche nur für Mozilla?
freundliche Grüße
Ingo
-
-
-
-
-
Hi,
Kann mir jemand einen Lösungsansatz oder Link nennen welcher für mein Vorhaben geeignet ist? Besonders wichtig ist mir, dass die zukünftigen Buttons aus nur einem GIF erzeugt werden und ich die einzelnen Buttons individuell positionieren kann.
? Genau das bietet doch der von Dir genannte Link!
Du mußt halt nur die Menüfelder anders positionieren, und, logischerweise, dementsprechend auch das "Gesamt-GIF" anders bauen.
Schau Dir das nochmal in aller Ruhe an ... ;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!