bei Mouseover über eines von 6 Divs, soll sich der Inhalt eines 7. Divs ändern

[Eli-]

Hi,

Also ich habe 6 divs, eine Art Menü. Jetzt soll, bei jedem Menüpunkt ein anderes Bild erscheinen. Da es nicht in das Menü direkt passt, dachte ich, links am Rand kommt ein Div hin, das seinen Inhalt (also das bild) je nach Menüpunkt(bei Mouseover) ändert.

Ich dachte, das dürfte mit jQuery gehen, in dem ich ihm sage, wenn mouseover über Div1, dann soll er de Code im "Bild-Div" ersetzen, sodass das passende Bild angezeigt wird.

und so weiter.

Bloß, mit welcher Funktion kann man den kompletten Inhalt eines Divs ersetzen?

Danke schon mal für eure Hilfe

LG
Eli-

 

[CPoly]

Zum Beispiel http://api.jquery.com/html/ oder http://api.jquery.com/text/

 

[Lime]

Oder du änderst einfach den Background des DIVs, wenn es nur ein Bild sein soll.

 

[Eli-]

Zum Beispiel http://api.jquery.com/html/ oder http://api.jquery.com/text/

Damit geht das? Dachte immer, damit kann man nur das HTML lesen oder so.


Ich werds mal versuchen, danke
und .text() Kenn ich noch gar nicht. Werd ich mir auch mal anschauen. thx

Oder du änderst einfach den Background des DIVs, wenn es nur ein Bild sein soll.

Ja, das wäre eine Idee.
Dann müsste man per jQuery den BG ändern. Bloß, damit hab ich irgendwie absolut immer probleme, wennes um CSS-Eigenschaften ändern geht.
Vor allem, wäre es cool, wenn das über eine fade-Animation geht?

Geht das?


-----

Danke auf jeden Fall schon mal

 

[Lime]

Öhm.... Frag mich nicht zu viel, aber ich glaub so sollte das gehen

$('#bg').animate({opacity: 0}, 'slow', function() {
        $(this).css({'background-image': 'url(1.jpg)'}).animate({opacity: 1});
});

Vielleicht gibts auch noch eine einfachere Lösung.

 

[Eli-]

Hi, danke, aber irgendwie klappt es nicht.

Ich habe davor nur ein $('#1').hover(function() { ... }); gemacht(und davor halt $(document).ready(). ) Aber leider passiert gar nichts

EDIT: Ok, irgendwie funktioniert gar nichts mit jquery grad. Habe ich das richtig eingebunden?:

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.2.js”></script>

EDIT:
Okay, auf einmal hat es funktioniert ^^ danke.
Nur eine Frage: Auf den IE 9 sieht das echt komisch aus, auch keine Animation oder so.
Kann IE 9 kein Javascript/jQuery****

 

[erik s.]

Kannst du den Quellcode mal posten oder zumindest den relevanten Teil? Und bitte in die passenden Tags packen.

 

[Bruhno]

Ich hatte das bei mir auch, da ging es nur um den Text, sollte aber auch mit Background oder Bildern gehen. Bei Bildern natürlich auf die Auflösung achten^^:

Javascript:

<script type="text/javascript">

function showInhalt(id) {
		document.getElementById(id).style.display = 'block';
	}
	function hideInhalt(id) {
		document.getElementById(id).style.display = 'none';
	}
</script>

den rufst Du dann beim entsprechenden Element per onmouseout="hideInhalt(entsprechende id)" und onmouseover="showInhalt(entsprechende id)" auf.
Dann fehlt Dir noch die CSS Klasse für das Div, wo der Inhalt erscheinen soll.
So in etwa:

#container span{
display:none; position:absolute; top:woauchimmer; left:woauchimmer;}

Und dem Inhalt (span) im Div (#container) musst Du natürlich noch die entsprechenden Id`s geben...

Ich hoffe es war verständlich und hilft Dir weiter!