reset the width of image

[wakun]

Hi there,
First of all, I am trying to reset the width of the image while
loading

<img src='s.jpg' onload="javascript:if(this.width>120)
this.width=100;">

It's ok. And then I am going to make the code more flexible

<img src='s.jpg'
onload="javascript:if(this.width>javascript:window.document.body.offsetWidth)
this.width=50;">

this time, I compare the image width with the offsetWidth, however, I
found the code above didn't work no matter how small offsetWidh is
made.

BTW, I would like to make the width of image fit the current width of
the document, only HTML works fine under IE

<img src='s.jpg' width="100%" LEFTMARGIN=10>

But when applying the above code to the image of small size, it always
try to strech the image ,which will then look very bad.

I am trying to apply the code on condiiton: when the width of image is
smaller than a given value, do nothing; otherwise add "width=100%
LEFTMARGIN=10". Here is the javascript I tried

<img src='s.jpg' onload="javascript:if(this.width>100)
javascript:document.write('WIDTH=100% LEFTMARGIN=10');">

However, it didn't give the result I want. Would someone please give me
some clues?

thanks in advance.

 

[web.dev]

<img src='s.jpg' onload="javascript:if(this.width>100)
javascript:document.write('WIDTH=100% LEFTMARGIN=10');">

However, it didn't give the result I want. Would someone please give me
some clues?

1. Get rid of javascript pseudo-protocols. If you do a search about it
within this group, you'll get lots of reasons why not to use it.
2. You're using document.write. It's performing an action which you
are not expecting.

I prefer not to use inline javascript, but here's something that can
get you started:

javascript:

function adjustImg(oImg)
{
if(oImg.width > 100)
{
oImg.style.width = "100%";
oImg.style.marginLeft = "10px";
}
}

html:

<img src = "path/name.ext" onload = "adjustImg(this)">