mouse over img script

**__Doc_** · 21st Sep 2012, 03:13 AM

anyone got a script for when you mouse over a link (<A>) or an img it will show a larger version of it in a popup, but not full size. I dont want the img being larger than teh screen and going off screen.. kinda like how 4chanX expands the img when you hover over it and it follows the cursor..if the image is too large its resized and it never goes off screen

I currently have a script, but it does what I dont want. If the image is on the right side and you hover over it, it will expand to the right and you cant see the image. You also can only view the fullsize image. So if the image is 2000x2500 -- youll miss half the image because its off screen.

jQuery prefered

Ive tried damn near everything.

any help is appreciated

---------- Post added at 11:13 PM ---------- Previous post was at 10:25 PM ----------

If noone has a script for that. Can you help me modify my existing code so it doesnt load the image offscreen

__Doc_ Reviewed by __Doc_ on 21st Sep 2012. mouse over img script anyone got a script for when you mouse over a link (<A>) or an img it will show a larger version of it in a popup, but not full size. I dont want the img being larger than teh screen and going off screen.. kinda like how 4chanX expands the img when you hover over it and it follows the cursor..if the image is too large its resized and it never goes off screen I currently have a script, but it does what I dont want. If the image is on the right side and you hover over it, it will expand to the Rating: 5

**Lock Down** · 21st Sep 2012, 01:48 PM

Lightbox is one. Highslide is another.

**__Doc_** · 21st Sep 2012, 05:09 PM

Don't want lightbox or any gallery script

Just simple img pop up next to the mouse

thanks for the reply!!

**Lock Down** · 21st Sep 2012, 09:32 PM

I guess you just want to pop a window with the largest width and length without going outside browser size.

Code:

<html>
<head>
<script language='JavaScript'> 
 function getImgSize(imgSrc)
 {
		 var hp = 0.00; 
		 var wp = 0.00; 
		 var pct = 0.00;
		 var newImg = new Image();
		 newImg.src = imgSrc;
		 if (newImg.height > self.innerHeight) {hp=self.innerHeight/newImg.height;} 
		 if (newImg.width > self.innerWidth)   {wp=self.innerWidth/newImg.width;}
		 if (hp<wp) {pct = hp; } else { pct = wp; } if (pct == 0) { pct =100;}
		 my_window = window.open("", "mywindow1", "status=1,width="+hp*newImg.width+",height="+hp*newImg.height);
		 my_window.document.write('<img  height='+hp*newImg.height+' width='+hp*newImg.width+'  src="'+newImg.src+'" >');
 }
</script>
	</head>
<body>
 <IMG id='demoImg' width=15% src="yourImage.jpg" onMouseOver="getImgSize(document.getElementById('demoImg').src);"><br>	
<div width=100%>	
</div>
</body></html>

**__Doc_** · 24th Sep 2012, 06:57 PM

Bump

Anyone here have experience with jQuery and can help me fix my code? I can pm you my jsfiddle

**t3od0r** · 25th Sep 2012, 09:36 AM

why you don't post the link here ....

mouse over img script

Thread Tools

Display

mouse over img script

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

What Is your Mouse Clicking Speed

What mouse do you use?

Track pad vs Mouse

Mouse Vs Keyboard

Which mouse to buy?

Tags for this Thread

Posting Permissions

themaPoster - post to forums and...

themaCreator - create posts from...

themaPoster - post to forums and...

themaPoster - post to forums and...

themaCreator - create posts from...