• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover/Onclick Problem

N

Netti

Neues Mitglied
Ich bin gerade dabei eine neue Webseite zu erstellen und bekomme meine Galerie einfach nicht so, wie ich sie haben will:
Es sieht so aus, dass ich an der linken Seite permanent ein Bild (zum besseren Verständnis sage ich jetzt einfach mal) in einem Fotorahmen habe. Meine Galerie will ich jetzt so gestalten, dass wenn man mit der Maus über ein Thumbnail fährt, das Bild in dem Fotorahmen ausgetauscht wird, also eine kleine Vorschau von dem Bild angezeigt wird, wo man gerade drüberfährt. Wenn man das Thumbnail anklickt, soll die "Vollversion" des Bildes angezeigt werden, am liebsten in einer Art Lightbox, zur Not aber auch in einem neuen Fenster.

Hier nochmal ein Demobild, damit ihr euch das besser vorstellen könnt: dummy.jpg

Ich habe schon verschiedene Scripts ausprobiert, bekomme aber immer nur eins von beidem hin. Wenn ich es zum Beispiel schaffe, dass beim Mouseover das Vorschaubild angezeigt wird, wird dasselbe Bild beim Anklicken in einem neuen Fenster angezeigt... Könnt ihr mir weiterhelfen? :cry:
 
Da wüsste ich gar nicht welches ich euch zeigen soll, weil die alle Macken haben... Gibt es denn keine einfache Möglichkeit, ein Bild bei Mouseover in einem bestimmten div anzeigen zu lassen und ein anderes beim Anklicken in einem neuen Fenster?
 
Ich würde sagen du musst jedem Thumbnail "mouseover = 'loadIntoDiv(test.png)'" geben und dann in der Funktion einfach das Div über
HTML: 
function loadIntoDiv(img){
document.getElementById('vorschaudiv').innerHTML = "<img src="+img+" alt='Irgendwas' />";
}
befühlen.
In CSS kannst du dann dem Bild noch Formatierungen geben ;-)

Und wenn du dann beim Klick das Bild groß haben willst, musst du am besten auch erst mal ein Div machen, welches einen höheren Z-Index als der Content hat. In dieses Div kannst du dann auch mit einer Funktion das entsprechende Bild laden.
 
Ich glaube ich habe noch einen kleenen Fehler entdeckt, yss ;)
Code: 
function loadIntoDiv(img){
document.getElementById('vorschaudiv').innerHTML = "[COLOR=#800080]<img src=[/COLOR][COLOR=Red]'"+img+"'[/COLOR] [COLOR=#800080]alt='Irgendwas' />[/COLOR]";
}
 
Furien schrieb:
Ich glaube ich habe noch einen kleenen Fehler entdeckt, yss ;)
Code: 
function loadIntoDiv(img){
document.getElementById('vorschaudiv').innerHTML = "[COLOR=#800080]<img src=[/COLOR][COLOR=Red]'"+img+"'[/COLOR] [COLOR=#800080]alt='Irgendwas' />[/COLOR]";
}
Zum Vergrößern anklicken....

Stimmt, so was kommt halt raus wenn man es hier gleich eintippt, in meinem Editor wäre das durch die Farbunterschiede gleiche sichtbar gewesen xD
 
Ok, hab den Fehler, man muss das Bild in "" als Parameter übergeben, habe das mal schnell gemacht, kannst es hier anschauen: BilderPage
Wenn du dann auf die Lightbox klickst, geht sie weg ;-)
Hier der Quellcode dazu:
HTML: 
<html>
<head>
	<title>Fotos</title>
	<style type="text/css" media="screen">
	body{
		margin: 0px;
	}
	#bilddiv{
		width: 200px;
		height: 200px;
		float: left;
		background-color: silver;
		position: fixed;
	}
	#bilddiv > img{
		width: 200px;
		height: 200px;
	}
	#thumbdiv{
		width: 400px;
		height: 200px;
		margin-left: 200px;
		margin-top: 0px;
		position: fixed;
		background-color: fuchsia;
		
	}
	.thumb{
		width: 50px;
		height: 50px;
		margin-left: 10px;
		margin-top: 10px;
		float: left;
		background-color: blue;
	}
	#lightbox{
		width: 400px;
		height: 400px;
		margin-left: 300px;
		margin-top: 150px;
		background-color: green;
		z-index: 100;
		position: fixed;
		visibility: hidden; 
	}
	#lightbox > img{
		width: 400px;
		height: 400px;
	}
	</style>
	<script type="text/javascript">
		function loadIntoDiv(img){
			document.getElementById('bilddiv').innerHTML = '<img alt="KP" src="'+img+'" />';
		}
		
		function deleteImg(){
			document.getElementById('bilddiv').innerHTML = '';
		}
		
		function loadIntoLightbox(img){
			document.getElementById('lightbox').style.visibility = 'visible';
			document.getElementById('lightbox').innerHTML = '<img alt="KP" src="'+img+'" />';
		}
		
		function hideLightbox(){
			document.getElementById('lightbox').innerHTML = '';
			document.getElementById('lightbox').style.visibility = 'hidden';
		}
	</script>
</head>
<body>
	<div id="bilddiv">
	
	</div>
	<div id="lightbox" onclick="hideLightbox()"></div>
	<div id="thumbdiv">
	<img class="thumb" src="mac.jpg" onclick="loadIntoLightbox('mac.jpg')" onmouseover="loadIntoDiv('mac.jpg')" onmouseout="deleteImg()" alt="Mac1" />
	<img class="thumb" src="mac2.jpg" onclick="loadIntoLightbox('mac2.jpg')" onmouseover="loadIntoDiv('mac2.jpg')" onmouseout="deleteImg()" alt="Mac2" />
</body>
</html>

Noch besser ist die Version:
HTML: 
<!--Css-->
	<script type="text/javascript">
		function loadIntoDiv(img){
			img = img.src;
			document.getElementById('bilddiv').innerHTML = '<img alt="KP" src="'+img+'" />';
		}
		
		function deleteImg(){
			document.getElementById('bilddiv').innerHTML = '';
		}
		
		function loadIntoLightbox(img){
			img = img.src;
			document.getElementById('lightbox').style.visibility = 'visible';
			document.getElementById('lightbox').innerHTML = '<img alt="KP" src="'+img+'" />';
		}
		
		function hideLightbox(){
			document.getElementById('lightbox').innerHTML = '';
			document.getElementById('lightbox').style.visibility = 'hidden';
		}
	</script>
</head>
<body>
	<div id="bilddiv">
	
	</div>
	<div id="lightbox" onclick="hideLightbox()"></div>
	<div id="thumbdiv">
	<img class="thumb" src="mac.jpg" onclick="loadIntoLightbox(this)" onmouseover="loadIntoDiv(this)" onmouseout="deleteImg()" alt="Mac1" />
	<img class="thumb" src="mac2.jpg" onclick="loadIntoLightbox(this)" onmouseover="loadIntoDiv(this)" onmouseout="deleteImg()" alt="Mac2" />
</body>
</html>
 
Zuletzt bearbeitet:
Wie kommst Du denn auf die Idee ein Bild in ein leeres div zu setzen? Ich würde dort gleich den img-Tag in den HTML-Code schreiben und nur den Wert des src austauschen.

Denn so wie Du es gebaut hast (und was momentan unter dem Link zu sehen ist) wird das div dann zwar "eingeblendet", man sieht dort aber kein Bild drinne, weil

Code: 
[object HTMLImageElement]

durch JavaScript in das src-Attribut gesetzt wird. Das liegt daran, dass Du unter dem Link gerade "loadIntoDiv(this)" schreibst. Du müsstest entweder "loadIntoDiv(this.src)" oder "loadIntoDiv('bild.jpg')" schreiben.
 
Also bei mir geht es wunderbar ;-)
Natürlich kann man den img-Tag gleich einbauen, diese kleine Seite soll ja auch nur das Grundprinzip zeigen, wie SIE es auf ihrer Seite dann einbauen kann ;-)
"loadIntoDiv(this.src)"
Zum Vergrößern anklicken....
Dieses mache ich doch dann in der Funktion, ich nehme "src", also "[object HTMLImageElement]" und von diesem Element das Attribut src ;-)
img = img.src;
Zum Vergrößern anklicken....
Habe es im Safari, Firefox, Opera und Chrome getestet ;-)
 
Zuletzt bearbeitet:
hallo hallo!

könnt ihr mir vielleicht sagen wie ich das ganze veränder wenn ich nur ein div haben will wo die bilder reingeladen werden und ein div wo die thumbs drin sind?

also ohne diese lightbox oder ähnliches.

ein layer wo zu beginn ein bild drin ist, was sich austauscht, wenn ich auf ein kleines thumb klicke.

könnt ihr da helfen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben