• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Bild vergrößern onmouseover

P

pfcrime

New member
Hi ich hab mal versucht ein Bild zu Vergrößern mit onmouseover und onmouseout.
Bin JS Anfänger und hab das mal so probiert:


JS
Code: 
function bild1() {
	document.getElementById("bild1").onmouseout = "<img src='../jpg/1.jpg' widht='200' hight='200'>";
	document.getElementById("bild1").onmousover = "<img src='.../jpg/1.jpg' width='400' height='400'>";
}


HTML: 
<div id="bild1"><img src="../jpg/1.jpg" width="200" height="200"></div>
<input type="image" onmouseover="bild1()" onmouseout="bild1()"/>

funktioniert natürlich nicht :D
Kann mir jemand sagen was ich noch falsch mache?
 
pfcrime schrieb:
Code: 
function bild1() {
	document.getElementById("bild1").onmouseout = "<img src='../jpg/1.jpg' widht='200' hight='200'>";
	document.getElementById("bild1").onmousover = "<img src='.../jpg/1.jpg' width='400' height='400'>";
}
Zum Vergrößern anklicken....
  • Wenn du es unbedingt auf diese Weise machen willst, dann musst du schon .innerHTML verwenden (ist aber in diesem Fall suboptimal).
  • Eventlistener werden so nicht zugeordnet - sie erwarten eine Funktionsreferenz. Außerdem feuert onmouseover ständig, wenn die Maus über dem Bild bewegt wird. Stattdessen gibt es dafür mouseenter.
  • Beim Entwickeln solltest du unbedingt die Fehlerkonsole verwenden!
  • Ich täte dir auf jeden Fall empfehlen, dir einmal die Grundlagen von JavaScript genauer anzuschauen. Ein gute Quelle ist z.B. Mozilla Developer Network oder für das "spielerische" Lernen JavaScript | Codecademy
Code: 
function bild1() {
	document.getElementById("bild1").onmouseout = function(){
		document.getElementById("bild1").innerHTML = "<img src='../jpg/1.jpg' width='200' height='200'>";
	}
	document.getElementById("bild1").onmouseover = function(){
		document.getElementById("bild1").innerHTML = "<img src='../jpg/1.jpg' width='400' height='400'>";
	}
}



Eine saubere Lösung:
HTML: 
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>Bild bei darüber gehaltenem Cursor vergrößern</title>
	<script>
		function scaleImage(){
			var img, defaultWidth, defaultHeight, scale;
			img = document.getElementById("bild1");
			img.onmouseenter = function(){
				defaultWidth = img.width;
				defaultHeight = img.height;
				scale = 2; //um den Faktor 2 skalieren
				img.width = defaultWidth * scale;
				img.height = defaultHeight * scale;
				img.onmouseleave = function(){
					img.width = defaultWidth;
					img.height = defaultHeight;
				}
			}
		}
		if("addEventListener" in document){
			document.addEventListener("DOMContentLoaded", scaleImage, false);
		}
		else{
			window.attachEvent("onload", scaleImage);
		}
	</script>
</head>
<body>
	<img src="http://forum.jswelt.de/jpg/1.jpg" width="200" height="200" id="bild1" alt="1.jpg">
</body>
PS: du solltest dringend genauer arbeiten - widht ist nicht das Gleiche wie width und hight nicht das Gleiche wie height...
 
j-l-n schrieb:
Außerdem feuert onmouseover ständig, wenn die Maus über dem Bild bewegt wird.
Zum Vergrößern anklicken....

Das ist nicht ganz korrekt. onmouseover feuert immer, wenn man über irgendein Element drübergeht - also auch wenn man über Elemente innerhalb des Zielelements drübergeht. Da ein <img> keine Kinderelemente haben kann, verhält es sich also identisch zu mouseenter.
 
kkapsner schrieb:
Das ist nicht ganz korrekt. onmouseover feuert immer, wenn man über irgendein Element drübergeht - also auch wenn man über Elemente innerhalb des Zielelements drübergeht.
Zum Vergrößern anklicken....
Ja, stimmt - hatte das noch falsch in Erinnerung von meiner letzten Bastelei an den "CSS-WebNotifications"...
 
ich habe es jetzt nochmal so probiert:

JS
Code: 
//Bild vergrößern
function scaleImageUp() {
	document.getElementById().style.height="400px";
	document.getElementById().style.width="400px";
}
function scaleImageDown(){
	document.getElementById().style.height="200px";
	document.getElementById().style.width="200px";
}

HTML: 
<img onmouseover="scaleImageUp();" onmouseout="scaleImageDown();" src="../jpg/1.jpg">

Was stimmt hier noch nicht?
 
getElementById() erwartet als Parameter eine ID.
Du kannst aber die Node auch gleich übergeben, wenn du es unbedingt mit den Inline-Eventlistenern machen willst:
Code: 
function scaleImageUp(element) {
	element.style.height="400px";
	element.style.width="400px";
}
function scaleImageDown(element){
	element.style.height="200px";
	element.style.width="200px";
}

HTML: 
<img onmouseover="scaleImageUp(this);" onmouseout="scaleImageDown(this);" src="../jpg/1.jpg">

PS: mit einem kurzen Blick in die Fehlerkonsole hättest du den Fehler identifizieren können:
j-l-n schrieb:
Beim Entwickeln solltest du unbedingt die Fehlerkonsole verwenden!
Zum Vergrößern anklicken....
PPS: was spricht gegen meine Lösung?
 
Warum eigentlich über JS, wenn sowieso feste Größen verwendet werden? Dann kann man das viel einfacher und robuster mit CSS machen:
HTML: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.zoomable {
	width: 100px;
	height: auto;
}
.zoomable:hover {
	width: 200px;
}
</style>
</head>
<body>
<img src="http://www.wallpaper-area.to/wallpaper/13/323/3D_002.jpg" class="zoomable">
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben