Bild als menü im HTML

[Cherrycokeice]

Hallo Ihr Lieben,
Ich hoffe das ich jetzt hier an der richtigen Stelle bin, falls nicht tut es mir Leid.

ich möchte eine website bauen und dafür habe ich mit ein Bild mit Menüpunkten gebastelt das quasi nur auf der index Seite so aussehen soll.... bei den anderen wird es normal, das bekomme ich auch hin. nur leider bin ich grade ziemlich überfragt. Ich hoffe Ihr könnt mir nen kleinen anschubs in die richtige richtung geben.



Das ist das Bild dass dann als Menü fungieren soll, habe jeden Button noch einmal in anderer Farbe damit diese sich später bei zb onmouseover verändern.
Nun zu meinem Problem. Wie stelle ich es jetzt an das die zweiten bilder dann auch auf der richtigen position liegen? ist das so überhaupt zu bewerkstelligen?
Hatte auch schon an flash gedacht aber das möchte ich lieber nicht.
Auserden soll bei klick auf eines der Buttons im Display des Handys eine Grafik von der dazugehörigen website kommen und wenn man darauf klickt auf diese Seite gelangen.
Ist das so irgendwie umsetzbar?


Bin für jede Hilfe/Tip dankbar.

Liebe Grüße die Cherrycokeice

 

[bodil]

Du könntest für jeden Button einen Link <a href=...></a> vorsehen. Mit

.nav a {
   display:block;
   position:absolute;
   background:no-repeat url(...) 0px 0px;
   height: ..px;
   width: ..px;
   left: .. px;
   top: ..px;
}

kannst du ihn an beliebiger Stelle positionieren. Fürs Hovern würde ich raten, in einer Datei untereinander zwei Grafiken unterzubringen und dann über die background-position das Hintergrundbild so zu verschieben, dass immer nur der passende Teil sichtbar ist. So verhinderst du, dass beim Mousover erst eine neue Grafik nachgeladen werden muss.

.nav a:hover {
   background:no-repeat url(...) 0px -20px;
}

 

[Tronjer]

Das ist das Bild dass dann als Menü fungieren soll, habe jeden Button noch einmal in anderer Farbe damit diese sich später bei zb onmouseover verändern. Nun zu meinem Problem. Wie stelle ich es jetzt an das die zweiten bilder dann auch auf der richtigen position liegen? ist das so überhaupt zu bewerkstelligen?

- Im Photoshop die Icons vom Hintergrund trennen und separat speichern.
- Einen zweiten Icon-Satz für den Hover-Zustand erstellen.

Auserden soll bei klick auf eines der Buttons im Display des Handys eine Grafik von der dazugehörigen website kommen und wenn man darauf klickt auf diese Seite gelangen.

Die einfachste Variante wäre, Screenshots der Seiten anzufertigen, diese im Photoshop auf das gewünschte Format zu bringen und anschließend den Buttons per Eventhandler zuzweisen.

Die Umsetzung dieses Menüs erfordert solide Basiskenntnisse in HTML/CSS und JavaScript/jQuery. Falls die noch nicht vorhanden sind, solltest du dich erst gründlich in die Materie einlesen.

 

[Cherrycokeice]

Vielen Dank für eure Antworten =)

Werde beide varianten mal probieren und mich später nochmal melden.

HTML und CSS ist kein Problem...nur in Javascript und jquery bin ich noch anfänger. ich versuchs einfach mal alla learning by doing