•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,851 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,330 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 13603 | Replies: 10
 |
•
•
Join Date: Aug 2007
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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> </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> </p>
<p id="validation"> </p>
</body></html>
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> </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> </p>
<p id="validation"> </p>
</body></html>
•
•
Join Date: Aug 2007
Location: Argentina
Posts: 76
Reputation:
Rep Power: 2
Solved Threads: 6
Junior Poster in Training
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> </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> </p>
<p id="validation"> </p>
</body></html> Last edited by martin5211 : Aug 26th, 2007 at 3:39 pm. Reason: updated setTimeout parameter
•
•
Join Date: Aug 2007
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
Thank you.
Jerry
•
•
Join Date: Aug 2007
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
When I use that in my page, now the image displays behind the other images, any ideas?
•
•
Join Date: Aug 2007
Location: Argentina
Posts: 76
Reputation:
Rep Power: 2
Solved Threads: 6
Junior Poster in Training
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.
- <div> with more width
- getElementById(id).height with lower value in the condition
- <div> with auto margins or without width property in CSS.
Last edited by martin5211 : Aug 26th, 2007 at 5:45 pm.
•
•
Join Date: Aug 2007
Location: Argentina
Posts: 76
Reputation:
Rep Power: 2
Solved Threads: 6
Junior Poster in Training
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
This is the trick:
getElementById(--id--).style.zIndex += 1
I've enclosed the source code again with new modifications
•
•
Join Date: Jan 2007
Posts: 2,524
Reputation:
Rep Power: 7
Solved Threads: 105
Must we really do this. It's annoying.
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2006
Location: India
Posts: 6,806
Reputation: 
Rep Power: 23
Solved Threads: 338
I hope you don't say the same thing to your customers...
"I don't accept change. I don't deserve to live."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
could this be done with posted images?
Im currently using this code
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> Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Jan 2007
Posts: 2,524
Reputation:
Rep Power: 7
Solved Threads: 105
•
•
•
•
Originally Posted by ~s.o.s~ 
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.
Last edited by MidiMagic : Sep 29th, 2007 at 2:37 pm.
Daylight-saving time uses more gasoline
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- backgorund image (Visual Basic 4 / 5 / 6)
- background image (Visual Basic 4 / 5 / 6)
- Menu list in MouseOver (ASP.NET)
- Enlarge thumbnail image in new window (JavaScript / DHTML / AJAX)
- Help modify some JavaScript/HTML (JavaScript / DHTML / AJAX)
- First time using dreamweaver and Flash (Graphics and Multimedia)
- Done, but with errors (ASP)
- Image swap behaviour from Dreamweaver no longer works once uploaded (Site Layout and Usability)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: 2 Websites...1 IP
- Next Thread: Need help implementing a javascript function
