Is it possible to dynamically change the width and height attributes of an IMG tag us [Archive]

View Full Version : Is it possible to dynamically change the width and height attributes of an IMG tag us

ChuckRW

11-02-2002, 07:39 AM

I am using a simple "slideshow" type of script to display thumbnail images. Each thumbnail is a link to the larger version of itself. The thumbnails are of various heights and widths. In Internet Explorer I have no problem, each new thumbnail is displayed at its proper height and width with the new link area fitting the image perfectly. In Netscape4 the IMG tag seems to hold on to the height and width of the first image source and force the rest of the images to the same height and width.
I could solve this by adding a border the color of the page background to all the images, making them all the same size and width, but this would cause the link area to be larger than many of the images by an unacceptable amount.
I tried using onMouseOver="document.imgname.width=200; document.imgname.height=200" thinking as I dynamically assign the src and url I could also assign a new width and height. This worked fine in IE but not at all in NS4.
Is there a way to dynamically change the width and height attributes of an IMG tag using Javascript in Netscape4? Or...Is there a way to dynamically change the size of a link area of an image map that works in IE and NS4?
Thanks for your time.
Chuck W.

joh6nn

11-02-2002, 08:06 AM

trying to get things to work in NS4 is like pulling teeth, except not as fun. there are people in this forum, who could probably come up with code that does what you want, but it would be so horribly convoluted, and difficult to work with, that it probably wouldn't be worth your time.

so, yes, it's probably doable. but, not easily

realisis

11-02-2002, 08:16 AM

Hi Chuck,

"In Netscape4 the IMG tag seems to hold on to the height and width of the first image source and force the rest of the images to the same height and width."

Yes, that's because older browsers like NS4 (1997) and Opera 6.x (2002) : ^ ] can't overwrite page contents without reloading the entire page. In other words, they can't do pure DHTML.

However, NS4 at least gives you a halfway-house: you can rewrite the contents of a LAYER independently of the rest of the page.

Define a layer as follows (wherever on the page you want it to be positioned):

<layer id=imgfield></layer>

NS4 does not respond directly to onMouseover in the img tag - you must set this up in a link or in the LAYER itself. You did not provide your full code, but (going by your example) for every image you want to load, you could wrap the thumbnail IMG in alink (or another layer) as follows and add:

<a href"BigSource.jpg" onMouseover="switchImg(this.href)" onClick="return false"><img src="smallSource.jpg"></a>

Then, put this SCRIPT in your page:

<script type="text/javascript">

</script>

The above will write each image at its normal dimensions. The layer should stretch to fit the dimensions (i think). However, the success of the outcome will depend on which other elements you may already have on the page.

The above is an example of what joh6nn meant by "horribly convoluted". ;^]

If you provide more coding details re: page requirements, we can help you fine-tune the activity, espesh with respect to integrating the NS4 activity with other browsers.

Hope this helps -

EDIT: sorry Chuck if the original didn't work. It's late... I just got in and I'm seeing everything double... Have corrected script...

ChuckRW

11-02-2002, 08:17 AM

Thanks for the amazingly fast response. If it's THAT hard then I don't feel so bad compromising and having a bloated link area.
Not looking for any specific solution, but, would you expect NS6 to support a way to do this type of thing?
Chuck
p.s. Realisis's post came in as I wrote this one. Going to check it out and try it. THANKS!

realisis

11-02-2002, 08:27 AM

"would you expect NS6 to support a way to do this type of thing? "

Off the top of my head, NS6 should be able to dynamically assign images, but not sure about the directly re-dimensioning the image though. However, NS6 can prolly simulate the NS4 thingy via innerHTML (if the dynamic dimensions thing doesn't work.) Hint: try it first in NS6, and *then* come back and ask... if any problems.

Please list relevant code and page context....

joh6nn

11-02-2002, 10:09 AM

NS6 would have no problems doing this.

Ökii

11-02-2002, 12:18 PM

Yep - NS6 (like IE4+) will reassign image dimensions upon image change if... you have not defined a height and width attribute to the img tag

<img src="a.gif" id="changer" />
<script>
document.getElementById('changer').src = 'b.gif';

would change the image dimensions to reflect the true size of b.gif. Whereas if you had
<img src="a.gif" id="changer" width="24" height="12" /> it wouldn't.

joh6nn

11-02-2002, 11:00 PM

if you define the height and width of an image using CSS, then most browsers have no problem resizing it. NS4, however, still falls short, i believe.

ChuckRW

11-03-2002, 05:37 AM

Hi folks,
I tried to use Realisis's NS4 solution but couldn't figure out how to include it in my code. I tried :D
Here is a link to an example and I also pasted the code in here.
http://7styleguides.com/example/example.htm (mouseover 1of4 to advance thru the images)
Please help.
Hope I'm not asking too much.
Thanks.
Chuck

<script language="JavaScript">

</script>

</head>

<body>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=right valign=bottom>
<a href="#" onMouseOver="
emptypac=pacToUse;
pacToUse=pac2;
pac2=pac3;
pac3=pac4;
pac4=emptypac;
document.viewer.src=pacToUse[0]
document.of.src=pacToUse[2]"><IMG name="of" SRC="images/1of4.gif" WIDTH=100 HEIGHT=40 border=0></a>
</td>
<td align=left valign=bottom height=250>
<a onClick="window.open(pacToUse[1])" href="#"><IMG name="viewer" SRC="images/arThumb01.jpg" border=0></a>
</td>
</tr>
</table>

realisis

11-07-2002, 04:01 AM

oops, sorry Chuck: somehow I missed your reply... will check up your posted code and report back overnight.