By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,961 Members | 1,333 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,961 IT Pros & Developers. It's quick & easy.

Changing image width using JavaScript

P: n/a
Hi,

I have the following coding on a web page. It causes two pictures (pic1.jpg
and pic2.jpg)
to show, one above the other and then when one clicks on the top picture is
squeezes to
the left (as its width is reduced) to show the bottom picture. Then when the
bottom
picture is clicked the top picture expands to the right to cover the bottom
picture again.
Much of the coding is simply to show the pictures a suitable size for the
user's screen
size.
<script language="JavaScript">
<!--
var scnwid=screen.width;
var scnhei=screen.height;
var ii=0;
var maxii=20;
var widthf=0;
var widthw=0;
var winc=0;
var topd=10;
var leftd=0;
var heightf=350;
var msgtop=0;
function Init() {
// set widths and heights of pictures and divs to match screen size
widthf=0.875*scnwid;
heightf=.6*scnhei;
leftd=(scnwid-widthf)/2;
widthw=widthf;
document.pic1.width = widthf;
document.pic1.height = heightf;
var ref=document.getElementById("div1");
ref.style.top=topd;
ref.style.left=leftd;
ref.style.width=widthf;
ref.style.height=heightf;
document.pic2.width = widthf;
document.pic2.height = heightf;
var ref=document.getElementById("div2");
ref.style.top=topd;
ref.style.left=leftd;
ref.style.width=widthf;
ref.style.height=heightf;
msgtop=heightf+topd;
var ref3=document.getElementById("div3");
ref3.style.top=msgtop;
ref3.style.left=leftd;
}

function ChgSize(updown) {
winc=widthf/maxii;
winc=updown*winc;
ii=0;
DoPics();
}

function DoPics() {
widthw=widthw-winc;
document.pic1.width = widthw;
ii=ii+1;
if (ii<maxii) {
setTimeout("DoPics()",30);
}
}

-->
</script>
</head>

<body onLoad="Init();return true">

<div id=div1
style="position:absolute;left:10;top:10;width:700; height:350;z-index:1;">
<a href="javascript:void(0)" onClick="ChgSize(1); return true"><img
name="pic1" border=0 src="pic1.jpg" width=700 height=400></a>
</div>

<div id=div2
style="position:absolute;left:10;top:10;width:700; height:350;z-index:0;">
<a href="javascript:void(0)" onClick="ChgSize(-1); return true"><img
name="pic2" border=0 src="pic2.JPG" width=700 height=400></a>
</div>

<p>
<center>
<div id=div3 style="position:absolute;left:10;top:10;z-index:0;">
Click on the picture to see the other picture.
</div>
</center>

The coding and web page work fine when I display it using the web page
editor I wrote in
Microsoft Visual Basic 6 but not when I view the page using Internet
Explorer. When I do
the latter there are often, but not always, white flashes that appear as the
one picture
width is reduced or expanded. It acts as if the picture with the new width
is not fully
displayed before it is time to reduce it by the next increment.

I am surprised by this since I thought that the browser window in my web
page editor used
the same coding as Internet Explorer.

I have tried to preload the pictures but this did not make any difference.

Can someone help me with this problem? Is there a better way to do the same
thing?

Thank you.
Doug vV
Jan 6 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Doug van Vianen" <co*****@shaw.ca> wrote in
news:NqBvf.258456$ki.258172@pd7tw2no:
Can someone help me with this problem? Is there a better way to do the
same thing?


I am *guessing* that under your IE "Internet Options" / Temporary
Internet Files / Settings, you have your 'check for newer versions of
stored pages' set to "Every Visit To The Page'.

This tends to cause an image to flash/disappear each time it is changed
via javascript - nothing is cached so it must reload, THEN go through
your transformation. You can either change your settings, or pretty
much live with it. There *are* some workarounds if you look hard enough
on google... most involve changing some settings in .htaccess

You can confirm whether or not this is your problem by looking at the
page in Firefox or changing your settings in IE.


Jan 6 '06 #2

P: n/a

Doug van Vianen wrote:
<script language="JavaScript">
The language attribute is deprecated, use the type attribute as
follows:

type = "text/javascript"
<!--
HTML comments are unnecessary.
document.pic1.width = widthf;
document.pic1.height = heightf;
document.pic2.width = widthf;
document.pic2.height = heightf;
To affect the width and the height, you also need to access the style
property:

document.picX.style.width = widthf;
document.picX.style.height = heightf;
<body onLoad="Init();return true">
There is need to return a boolean value. Typically it's also a better
idea to programmatically assign a function reference through javascript
rather than through the body onload attribute.

window.onload = Init;
<div id=div1
It's good practice to place quotes around the values.

<div id = "div1" ...
<a href="javascript:void(0)" onClick="ChgSize(1); return true">
The use of javascript pseudo protocol is highly frowned upon.
<img name="pic1" border=0 src="pic1.jpg" width=700 height=400></a>


Why not try placing the onclick on the img instead?

<img src = "pic1.jpg" onclick = "ChgSize(1)">

Jan 7 '06 #3

P: n/a
Hi,

Thank you for your reply.

I checked the settings for my IE and they were okay. In any case, I would
like the coding to work for anyone's browser without them having to change
settings. (Great idea but a little unrealistic!)

I changed the coding to use a series of DIVs, each with the picture to be
shrunk or expanded at a different level of shrinking or expansion. To do the
shrinking or expanding I just change which of the DIVs is visible. While
this is not very sophistocated it seems to work. I have not yet, however,
checked this on other computers.

Thank you again.

Doug vV

"Good Man" <he***@letsgo.com> wrote in message
news:Xn************************@216.196.97.131...
"Doug van Vianen" <co*****@shaw.ca> wrote in
news:NqBvf.258456$ki.258172@pd7tw2no:
Can someone help me with this problem? Is there a better way to do the
same thing?


I am *guessing* that under your IE "Internet Options" / Temporary
Internet Files / Settings, you have your 'check for newer versions of
stored pages' set to "Every Visit To The Page'.

This tends to cause an image to flash/disappear each time it is changed
via javascript - nothing is cached so it must reload, THEN go through
your transformation. You can either change your settings, or pretty
much live with it. There *are* some workarounds if you look hard enough
on google... most involve changing some settings in .htaccess

You can confirm whether or not this is your problem by looking at the
page in Firefox or changing your settings in IE.

Jan 8 '06 #4

P: n/a
Hi,

Thank you for your reply. I will update my coding and perhaps also update
my library of books on JavaScript.

Doug vV

"web.dev" <we********@gmail.com> wrote in message
news:11*********************@g47g2000cwa.googlegro ups.com...

Doug van Vianen wrote:
<script language="JavaScript">


The language attribute is deprecated, use the type attribute as
follows:

type = "text/javascript"
<!--


HTML comments are unnecessary.
document.pic1.width = widthf;
document.pic1.height = heightf;
document.pic2.width = widthf;
document.pic2.height = heightf;


To affect the width and the height, you also need to access the style
property:

document.picX.style.width = widthf;
document.picX.style.height = heightf;
<body onLoad="Init();return true">


There is need to return a boolean value. Typically it's also a better
idea to programmatically assign a function reference through javascript
rather than through the body onload attribute.

window.onload = Init;
<div id=div1


It's good practice to place quotes around the values.

<div id = "div1" ...
<a href="javascript:void(0)" onClick="ChgSize(1); return true">


The use of javascript pseudo protocol is highly frowned upon.
<img name="pic1" border=0 src="pic1.jpg" width=700 height=400></a>


Why not try placing the onclick on the img instead?

<img src = "pic1.jpg" onclick = "ChgSize(1)">

Jan 8 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.