473,699 Members | 2,226 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

changing image size on roll over

I have been trying to write a script that will increase the size of
and image when you mouse over it, and decrease it to original size,
when you mouse out. After a couple of attempts, this is what I've come
up with. In this example, there are 5 images (0 thru 4) all with a
height of 80px. When you mouse over an image, it changes the
growingImage variable equal to the number of the image you mouse over,
when you mouse out, it sets it to 5, which means none of the images,
and runs the chechSize function. All this works fine, except every
time you mouse over an image, the time it takes to grow and shrink
decreases, until it is instantly jumping from small to large, without
transition. Any help fixing that bug would be appreciated, or if you
know a better solution to this problem, I'd love to hear it. Kenny
Here's my code. I only included one image, but there all similar.

var growingImage = 5;
var i = 0;

function resizeImage(ima geNumber) {
document.images[imageNumber].height -= 1
document.images[imageNumber].width -= 1
}

function increaseSizeIma ge(imageNumber) {
document.images[imageNumber].height += 1
document.images[imageNumber].width += 1
}

function checkSize() {
if ((i == growingImage) && (document.image s[i].height < 90)) {
increaseSizeIma ge(i)
}
if ((i != growingImage) && (document.image s[i].height !=80)) {
resizeImage(i)
}
i++
if (i == 5) {i = 0}
setTimeout("che ckSize()", 10)
}

<a href="#" onMouseOver="gr owingImage=0;ch eckSize()"
onMouseOut="gro wingImage=5;che ckSize()"><img src="../images/Adora.jpg"
width="60" height="80" border="0" /></a>
Jul 20 '05 #1
4 16209
DU
Kenny wrote:
I have been trying to write a script that will increase the size of
and image when you mouse over it, and decrease it to original size,
when you mouse out.
[snipped]

Any help fixing that bug would be appreciated, or if you know a better solution to this problem, I'd love to hear it. Kenny


[snipped]

Here's a draft version of what I would do. The following code is valid,
has been tested and is working on Mozilla 1.5 final, K-meleon 0.8, MSIE
6 SP1 for Windows and Opera 7.23. I'm loading the file here since I have
now banner ads on my site and want to avoid that for now until I can
find another solution.
The file is a draft version because I would register event handlers for
the image(s) instead of using event attributes like in the same spirit
of this file:

Continuous modification of an image's opacity
http://www10.brinkster.com/doctorunc...icOpacity.html

Also, your file as submitted was using an embedding anchor for the
image: now, the events could be registered on the image or on the
anchor. The difference is in accessibility and usability: the default
border around links would still need to be there if link is used. I also
saw other usability issues: resorting to setTimeout(expr , 10) is way too
demanding on several systems. I personally never go under 32 msec to
avoid crashes on the users' system: some video cards and system
resources can not perform safely, confortably with DHTML at less than
32msec. In any case, animations faster than 32msec are too fast for the
eyes. If your increase/decrease height needs to be "faster", than
increase the step from 1 to 2 or more. I.e.:
document.getEle mentById("idIma ge").height += 2;

DU

---------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="date" content="2003-12-02T09:54:03+08: 00" />
<meta http-equiv="imagetoo lbar" content="no" />

<title>Dynamica lly enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}
</style>
<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeIma ge() // will get back to its normal default size
{
if(glbInc != null) {clearTimeout(g lbInc); glbInc = null;};
if (document.getEl ementById("idIm age").height > 111)
{
document.getEle mentById("idIma ge").height -= 1;
document.getEle mentById("idIma ge").width -= 1;
glbDec = setTimeout("dec reaseSizeImage( )", 32);
};
}

function increaseSizeIma ge()
{
if(glbDec != null) {clearTimeout(g lbDec); glbDec = null;};
if (document.getEl ementById("idIm age").height < 150)
{
document.getEle mentById("idIma ge").height += 1;
document.getEle mentById("idIma ge").width += 1;
glbInc = setTimeout("inc reaseSizeImage( )", 32);
};
}
// ]]>
</script>

</head>

<body>

<p><a href="#" onmouseover="in creaseSizeImage ();"
onmouseout="dec reaseSizeImage( );"><img id="idImage"
src="http://www10.brinkster .com/doctorunclear/GRAPHICS/JPG/KrustyHelpless. jpeg"
width="113" height="111" alt="Krusty is helpless" /></a></p>

<p id="validation" ><a href="http://validator.w3.or g/check/referrer"><img
src="http://www.w3.org/Icons/valid-xhtml10.png" title="Verify this
page's markup syntax" alt="Valid XHTML 1.0!" /></a> <a
href="http://jigsaw.w3.org/css-validator/check/referer"><img
src="http://www.w3.org/Icons/valid-css.png" title="Verify this page's
CSS code" alt="Valid CSS!" /></a> <a
href="http://www.webstandard s.org"><img
src="http://www10.brinkster .com/doctorunclear/GRAPHICS/GIF/webstandardspro ject.gif"
alt="Web standards project" /></a></p>

</body></html>

DU

Jul 20 '05 #2
DU
DU wrote:
Kenny wrote:
I have been trying to write a script that will increase the size of
and image when you mouse over it, and decrease it to original size,
when you mouse out.

[snipped]

Any help fixing that bug would be appreciated, or if you
know a better solution to this problem, I'd love to hear it. Kenny

[snipped]

Here's a draft version of what I would do. The following code is valid,
has been tested and is working on Mozilla 1.5 final, K-meleon 0.8, MSIE
6 SP1 for Windows and Opera 7.23. I'm loading the file here since I have
now banner ads on my site and want to avoid that for now until I can
find another solution.
The file is a draft version because I would register event handlers for
the image(s) instead of using event attributes like in the same spirit
of this file:

Continuous modification of an image's opacity
http://www10.brinkster.com/doctorunc...icOpacity.html
Also, your file as submitted was using an embedding anchor for the
image: now, the events could be registered on the image or on the
anchor. The difference is in accessibility and usability: the default
border around links would still need to be there if link is used. I also
saw other usability issues: resorting to setTimeout(expr , 10) is way too
demanding on several systems. I personally never go under 32 msec to
avoid crashes on the users' system: some video cards and system
resources can not perform safely, confortably with DHTML at less than
32msec. In any case, animations faster than 32msec are too fast for the
eyes. If your increase/decrease height needs to be "faster", than
increase the step from 1 to 2 or more. I.e.:
document.getEle mentById("idIma ge").height += 2;

DU

---------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="date" content="2003-12-02T09:54:03+08: 00" />
<meta http-equiv="imagetoo lbar" content="no" />

<title>Dynamica lly enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}
</style>
<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeIma ge() // will get back to its normal default size
{
if(glbInc != null) {clearTimeout(g lbInc); glbInc = null;};
if (document.getEl ementById("idIm age").height > 111)
{
document.getEle mentById("idIma ge").height -= 1;
document.getEle mentById("idIma ge").width -= 1;
glbDec = setTimeout("dec reaseSizeImage( )", 32);
};
}

function increaseSizeIma ge()
{
if(glbDec != null) {clearTimeout(g lbDec); glbDec = null;};
if (document.getEl ementById("idIm age").height < 150)
{
document.getEle mentById("idIma ge").height += 1;
document.getEle mentById("idIma ge").width += 1;
glbInc = setTimeout("inc reaseSizeImage( )", 32);
};
}
// ]]>
</script>

</head>

<body>

<p><a href="#" onmouseover="in creaseSizeImage ();"
onmouseout="dec reaseSizeImage( );"><img id="idImage"
src="http://www10.brinkster .com/doctorunclear/GRAPHICS/JPG/KrustyHelpless. jpeg"
width="113" height="111" alt="Krusty is helpless" /></a></p>

<p id="validation" ><a href="http://validator.w3.or g/check/referrer"><img
src="http://www.w3.org/Icons/valid-xhtml10.png" title="Verify this
page's markup syntax" alt="Valid XHTML 1.0!" /></a> <a
href="http://jigsaw.w3.org/css-validator/check/referer"><img
src="http://www.w3.org/Icons/valid-css.png" title="Verify this page's
CSS code" alt="Valid CSS!" /></a> <a
href="http://www.webstandard s.org"><img
src="http://www10.brinkster .com/doctorunclear/GRAPHICS/GIF/webstandardspro ject.gif"
alt="Web standards project" /></a></p>

</body></html>

DU


There is also this file

Dynamic magnification of an image:
http://www10.brinkster.com/doctorunc...MSIE6Zoom.html

but it only works in MSIE 6 for windows (it might work also in MSIE 5.5)
because Mozilla based browsers do not have an equivalent to MSIE's
proprietary style zoom property.
But then it would be easy to make that code work by modifying the image
width and height.
The difference with your code is that here there is no anchor
surrounding the image and the image size is entirely under the user's
control via a mouse drag, which I think is more pleasing for the user.

DU

Jul 20 '05 #3
DU
DU wrote:
DU wrote:

There is also this file

Dynamic magnification of an image:
http://www10.brinkster.com/doctorunc...MSIE6Zoom.html

but it only works in MSIE 6 for windows (it might work also in MSIE 5.5)
because Mozilla based browsers do not have an equivalent to MSIE's
proprietary style zoom property.
But then it would be easy to make that code work by modifying the image
width and height.
The difference with your code is that here there is no anchor
surrounding the image and the image size is entirely under the user's
control via a mouse drag, which I think is more pleasing for the user.

DU


I created an entirely new file which works very well for MSIE 6 for
Windows, Mozilla 1.5, K-meleon 0.8, Opera 7.23 and should work for all
DOM 2 compliant browsers. It works on a click and drag (up or down) user
interaction. The markup and CSS code would be entirely valid if it was
not of the banner ad include.

http://www10.brinkster.com/doctorunc...ification.html

DU

Jul 20 '05 #4

"Kenny" <ke*********@em ail.com> wrote in message
news:3d******** *************** ***@posting.goo gle.com...
I have been trying to write a script that will increase the size of
and image when you mouse over it, and decrease it to original size,
when you mouse out. After a couple of attempts, this is what I've come
up with. In this example, there are 5 images (0 thru 4) all with a
height of 80px. When you mouse over an image, it changes the
growingImage variable equal to the number of the image you mouse over,
when you mouse out, it sets it to 5, which means none of the images,
and runs the chechSize function. All this works fine, except every
time you mouse over an image, the time it takes to grow and shrink
decreases, until it is instantly jumping from small to large, without
transition. Any help fixing that bug would be appreciated, or if you
know a better solution to this problem, I'd love to hear it. Kenny
Here's my code. I only included one image, but there all similar.

var growingImage = 5;
var i = 0;

function resizeImage(ima geNumber) {
document.images[imageNumber].height -= 1
document.images[imageNumber].width -= 1
}

function increaseSizeIma ge(imageNumber) {
document.images[imageNumber].height += 1
document.images[imageNumber].width += 1
}

function checkSize() {
if ((i == growingImage) && (document.image s[i].height < 90)) {
increaseSizeIma ge(i)
}
if ((i != growingImage) && (document.image s[i].height !=80)) {
resizeImage(i)
}
i++
if (i == 5) {i = 0}
setTimeout("che ckSize()", 10)
}

<a href="#" onMouseOver="gr owingImage=0;ch eckSize()"
onMouseOut="gro wingImage=5;che ckSize()"><img src="../images/Adora.jpg"
width="60" height="80" border="0" /></a>


I see your problem. When you do a mouseover, you register a timeout, that
continues to register itself again, and does not stop. When you do another
mouseover, you register a second timeout, which continues to register
itself, causing the function to be called twice as often, making it work
twice as fast. The same pattern continues to happen, until there are so
many callbacks registered, that the action happens almost immediately.

There are two ways to solve this... Either put some conditional logic around
the setTimeout call, to stop calling it when your action is done... or save
the ID that setTimeout returns in a global variable, and call clearTimeout
on that value for each mouseover, thus killing the previous routine.

My guess is that a combination of both options will be most useful... The
first one to stop the timeout from occuring when it is no longer needed, and
the second one to make sure if the first one is still running, it gets
killed, so two are not running at the same time.

Brian
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
1232
by: Lee David | last post by:
I am using javascript to swap images when the mouse is over a "button" image. I created these with Fireworks and when I look at them in window explorer I see they all (all three "states") are relatively the same size within 1-2 pixels. This is confirmed by checking the properties with the mouse over them. Yet when I "hover", I get a wide image and not the one I expected. I used Visual Interdev to build the site and checked their...
3
2424
by: Michael Eisenstadt | last post by:
What are the coding options for client-side image size changing? I want the viewer to be able to switch between two different sizes of the same image with his/her mouse. Thanks in advance for your help. Michael Eisenstadt
7
2713
by: sonic | last post by:
Hello, I am cloning a table row which contains images that have behaviors attached to them as well as onclick events. The problem is that the cloned row seems to be executing the behavior/events on the original rows image. I overwrote the onclick as well as attached a behavior to the image in cloned row, but events such as onmouseover execute now on both images when the duplicate is mouse overed.
5
2726
by: Jerry | last post by:
Hello! I have an image that uses an image map for navigation. We would like a pull-down menu to appear when the user mouses over the link. The pull-down menu is another image that was created to retain the look of the site and would use another image map for it's links. Is this possible? If so, can someone give me a URL so I can see how others did this?
4
3046
by: lindsey.crocker | last post by:
I have this links list with background images set on them which changes when they roll over. The <td> is set valign="middle" however as soon as you apply the rollover to the link, the text jumps to the top of the <td> instead of staying middle. I can not put padding on the top as some links are 2 lines and some are 1 line.
7
2456
by: simchajoy2000 | last post by:
Hi, I am just a javascript beginner so maybe this is a simple problem but I am trying to do some rollovers on images in a separate <div>. Here is the relevent piece of my code: <html> <head> <script type="text/javascript"> if (document.images) {
4
1380
by: Tim Streater | last post by:
I have a small image on my web page that, when clicked, does some javascript stuff which changes the page. To highlight that this has happened, I want to replace the image with another. Each is a 16x16 pixel image. The images are pre-loaded: var image_g = new Image (16, 16); var image_r = new Image (16, 16); image_g.src = 'pics/arrow-g.jpg';
7
2638
by: simon2x1 | last post by:
I create a css that will make the text on my html page change colour when the mouse is on it but on the page when i roll over the mouse to an image that i link it also change colour how can i make the image not to change colour it should just be normal when roll over
0
8689
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8618
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9178
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
6534
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4376
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4631
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3058
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2348
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2010
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.