image zoom on hover

**Chadi** · 05-13-2007, 07:18 PM

Can someone recommend a lightweight script that makes images zoom (smooth transition, not popup style) on mouse hover? Something like osx's widget menu on bottom.

Thanks.

**riptide** · 05-14-2007, 06:39 PM

read.

then you are going to need as many images as you want stages.

put it into and array and call it with a function. Just use animation function with onmuseover. but you want to talke out the par t where it resets the images back to the first one.

**coothead** · 05-14-2007, 06:51 PM

Hi there Chadi,

here is an example...

http://mysite.orange.co.uk/azygous/zoom.html

...and here is the code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#000;
 }
#pic{
    width:16px;
    height:12px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-6px;
    border:3px double #fff;
 }
</style>

<script type="text/javascript">
   var c=16;
   var obj;
   var zoom;
window.onload=function() {
   obj=document.getElementById('pic')
   obj.onmouseover=function() {
   zoooom();
 }
   obj.onmouseout=function() {
   clearTimeout(zoom);
   c=16;
   obj.style.marginLeft=-c/2+'px';
   obj.style.marginTop=-3*c/8+'px';
   obj.style.width=c+'px';
   obj.style.height=3*c/4+'px';
  }
 }
function zoooom() {
if(c>800) {
   return;
 } 
   obj.style.marginLeft=-c/2+'px';
   obj.style.marginTop=-3*c/8+'px';
   obj.style.width=c+'px';
   obj.style.height=3*c/4+'px';
   c+=4;
   zoom=setTimeout('zoooom()',25);
 }
</script>

</head>
<body>

<div>
<img id="pic" src="images/col.jpg" alt=""/>
</div>

</body>
</html>

coothead

**Chadi** · 05-14-2007, 06:52 PM

Thanks, I'll try that

What part of the code will speed up the zoom, then reset back to normal size
on mouse out? I'd like it to zoom in and out at 150ms.

The small size is 36px, the zoom should be 48px.

**riptide** · 05-14-2007, 07:12 PM

I said you need more images. you should have like 5 from 36 to 48.

yeah on mouseout will work.

**tech_support** · 05-15-2007, 09:00 AM

Originally Posted by riptide

I said you need more images. you should have like 5 from 36 to 48.

yeah on mouseout will work.

Huh?
A more friendlier message might help

Originally Posted by Chadi

Thanks, I'll try that

What part of the code will speed up the zoom, then reset back to normal size
on mouse out? I'd like it to zoom in and out at 150ms.

The small size is 36px, the zoom should be 48px.

Try this:
A slightly modified version of coothead's script that supports multiple images.

How to use:
- Insert class="growme" on every image you want to grow
- The configuration is in the script (max size, min size, and speed)

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zoom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#000;
 }
.growme{
	padding-left:50px;
}
#wrapper	{
	text-align:center;
	margin:0 auto;
	top:50&#37;;
	position:absolute;
	width:99%;
}
</style>

<script type="text/javascript">
var c=72; //Starting size
var maxsize = 800; //Maximum Size
var minsize = 72; //Minimum Size
var speed=1; //1: Fastest
var obj,myzoom;

function zoomMyImages()	{
	var e = document.getElementsByTagName("img")
	for (var i=0; i < e.length; i++)	{
		if (e[i].getAttribute('class')=="growme")	{
			e[i].setAttribute('onmouseover','zoom(this)');
			e[i].setAttribute('onmouseout','unzoom(this)');
			e[i].style.marginLeft=-minsize/2+'px';
			e[i].style.marginTop=-3*minsize/8+'px';
			e[i].style.width=minsize+'px';
			e[i].style.height=3*minsize/4+'px';
		}
	}
}
window.onload=zoomMyImages;

function zoom(obj) {
	if(c>maxsize) return
	obj.style.marginLeft=-c/2+'px';
	obj.style.marginTop=-3*c/8+'px';
	obj.style.width=c+'px';
	obj.style.height=3*c/4+'px';
	c+=4;
	myzoom=setTimeout(function(){zoom(obj)},speed);
}
function unzoom(obj) {
	if(c<minsize) return
	
	clearTimeout(myzoom);
	obj.style.marginLeft=-c/2+'px';
	obj.style.marginTop=-3*c/8+'px';
	obj.style.width=c+'px';
	obj.style.height=3*c/4+'px';
	c=c-4;
	myzoom=setTimeout(function(){unzoom(obj)},speed);
}
</script>

</head>
<body>
<div id="wrapper">
<img src="http://mysite.orange.co.uk/azygous/images/col.jpg" alt="" class="growme">
<img src="http://gimmecorn.com/images/cow_800.jpg" alt="" class="growme">
</div>
</body>
</html>

**riptide** · 05-15-2007, 05:29 PM

I was going to say use something like this with as many images ranging in sizes. then just change it to on hover and change the part where it set the images back to 0.

Code:

<script type="text/javascript">

var img0 = new Image( 50, 50 );
img0.src = "http://i3.photobucket.com/albums/y73/JadetheG/cassandra6.jpg";

var img1 = new Image( 50, 50 );
img1.src = "http://i3.photobucket.com/albums/y73/JadetheG/cassandra5.jpg";

var img2 = new Image( 50, 50 );
img2.src = "http://i3.photobucket.com/albums/y73/JadetheG/cassandra4.jpg";

var img3 = new Image( 50, 50 );
img3.src ="http://i3.photobucket.com/albums/y73/JadetheG/cassandra3.jpg";

var img4 = new Image( 50, 50 );
img4.src = "http://i3.photobucket.com/albums/y73/JadetheG/cassandra4.jpg";

var img5 = new Image( 50, 50 );
img5.src = "http://i3.photobucket.com/albums/y73/JadetheG/cassandra5.jpg"



var i = 0;
var nbImg = 6; // change to the number of different images you have
function animate() {
  document.cassmain.src = eval("img" + i ).src;
  i++;
  if (i == nbImg) i=0; 
  junk = setTimeout("animate();", 500); // in milliseconds
  }
</SCRIPT>
</HEAD><BODY onload="animate()">
<IMG src="http://www.google.com/intl/en_ALL/images/logo.gif" width=100 height=100>

<IMG src="http://i3.photobucket.com/albums/y73/JadetheG/cassandra3.jpg" name="cassmain" width=50 height=50 >
<IMG src="http://www.google.com/intl/en_ALL/images/logo.gif" width=100 height=100>

but it may be better to see if you could use a function to change the size of a div holding the larger image. If the image was a background on no repeat you really could do something.

**Chadi** · 05-16-2007, 06:18 PM

Thanks for the help. Just a couple issues:

My code now (after modifying)

Code:

<script type="text/javascript">
var c=36; //Starting size
var maxsize = 64; //Maximum Size
var minsize = 36; //Minimum Size
var speed=2; //1: Fastest
var obj,myzoom;

function zoomMyImages()	{
	var e = document.getElementsByTagName("img")
	for (var i=0; i < e.length; i++)	{
		if (e[i].getAttribute('class')=="growme")	{
			e[i].setAttribute('onmouseover','zoom(this)');
			e[i].setAttribute('onmouseout','unzoom(this)');
			e[i].style.marginLeft=-minsize/2+'px';
			e[i].style.marginTop=-3*minsize/8+'px';
			e[i].style.width=minsize+'px';
			e[i].style.height=3*minsize/4+'px';
		}
	}
}
window.onload=zoomMyImages;

function zoom(obj) {
	if(c>maxsize) return
	obj.style.marginLeft=-c/2+'px';
	obj.style.marginTop=-3*c/8+'px';
	obj.style.width=c+'px';
	obj.style.height=3*c/4+'px';
	c+=4;
	myzoom=setTimeout(function(){zoom(obj)},speed);
}
function unzoom(obj) {
	if(c<minsize) return
	
	clearTimeout(myzoom);
	obj.style.marginLeft=-c/2+'px';
	obj.style.marginTop=-3*c/8+'px';
	obj.style.width=c+'px';
	obj.style.height=3*c/4+'px';
	c=c-4;
	myzoom=setTimeout(function(){unzoom(obj)},speed);
}
</script>

One problem is that it somehow added some space between the image (icon) and the text below it.

The image code area is like this:

Code:

		<td align="center" style="border-right: 1px solid #E4E6F5; height: 50px; width: 74px;">
		<a href="http://www.talkjesus.com/arcade.php">
		<img border="0" src="/images/JoystickSZ.png" alt="Arcade" class="growme"/></a></td>

**riptide** · 05-16-2007, 06:55 PM

do you have the page up so I can see it?

**Chadi** · 05-16-2007, 06:59 PM

http://www.talkjesus.com/

The 9 icons, the first one (Arcade) is an example.

There is that extra space between the icon and text that says "Arcade".

Thread: image zoom on hover

Thread Tools

Search Thread

image zoom on hover

Bookmarks

Bookmarks

Posting Permissions