Increase Image Size - Javascript

1 New Member

Hi,
I have tried to incorporate an image increase and decrease on mouseover from an earlier posting.
Can anyone help me do this with multiple images?

Here is the html page I have as a sample:

[HTML]<!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;}
#apDiv1 {
position:absolu te;
left:361px;
top:161px;
width:186px;
height:144px;
z-index:1;
}
#apDiv2 {
position:absolu te;
left:306px;
top:127px;
width:300px;
height:164px;
z-index:1;
}
#apDiv3 {
position:absolu te;
left:188px;
top:116px;
width:100px;
height:75px;
z-index:1;
}
#apDiv4 {
position:absolu te;
left:387px;
top:113px;
width:100px;
height:75px;
z-index:2;
}
</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("imag e1").height > 100)
{
document.getEle mentById("image 1").height -= 30;
document.getEle mentById("image 1").width -= 40;
glbDec = setTimeout("dec reaseSizeImage( )", 32);
};
}

function increaseSizeIma ge()
{
if(glbDec != null) {clearTimeout(g lbDec); glbDec = null;};
if (document.getEl ementById("imag e1").height < 216)
{
document.getEle mentById("image 1").height += 30;
document.getEle mentById("image 1").width += 40;
glbInc = setTimeout("inc reaseSizeImage( )", 32);
};
}
// ]]>
</script>

</head>

<body>
<div id="apDiv3"><a href="#" onmouseover="in creaseSizeImage ();"
onmouseout="dec reaseSizeImage( );"><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="in creaseSizeImage ();"
onmouseout="dec reaseSizeImage( );"><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>[/HTML]

Aug 26 '07 #1

Subscribe Reply

4134

r035198x

13,262

MVP

Hi,
I have tried to incorporate an image increase and decrease on mouseover from an earlier posting.
Can anyone help me do this with multiple images?

Here is the html page I have as a sample:

<!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;}
#apDiv1 {
position:absolu te;
left:361px;
top:161px;
width:186px;
height:144px;
z-index:1;
}
#apDiv2 {
position:absolu te;
left:306px;
top:127px;
width:300px;
height:164px;
z-index:1;
}
#apDiv3 {
position:absolu te;
left:188px;
top:116px;
width:100px;
height:75px;
z-index:1;
}
#apDiv4 {
position:absolu te;
left:387px;
top:113px;
width:100px;
height:75px;
z-index:2;
}
</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("imag e1").height > 100)
{
document.getEle mentById("image 1").height -= 30;
document.getEle mentById("image 1").width -= 40;
glbDec = setTimeout("dec reaseSizeImage( )", 32);
};
}

function increaseSizeIma ge()
{
if(glbDec != null) {clearTimeout(g lbDec); glbDec = null;};
if (document.getEl ementById("imag e1").height < 216)
{
document.getEle mentById("image 1").height += 30;
document.getEle mentById("image 1").width += 40;
glbInc = setTimeout("inc reaseSizeImage( )", 32);
};
}
// ]]>
</script>

</head>

<body>
<div id="apDiv3"><a href="#" onmouseover="in creaseSizeImage ();"
onmouseout="dec reaseSizeImage( );"><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="in creaseSizeImage ();"
onmouseout="dec reaseSizeImage( );"><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>

Moved to Javascript forum

Aug 27 '07 #2

phvfl

173

Recognized Expert New Member

Put an argument into the decreaseSizeIma ge and increaseSizeIma ge functions which passes in the ID of the object. This could be reduced further using the 'this' keyword to pass in the object.

Expand|Select|Wrap|Line Numbers

 
function decreaseSizeImage(imgID) // will get back to its normal default size

{

if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};

if (document.getElementById(srcID).height > 100)

{

document.getElementById(srcID).height -= 30;

document.getElementById(srcID).width -= 40;

glbDec = setTimeout("decreaseSizeImage()", 32);

};

}
 
function increaseSizeImage(src)

{

if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};

if (document.getElementById(srcID).height < 216)

{

document.getElementById(srcID).height += 30;

document.getElementById(srcID).width += 40;

glbInc = setTimeout("increaseSizeImage()", 32);

};

}

[HTML]
<body>
<div id="apDiv3"><a href="#" onmouseover="in creaseSizeImage ('image2');"
onmouseout="dec reaseSizeImage( 'image2');"><im g 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="in creaseSizeImage ('image1);"
onmouseout="dec reaseSizeImage( 'image1');"><im g id="image1"
src="plastic/hdpe/HDPE Parts.JPG"
width="100" height="75" alt="Krusty is helpless" /></a></div>
<p> </p>
[/HTML]

PS Please use code tags to seperate your code as it makes the code easier to read. There is a guide here

Aug 27 '07 #3

Similar topics

5097

Hi, stupid popup question

by: Shaun McKinnon | last post by:

HI...Here's my problem...I have a popup window that loads when i want it to, but it's not sized properly. I've set the size, but it doesn't seem to work. I've been on 8 different websites to find out what i'm doing wrong, and so far it seems i'm doing it the right way. Here's my code...any suggestions would be appreciated. <script language="javascript">

Javascript

16219

changing image size on roll over

by: Kenny | last post by:

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

Javascript

7889

How to know the buffer size and increase buffer size in c++

by: Raja | last post by:

How to know the buffer size and increase buffer size in c++.

C / C++

8234

how to increase heap size for a process

by: nrhayyal | last post by:

hi all, i am working on C++ on AIX machine. i am running one of my module which is built using 10+ user built libraries. i am getting St9bad_alloc exception. i came to know that this exception is thrown because the heap is exhausted. when i checked while running the program , i found that the program uses 128 MB of heap after which it waits , then it throws this exception.

C / C++

12135

increase the size of the array

by: reb | last post by:

Hi, How do i increase the size of the array without losing the data of that array in c#? thanks

C# / C Sharp

5398

Allow the user to increase font size

by: eomer | last post by:

My site is very small, and plain - it will mostly be text (for now). I have used a good mix of css in the design. With usability in mind I would like to add some specific functionality (with the vision impaired in mind). I would like to allow the user/reader of the web site the ability to select another font size, say from a drop downbox. This would increase the size of any text between paragraph tags, or in table data tags. This...

HTML / CSS

3853

How can I increase the size of the Scroll bar

by: msnews.microsoft.com | last post by:

Hi all I am working on an application for a touch screen terminal. I have placed a datagrid on the form and the user will select a row on the datagrid. I have increased the font size on the datagrid to make it easier for the user to choose one using the touchscreen. How can I increase the size of the scrollbar to make it easier for the user to scroll the datagrid? i am using visual studio 2005 .

C# / C Sharp

2538

Increase Datagridview size by dragging the form

by: Irfan | last post by:

Hi, I have a datagridview and some Buttons on a form. When I drag the form down to increase its size at run time, i want the datagridview also to increase in size so that i can view all the data in the grid at a time, instead of scrolling. This is a common scenario but i am not able to figure out how to do this. TIA Irfan

.NET Framework

1963

Image size of a button

by: truptidalia | last post by:

Hi, I have added an image to my button. If I increase the size of the button, the image is visible in tile form. How do I stretch the image of the button. <input id="zoomOutButton" style="background-image:url(images/ZoomOut.bmp); background-position: center; width: 25px; background-color: transparent;" type="button" onclick="DoZoomOut();" title="Zoom Out"/> Can anyone please help me figure out, what do I need to...

Javascript

10373

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10374

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10113

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9195

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7651

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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

Microsoft Access / VBA

6880

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5547

Trying to create a lan-to-lan vpn between two differents networks

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

Networking - Hardware / Configuration

3859

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

3011

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

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

General