Hilfe bei Javascript Menü

Scorbions

Grünschnabel
Hallo alle miteinander :)
ich hoffe ich bin mit meinem Anliegen hier richtig.
Also ich habe bereits fortgeschrittene Erfahrung mit dem erstellen von Websites mithilfe des Dreamweavers CS5 von Adobe.
Habe auch schon oft mit den Spry-Elementen gearbeitet, allerdings helfen die mir dieses mal nicht wirklich weiter.
Ich möchte eine Menü gestalten das in 3 Rubriken Unterteil ist.
Es sollen 3 Bilder als Hintergrund für das Menü dienen, diese sollen horizontal nebeneinander angeordnet werden. Jedes Bild soll aber den kompletten Content-Bereich von 960px ausfüllen. Die 3 Bilder sollen also jeweils nur als Ausschnitt dargestellt werden und dann beim Mouseover oder klick auf den entsprechenden Bereich den ganzen Content bereich ausfüllen. In der Ausgangssituation soll also jedes Bild 1/3 des Content Bereichs füllen.
Hat der Nutzer per Mouseover ein Bild im Content "vergrößert" soll dann per Klick auf eine andere Seite verlinkt werden.
Unter dem Content Bereich sind dann 3 Div-Container, die jeweils 1/3 der horizontalen Einnehmen und es ermöglichen sollen bei Klick oder Mouseover das entsprechende Bild im Content anzuzeigen.
Ich hoffe ihr versteht mich soweit. ;)
Das ganze möchte ich eben möglichst nicht zu abrupt mit einer minimalen Verzögerung beim Bildwechsel realisieren und nicht so das immer eine neue Seite geladen werden muss. Wenn ich es richtig verstehe bietet sich Javascript da an, mit CSS bin ich dabei jedenfalls nicht ausgekommen.
Wenn ihr mir einen kleinen Hinweiß geben könnt wie ich das ganze Umsetze wäre ich sehr dankbar, oder ein Scriptbeispiel mit dem ich mich dann beschäftigen kann um die Funktion entsprechend meinen Wünschen zu gestalten. Ich würde nur ungern einfach was abkopieren, da lern ich ja nix bei.
Fürs bessere Verständnis hänge ich mal noch eine Skizze an.

Also wenn ihr Ideen und Vorschläge habt, immer her damit :)
Falls ihr noch Fragen zu meiner Ausführung habt bemühe ich mich euch zeitnah zu antworten.
Jedenfalls schon einmal ein herzliches "Danke" an alle die mir helfen wollen.

Gruß

Scorbion
 

Anhänge

  • IMG_1438.jpg
    IMG_1438.jpg
    127,7 KB · Aufrufe: 10
Kannst du vielleicht mal mit Paint, PhotoShop, ... ein Bild machen wo man erkennen kann wie es aussehen soll und das hier einstellen.

Mit der obigen Beschreibung verstehe ich es nicht wirklich was du haben möchtest.
 
Na klar. Ich hab mal schnell ein paar JPEG's gemacht die meine Situation hoffentlich besser erläutern.
Sind im Anhang. Der Helle Bereich unten sollen die Menüknöpfe sein die immer sichtbar sind, der dunklere Bereich ist der Contentbereich.

Gruß

Scorbions
 

Anhänge

  • Beispiel-Grundeinstellung.jpg
    Beispiel-Grundeinstellung.jpg
    27,4 KB · Aufrufe: 4
  • Mouseover-Rot.jpg
    Mouseover-Rot.jpg
    26,4 KB · Aufrufe: 3
  • Mouseover-Schwarz.jpg
    Mouseover-Schwarz.jpg
    19,6 KB · Aufrufe: 2
  • Mouseover-Blau.jpg
    Mouseover-Blau.jpg
    25,8 KB · Aufrufe: 2
Weit davon entfernt das es fertig wäre, aber geht es zumindest mal in die gewünschte Richtung?

Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".menue").hover(
function() {
	url = $(this).css('background-image');
	$("#content").css('background-image', url);
	$("#content").css('height', "100%");
	$("#content").fadeIn(500);
},
function() {
	$("#content").fadeOut(500);
	$("#content").css('background-image', '');
	$("#content").css('display', 'none');
});

});
</script>
HTML:
<div class="menue" style="position: relative; top: 0px; left: 0px; float: left; width: 33%; height: 100%; z-index: 0; background-image: url(C:/xampp/htdocs/test/pic/b.jpg);">
Menue LINKS
</div>
<div class="menue" style="position: relative; top: 0px; left: 0px; float: left; width: 33%; height: 100%; z-index: 0; background-image: url(C:/xampp/htdocs/test/pic/r.jpg);">
Menue MITTE
</div>
<div class="menue" style="position: relative; top: 0px; left: 0px; float: left; width: 33%; height: 100%; z-index: 0; background-image: url(C:/xampp/htdocs/test/pic/g.jpg);">
Menue RECHTS
</div>
<div id="content" style="position: absolute; top: 50px; left: 0px; width: 100%; z-index: 9; background-image: url();"></div>
 
Zuletzt bearbeitet:
Danke, das hilft mir schon mal enorm. Da kann ich bestimmt drauf aufbauen. Wenn ich noch fragen hab meld ich mich.
Danke nochmal.
Gruß
 
Zurück