Dynamically enlarge image on mouseover and mouseout

Question

hobo38 0 Newbie Poster

17 Years Ago

I need help with a java script that increases image size and decreases on mouseover and mouseout for multiple images per page. In an html page.

This script that I have tried to modify is for one image.

Can anyone help me with this, please.

Jerry

Here is the html page code:

<!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="imagetoolbar" content="no" />

<title>Dynamically enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}
#apDiv1 {
    position:absolute;
    left:361px;
    top:161px;
    width:186px;
    height:144px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:306px;
    top:127px;
    width:300px;
    height:164px;
    z-index:1;
}
#apDiv3 {
    position:absolute;
    left:188px;
    top:116px;
    width:100px;
    height:75px;
    z-index:1;
}
#apDiv4 {
    position:absolute;
    left:387px;
    top:113px;
    width:100px;
    height:75px;
    z-index:2;
}
</style>


<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeImage() // will get back to its normal default size
{
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById("image1").height > 100)
{
document.getElementById("image1").height -= 30;
document.getElementById("image1").width -= 40;
glbDec = setTimeout("decreaseSizeImage()", 32);
};
}

function increaseSizeImage()
{
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById("image1").height < 216)
{
document.getElementById("image1").height += 30;
document.getElementById("image1").width += 40;
glbInc = setTimeout("increaseSizeImage()", 32);
};
}
// ]]>
</script>

</head>

<body>
<div id="apDiv3"><a href="#" onmouseover="increaseSizeImage();"
onmouseout="decreaseSizeImage();"><img id="image2"
src="images/plastic/HDPE/HDPE COLOR.jpg" width="100" height="75" alt="color" id="image2" /></a></div>
<p>&nbsp;</p>
<div id="apDiv4"><a href="#" onmouseover="increaseSizeImage();"
onmouseout="decreaseSizeImage();"><img id="image1"
src="plastic/hdpe/HDPE Parts.JPG"
width="100" height="75" alt="Krusty is helpless" /></a></div>
<p>&nbsp;</p>

<p id="validation">&nbsp;</p>

</body></html>

javascript

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

8 Contributors
13 Replies
3K Views
2 Years Discussion Span
Latest Post 15 Years Ago Latest Post by hoping2

martin5211 37 Posting Whiz in Training

17 Years Ago

You can pass the image id as parameter in functions:

<!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="imagetoolbar" content="no" />

<title>Dynamically enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}
#apDiv1 {
position:absolute;
left:361px;
top:161px;
width:186px;
height:144px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:306px;
top:127px;
width:300px;
height:164px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:188px;
top:116px;
width:100px;
height:75px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:387px;
top:113px;
width:100px;
height:75px;
z-index:2;
}
</style>


<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeImage(image) // will get back to its normal default size
{
var id = image;
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById(id).height > 100)
{
document.getElementById(id).height -= 30;
document.getElementById(id).width -= 40;
glbDec = setTimeout("decreaseSizeImage('"+id+"')", 32);
};
}

function increaseSizeImage(image)
{
var id = image;
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById(id).height < 216)
{
document.getElementById(id).height += 30;
document.getElementById(id).width += 40;
glbInc = setTimeout("increaseSizeImage('"+id+"')", 32);
};
}
// ]]>
</script>

</head>

<body>
<div id="apDiv3"><a href="#" onmouseover="increaseSizeImage('image2');"
onmouseout="decreaseSizeImage('image2');"><img id="image2"
src="avatar196367_1.gif" width="100" height="75" alt="color" id="image2" /></a></div>
<p>&nbsp;</p>
<div id="apDiv4"><a href="#" onmouseover="increaseSizeImage('image1');"
onmouseout="decreaseSizeImage('image1');"><img id="image1"
src="avatar196367_1.gif"
width="100" height="75" alt="Krusty is helpless" /></a></div>
<p>&nbsp;</p>

<p id="validation">&nbsp;</p>

</body></html>

martin5211 37 Posting Whiz in Training

17 Years Ago

Suggestions (maybe one will be enough)

- <div> with more width
- getElementById(id).height with lower value in the condition
- <div> with auto margins or without width property in CSS.

martin5211 37 Posting Whiz in Training

17 Years Ago

Another solution is changing z-index on divs, with z-index you could locate an image over another and build a custom header layout too. Higher values put the image on the top.
This is the trick:

getElementById(--id--).style.zIndex += 1

I've enclosed the source code again with new modifications

resize.php (2.49 KB)

<!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="imagetoolbar" content="no" />

<title>Dynamically enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}
#apDiv1 {
position:absolute;
left:361px;
top:161px;
width:186px;
height:144px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:306px;
top:127px;
width:300px;
height:164px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:188px;
top:116px;
width:100px;
height:75px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:387px;
top:113px;
width:100px;
height:75px;
z-index:2;
}
</style>


<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeImage(image,div) // will get back to its normal default size
{
var id = image;
var idDiv = div;
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById(id).height > 100)
{
document.getElementById(id).height -= 10;
document.getElementById(id).width -= 15;
glbDec = setTimeout("decreaseSizeImage('"+id+"','"+div+"')", 32);
};
}

function increaseSizeImage(image,div)
{
var id = image;
var idDiv = div;
document.getElementById(idDiv).style.zIndex += 1;
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById(id).height < 220)
{
document.getElementById(id).height += 10;
document.getElementById(id).width += 15;
glbInc = setTimeout("increaseSizeImage('"+id+"','"+div+"')", 32);
};
}
// ]]>
</script>

</head>

<body>
<div id="apDiv3"><a href="#" onmouseover="increaseSizeImage('image2','apDiv3');"
onmouseout="decreaseSizeImage('image2','apDiv4');"><img id="image2"
src="avatar196367_1.gif" width="100" height="75" alt="color" id="image2" /></a></div>
<p>&nbsp;</p>
<div id="apDiv4"><a href="#" onmouseover="increaseSizeImage('image1','apDiv4');"
onmouseout="decreaseSizeImage('image1','apDiv4');"><img id="image1"
src="avatar196367_1.gif"
width="100" height="75" alt="Krusty is helpless" /></a></div>
<p>&nbsp;</p>

<p id="validation">&nbsp;</p>

</body></html>

MidiMagic 579 Nearly a Senior Poster

17 Years Ago

Must we really do this. It's annoying.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

hobo38 0 Newbie Poster · Answer 1 · 2007-08-27T02:42:19+00:00

Thank you so much. I really appreciate your help. I am a novice and have spent 3 days playing around with this..

Thank you.

Jerry

hobo38 0 Newbie Poster · Answer 2 · 2007-08-27T03:32:04+00:00

When I use that in my page, now the image displays behind the other images, any ideas?

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 3 · 2007-08-30T22:09:07+00:00

~s.o.s~ 2,560 Failure as a human

17 Years Ago

I hope you don't say the same thing to your customers...

Inny 1 Posting Whiz in Training · Answer 4 · 2007-09-28T19:48:50+00:00

could this be done with posted images?

Im currently using this code

<script type='text/javascript'>
<!--
function ResizeThem(){
maxheight=150;
maxwidth=150 ;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].setAttribute('alt','Reduced Image - Click to see full size');
imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1');iw.focus()");
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function("iw=window.open(this.src,'ImageViewer','resizable=1');iw.focus()");
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;}}}}
ResizeThem()
//-->
</script>

MidiMagic 579 Nearly a Senior Poster · Answer 5 · 2007-09-30T00:34:41+00:00

I hope you don't say the same thing to your customers...

I find pages that make things appear, grow, shrink, or move to be extremely hard to read.

These things may seem cutesy or fun, or "show off your JS prowess," but in some people, they cause the same danger-detecting interrupts an approaching car or insect causes. This keeps that person from actually reading your page. It is so annoying that such a person hits his back button to get rid of the motion.

It is why I hated the bumbling tooltips and the moving ads. And the original poster has one on the bottom if his post. Grrrrrr!

Make it so I have to click on something before this menagerie of movement starts. I would much rather click on a thumbnail before it explodes in my face, rather than watch explosion after explosion as I try to move the mouse to a particular icon.

Inny 1 Posting Whiz in Training · Answer 6 · 2007-09-30T17:19:16+00:00

Inny 1 Posting Whiz in Training

17 Years Ago

Good Point! Ill stick to thumbs! :D

murdo 0 Newbie Poster · Answer 7 · 2008-11-01T01:43:18+00:00

If you do it right it would be kind of nice, but for some reason Firefox doesnt want to move a mouseover layer.

Moving layers not a problem in Firefox but in this *mouseover* case only works in IE.

Here's what I did with it. This is novice stuff and needs someone better at Java than I.

<!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="imagetoolbar" content="no" />
<title>Dynamic</title><style type="text/css">
div {
  position:absolute;
/* background-color:#FFDDFF; */
/* top:180; left:20; */
/* width:23; height:25; */
/* padding:5px; */
/* border:none; */
/* font-size:2px; */
/* visibility:visible; */
/* overflow:auto; */
}

</style>
<script type='text/javascript'>
<!--
function echo() {
  var arg = arguments, i = 0, s = " ";
  for (i=0;i<arg.length;i++) {
    s = s + " " + arg[i];
  }
  window.status = s;
}

//-->
</script>
<script type="text/javascript">
var TInc, TDec;
mw=64;mh=52;nw=12;nh=12;

numlayers = 2;

function decreaseImageSize(id,_lay) {
var i = 1, j=0;
  if(TInc != null) { clearTimeout(TInc); TInc = null; }
  if (parseInt(document.getElementById(id).height) > nh) {
  if (_lay == "lay1") j = 1;
  if (_lay == "lay2") j = 2;

while (i <= numlayers) {
  tlay = eval("lay" + i);
  if (i > j) { tlay.style.top = parseInt(tlay.style.top)
    - parseInt((document.getElementById(id).height-nh)/2);
    echo("lay" + i , _lay);
  }
  i++;
}
    document.getElementById(id).width -= parseInt(
     (document.getElementById(id).width-nw)/2);
    document.getElementById(id).height -= parseInt(
     (document.getElementById(id).height-nh)/2);
    TDec = setTimeout("decreaseImageSize('"+id+"','"+_lay+"')", 40);
  }
}

function increaseImageSize(id,_lay) {
var i = 1, j=0;
//document.all['lay2'].style.top = 90;
  if(TDec != null) {clearTimeout(TDec); TDec = null;}
  if (parseInt(document.getElementById(id).height) < mh) {
  if (_lay == "lay1") j = 1;
  if (_lay == "lay2") j = 2;

while (i <= numlayers) {
  tlay = eval("lay" + i);
  if (i > j) { tlay.style.top = parseInt(tlay.style.top)
    + parseInt((mh-document.getElementById(id).height)/2);
    echo("lay" + i , _lay);
  }
  i++;
}
    document.getElementById(id).width += parseInt(
     (mw-document.getElementById(id).width)/2);
    document.getElementById(id).height += parseInt(
     (mh-document.getElementById(id).height)/2);
   TInc = setTimeout("increaseImageSize('"+id+"','"+_lay+"')", 40);
  }
}

function MoveLayer(Layer,L,T,_Show) {
  with(this) {
    if (0) Layer.moveTo(L,T);
    else {
      Layer.style.left = L;
      Layer.style.top = T;
    }
    if (_Show) ShowLayers(Layer);
  }
}
</script>

</head>

<body>
<div id="lay1" style="z-index:1; left:20px; top:20px;"><a href="#"
onmouseover="increaseImageSize('im1','lay1');"
onmouseout="decreaseImageSize('im1','lay1');">
<img id="im1"src="ch.png" width="12" height="12" alt=" ">
</a></div><!--p>&nbsp;</p-->
<div id="lay2" style="z-index:2; left:20px; top:40px;"><a href="#"
onmouseover="increaseImageSize('im2','lay2');"
onmouseout="decreaseImageSize('im2','lay2');">
<img id="im2"src="ch.png" width="12" height="12" alt=" ">
</a></div>
</body></html>

I like this cool board

v-2smis 0 Newbie Poster · Answer 8 · 2009-08-13T04:08:55+00:00

I need help I have a photo album and i was hoping to get a code in which enlargement of photos can happen without putting the photo names as there are as many as 500 snaps there.

Sid

hoping2 0 Newbie Poster · Answer 9 · 2009-11-18T09:49:10+00:00

Damn, I only have a small mosaic of pictures, 12 to be exact. Ill be changing mine regulary though. Is there not a simple piece of html to be able to make each picture slightly larger & therefore sit ontop of the other pictures using html?