reset the width of image

Discussion in 'Javascript' started by wakun@wakun.com, Mar 6, 2006.

  1. Guest

    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.
    , Mar 6, 2006
    #1
    1. Advertising

  2. web.dev Guest

    wrote:
    > <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)">
    web.dev, Mar 6, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    740
    Bruce Barker
    Oct 10, 2005
  2. Xu
    Replies:
    11
    Views:
    8,529
    Andrew Thompson
    Jul 16, 2005
  3. Sean Jorden
    Replies:
    1
    Views:
    583
    laurie
    Aug 19, 2003
  4. kris
    Replies:
    11
    Views:
    859
  5. Replies:
    1
    Views:
    723
    Beauregard T. Shagnasty
    Dec 29, 2007
Loading...

Share This Page