{"id":877,"date":"2008-12-02T08:35:37","date_gmt":"2008-12-02T07:35:37","guid":{"rendered":"http:\/\/my.stargazer.at\/?p=877"},"modified":"2008-12-02T08:35:37","modified_gmt":"2008-12-02T07:35:37","slug":"buttons-without-js","status":"publish","type":"post","link":"https:\/\/my.stargazer.at\/de\/2008\/12\/02\/buttons-without-js\/","title":{"rendered":"Buttons ohne JS"},"content":{"rendered":"

Nostalgie ist ja was Sch\u00f6nes – vor allem wenn man uralte Webseiten ausgr\u00e4bt, welche man irgendwann mal gebaut hat. In meinem Fall geht es um die Seite auf www.stargazer.at<\/a>, auf welcher ich eigentlich mit den ganzen Basteleien angefangen habe.<\/p>\n

Eines der damaligen Probleme waren Buttons, welche sich ver\u00e4ndern, sobald man mit der Maus dr\u00fcber f\u00e4hrt. Damals war unser L\u00f6sungsansatz meist ein Haufen Java Script Code, welcher nicht unbedingt \u00fcberall lief, was immer wieder durch die ‚Best viewed‘ Meldungen angezeigt wurde.<\/p>\n

Da wir heute kl\u00fcger sind, wissen wir, dass man zwar die ganzen Java Script Stunts zwar besser machen k\u00f6nnte, es aber mehr Sinn macht, diese Effekte so simpel wie m\u00f6glich zu l\u00f6sen. Hier ist ein Ansatz, der ganz ohne Scripts auskommt<\/p>\n

Unser Button hat grunds\u00e4tzlich zwei Bilder zwischen welchen umgeschaltet werden sollte. <\/p>\n

\"button-a\"<\/p>\n

Das Andere zeigt nun den Button, wie er gedr\u00fcckt ist:<\/p>\n

\"button-b\"<\/p>\n

W\u00fcrden wir nun diese Bilder per CSS einer Navigation zuweisen, k\u00f6nnte das wie folgt aussehen:<\/p>\n

\n#foo .nav li a { display:block; height:211px; float:left; }
\n#foo .nav li a.menu:hover { background:url(button-b.png) no-repeat; }
\n#foo .nav li a.menu { background:url(button-a.png) no-repeat; }
\n#foo .nav li a.menuSel { background:url(button-b.png) no-repeat; }\n<\/p><\/blockquote>\n

Unser Browser wird uns wahrscheinlich beim Anzeigen diverse Probleme bereiten, da eben keine Bilder geladen werden, die nicht angezeigt werden m\u00fcssen und wir stehen vor einem Problem. Also m\u00fcssen wir uns etwas einfallen lassen. Da man mit Hilfe von Stylesheets Bilder ausrichten kann, setze ich dort an, indem ich beide Buttons einmal zu einem Bild kombiniere, was dann im Endeffekt wie folgt aussieht:<\/p>\n

\"button-ab\"<\/p>\n

Und nun kommt unser kleiner Trick mit der Ausrichtung zum Einsatz: Ich weise allen Zust\u00e4nden das gleiche Bild zu, richte es jedoch einmal nach der unteren Kante und einmal nach der oberen Kante aus und lasse den Rest des Bildes ausserhalb seines definierten Anzeigebereiches verschwinden<\/p>\n

\n#foo .nav li a { display:block; height:211px; float:left; }
\n#foo .nav li a.home:hover { background:url(..\/images\/button-ab.png) left bottom no-repeat; }
\n#foo .nav li a.home { background:url(..\/images\/button-ab.png) left top no-repeat; }
\n#foo .nav li a.homeSel { background:url(..\/images\/button-ab.png) left bottom no-repeat; }\n<\/p><\/blockquote>\n

Das Ergebnis ist ein sch\u00f6ner Button, welcher beim Dr\u00fcberfahren mit der Maus sein Erscheinungsbild \u00e4ndert. Und das alles ganz ohne den Einsatz von Java Script und als Draufgabe sogar mit den g\u00e4ngigen Browsern kompatibel.<\/p>","protected":false},"excerpt":{"rendered":"

Nostalgie ist ja was Sch\u00f6nes – vor allem wenn man uralte Webseiten ausgr\u00e4bt, welche man irgendwann mal gebaut hat. In meinem Fall geht es um die Seite auf www.stargazer.at, auf welcher ich eigentlich mit den ganzen Basteleien angefangen habe. Eines der damaligen Probleme waren Buttons, welche sich ver\u00e4ndern, sobald man mit der Maus dr\u00fcber f\u00e4hrt. Damals war unser […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[186],"class_list":["post-877","post","type-post","status-publish","format-standard","hentry","category-it-related-stuff","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts\/877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/comments?post=877"}],"version-history":[{"count":0,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts\/877\/revisions"}],"wp:attachment":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/media?parent=877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/categories?post=877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/tags?post=877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}