rundes Layout für Navigationsleiste-Wie?

[tipe]

Hallöchen,
habe mal wieder eine kleine Frage...
Für eine Website möchte ich das runde Logo des Kunden benutzen, um es als Navigationsleiste in die Seite zu integrieren. Im Anhang findet ihr einen ersten enwurf, so oder so ähnlich soll es aussehen..
nun meine Frage:
ich würde gerne die einzelnen Buttons als Rollover-effekt haben, das, was aktiv ist,soll weiss werden, der rest dunkelgrün bleiben..
wie stelle ich aber sowas in einem RUNDEN Layout und mit Dreamweaver her? mit layern gehts ja nicht, die kann man ja nicht drehen, und wenn ich die maps benutze, weiss ich nicht,wie ich da einen Rollovereffekt hinbekommen soll...
Muss ich doch auf Flash zurückgreifen? würde ich gerne vermeiden...oder geht das irgendwie mit Javascript? hmhm.da kenne ich mich nicht wirklich gut aus..hätte einer einen Tipp für mich, wie man sowas angehen könnte?
Vielen Dank schonmal im Voraus!!

[jayjay]

maps und css könnte es tun, dabei müsste wahrscheinlich jeder button eigene klasse haben

[tipe]

hallo Jayjay, erstmal vielen dank für deine schnelle antwort...
also, ich hab mal angefangen, es auszuprobieren, komme aber noch nicht wirklich weiter; als erstes hab ich mal um den button von "home" eine map angelegt, mit der id=home. soweit,sogut,die Map "schneidet" ja sozusagen aus dem hintergrund den anklickbaren button aus.wie baue ich aber nun via CSS den rollovereffekt ein, ohne ein bild zu verwenden und die schrägheit und grösse des buttons einzuhalten? sprich, der css-code muss sich nur auf die Map beziehen..
wenn ich aber zum beispiel <style type="text/css">
#home a {
margin:0px;
}
#home a:hover {
background-color:#ffffff;
}
</style>
einfüge, passiert gar nichts...ausserdem will ich ja auch dass sich die schrift von hell nach dunkel umändert beim "drüberrollen", aber da ich ja in dreamweaver keine schrägen schriften einfügen kann, muss ich also doch ein zweites bild als rollover einfügen???nur wie??
danke!!!

[jayjay]

schrift schräg wird wohl nicht gehen. ich würde versuchen alles über bildchen auszutauschen...

[tipe]

hm..hab ich schon versucht...irgendwie hab ich ein brett vor dem kopf.also, wenn ich das mit bildchen mache, dnan sind die doch auch rechteckig, und nicht in der form der imagemap....dann könnte ich es ja auch mit lauter ebenen machen, die sich aber hoffnungslos überlagern würden..hmmm..könntest du mir eventuell ein beispiel senden? ich kriegs einfach nicht hin...ansonsten wohl auf sowas zurückgreifen?
http://www.deutschland-webcam.de/webcams/

[jayjay]

genau, zb über maps und dann verhalten.
wo baust du deine grafik? viele programme wie fw oder imageready können sowas schon mal so grob exportieren, inkl aller images und code. dann bisschen hand anlegen und gut ist.

[tipe]

hm, ja, dann versuch ich das mal, werde dafür wohl fireworks benutzen...dachte, es ginge eben über die maps und css direkt in dreamweaver!!...

[jayjay]

kann man maps über css steuern?
habs nie gebraucht, aber interessant ist das. gibts nen link zur entwicklungsseite?

[tipe]

maps und css könnte es tun, dabei müsste wahrscheinlich jeder button eigene klasse haben

hmm...ich hatte das durch deine erste antwort so verstanden und ausprobiert, es aber ja nicht hinbekommen....!!
d.h. dann muss ich wohl auf diese Fireworks-Geschichte zurückgreifen...oder doch besser Flash?
einen link gibt es noch nicht, da ich erst in der layoutphase bin, mir aber schon gedanken um den programmierungsumfang machen will
ps: bin auch kein wirklicher freak in sachen css, ich hab gehofft dass diese idee mit den maps und css schonmal jemand ausprobeirt hat und es klappt!? ich weiss einfach nicht wirklich wie ich an die sache herangehen soll und bin auch zu keinem ergebnis gekommen...mal sehen.

[jayjay]

dann zeig code, wie weit bist du gekommen?

[tipe]

siehe oben: eine variante war diese:
eine map um den button "home" mit namen "home" und im head bereich:
<style type="text/css">
#home a {
margin:0px;
}
#home a:hover {
background-image:img.src='bild2.jpg'
}
</style>

die zweite variante war es , der map einen mouse-over befehl zuzuweisen, mit dem 'bild2.jpg'
aber auch das hat nicht funktioniert.
ausserdem wäre das bild dann ja wie gesgt wieder rechteckig und viel zu gross und würde sich nicht an die form und grösse der map anpassen.....

[jayjay]

hab fw mal ausprobiert, hier das ergebnis, unbearbeitet

[th2409]

Ich würde empfehlen, das mit Fireworks zu machen. Die Unterstützung ist wirklich optimal. Du kannst 2 Ebenen erzeugen - 1 originale und eine zweite, in welcher der "hover"-Zustand steckt. Dann nimmst Du das Polygon-Segmentierwerkzeug von FW und schneidest einzelne Polygone zurecht. Anschließende bestimmst Du das Verhalten jedes einzelnen Polygons (was nun die Schaltfläche ist) mit "Bild austauschen von Frame 2", und schon hast Du eine prima funktionierende Lösung. Per Export in HTML und Bilder schaffst Du eine in DW einsetzbare Lösung.
Ehrlicherweise müsste man gestehen, dass der geschaffene Quelltext heute nicht mehr als das Wahre angesehen wird - denn er kreiert eine Tabelle!. Aber mir ist für so stark strukturierte Bilder auch noch nichts anderes eingefallen. Bastelei per CSS wäre ein gewaltiger Aufwand, da kommen mehrere Dutzend Klassen zusammen - und das alles bei manueller Rechnerei/ Positioniererei, die einem FW so abnimmt.
Ich habe so mal ein Flugzeugcockpit gemacht und durfte anschließend 4000(!) Dateien uploaden...

Ich habe mal in FW eine Datei gemacht, die 2 Schaltflächen in der angedachten Form hat und wie geplant funktionert. Du kannst die Datei in FW öffnen und von dort aus im Browser anzeigen lassen, dann siehst Du es.

[th2409]

Ja, der Anhang ... wurde leider gleich als Grafik durchgedrückt. Hier nochmal.

[jayjay]

also wie ich schon mal grob angelegt habe