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>

Recommended Answers

All 13 Replies

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>

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

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

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.

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

Must we really do this. It's annoying.

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

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>

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.

Good Point! Ill stick to thumbs! :D

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

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

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?

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.