PDA

View Full Version : 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...

<!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
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 :)



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)

<!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.


<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)



<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:



<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".

riptide
05-16-2007, 07:07 PM
It's not doing anything. By the way nice icons

Chadi
05-16-2007, 07:16 PM
Here is a problem I have also:

1. It loads 256x256 first before reducing to 36px

2. The icons are of poor quality when reduced to 36px using width/height code, even though they are high quality 256x256px png images. How can I correct this?

What do you mean its not doing anything? If you hover over the joystick, it increases/decreases but the problem is the spacing.

riptide
05-16-2007, 10:01 PM
it's not working when I do it.

sometimes when you put a script on a forum; something that worked won't work when you have add the PHP name to it. It happen to my script.

djr33
05-16-2007, 10:54 PM
1. Loading may be a problem of the browser. Playing with the height and width parameters in the tag and/or specifying them with css may affect this. One way or another might create a different priority for the browser. My guess would be that CSS would overrule anything else, though this may not be the case.

2. The quality is that the browser is resizing it on the fly. Each browser does this differently. Some browser (not one that I know of) may do a beautiful job, but most don't. This is, in a few words, due to something called reinterpolation. In an image editing application, a resized picture is recalculated to average out all of the values of pixels as it is resized. In a browser, or a low end application, this process is not done to save time and simply replaced by using every 4th pixel, or something like that, creating a chunky looking image.
There is nothing you can do to change this behavior in the browser.
The only way around this would be to code it in a different way, by having seperate (pre-created) files for the thumbnail and larger image, but in doing this you would lose the nice preloading aspect of having the image already there, just smaller. It would also take some recoding, though I haven't looked closely enough to see how much.

As for PHP.... nah. PHP doesn't change the functionality of html. I guarantee that if you take any html page and place it on your server as .php that it will be identical. PHP only adds that it also parses PHP code.
This is much more likely a problem of interaction with existing elements of code in your page (some of which may or may not be generated by the PHP, though their origin is irrelevant). Do you have other scripts on the page that might be conflicting?

To prove that it is not the PHP, click view>source, copy, paste into a new .html document and try that. It still won't work.
(You must look at the generated source, since PHP code will cause trouble in a just html page, and that will be the same output anyway, since PHP is parsed before javascript is ever seen by the browser.)

Linking to your page will help someone (probably not me as I'm not a JS expert) look at what may be conflicting.