Mouseover, Mouseout + onClick in unterschiedlichen Zellen

K

klexi

Grünschnabel
Hallo ihr da draußen,

ich hoffe ihr könnt mir helfen, denn ich bin am verzweifeln.

Ich bin am erstellen einer Website und möchte meine Navigation so gestalten

4 Menüpunkte (Aktuelles I Themen I Informationen I online lesen)

jetzt möchte ich folgendes bezwecken: Wenn ich mit meiner Maus auf z.b. Themen drüber fahre soll in einer Zelle daraunter ein Bild erscheinen in ca. einer Größe von 250 x 100 px , also nix großes.

und sobald ich auf Themen klicke soll dieses Bild auch fest bleiben.

Ich hoffe man versteht so ungefähr was ich will.

Kurzfassung: Mit der Maus über die einzelnen Menüpunkte und dabei soll immer ein Bild in einer Zelle darunter erscheinen (zu allen 4 ein anderes Bild) und wenn ich auf einen der Menüpunkte klick soll das dazugehörige Bild fest bleiben, damit man eben weis wo man sich gerade befindet.

Hoffe ihr könnt mir helfen :(

Grüße
 
Hallo,

du hast deine Frage doch schon selbst beantwortet.
Du weißt welche Events du benutzen musst und weißt was du willst

pack einfach einen Div unter die jeweilige Zelle und versteck ihn bzw mach ihn unsichtbar. Beim mouseover einfach einblenden, beim mouseout einfach ausblenden und beim click eingeblendet lassen, bzw. im JS Teil einfach eine StatusVariable setzen, die du im Mouseout jedesmal abfragst, isse gesetzt passiert nix, isse nicht gesetzt, dann blende aus.

Der Rest ist CSS und JS.

Ich empfehle http://www.css4you.de und http://www.selfhtml.org

probier erstmal, sollten konkrete Fragen auftreten, einfach stellen.
Alles andere hätte für mich jetzt den faden Beigeschmack das für dich programmieren zu sollen

Greez
 
Hallo,


hier ein Beispiel wie ich es machen würde.

Die Idee ist dabei, dass du einfach nur eine Klasse (CSS) dem jeweiligen Kontainer für den entsprechenden Zustand zuweisen tust.
z.B. hiddenImage wenn das Bild ausgeblendet werden soll oder activeImage, wenn das Bild immer sichtbar sein sollte (durch !important gewinnt diese Klasse, dass heißt wenn ein Container beide Klassen hat bleibt dieser trotzdem sichtbar).

Verwende HTML, CSS und etwas jQuery:
HTML: 
<html>
<head>
<title> de.tutorials.js.mouseEvents</title>
<meta name="author" content="konstantin.denerz"></meta>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

var points =  $('.navigationPoint');
var images = $('.image');


var showImage = function(event){
	// get index for current image
	var index = points.index($(this));
	$('.image:eq('+index+')').removeClass('hiddenImage');
};


var hideImage = function(event){
	var index = points.index($(this));
	$('.image:eq('+index+')').addClass('hiddenImage');
};


points.hover(showImage,hideImage);		

points.click(function(){
	images.removeClass("activeImage");
	var index = points.index($(this));
	$('.image:eq('+index+')').addClass('activeImage');
});

});
</script>
<style type="text/css">
div, span{
border: 1px dotted gray;
}
.hiddenImage{
	visibility:hidden;
}

.activeImage{
	visibility:visible !important;
}
</style>
</head>
<body>

<div id="nav">
<span class="navigationPoint">Aktuelles</span>
<span class="navigationPoint">Themen</span>
<span class="navigationPoint">Informationen</span>
</div>
<div>
<span class="image hiddenImage">Image 1</span>
<span class="image hiddenImage"><img src="http://style.tutorials.de/v6/images/misc/tuts_default.gif"></span>
<span class="image hiddenImage">Image 3</span>
</div>


</body>
</html>

Gruß Konstantin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück