Announcement

Collapse
No announcement yet.

Half size image

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Kamex
    replied
    I didn't get it to work, but I figured out something that did.

    <img name="$post[userid]avatar" src="$avatarurl" border="0" onLoad="width=width/2" />

    I have no idea why this works. As far as I know, it shouldn't because its only specifying the width. Maybe someone could explain this to me?

    Edit: I found I can use other events in my javascript book to do this:

    <img name="$post[userid]avatar" src="$avatarurl" border="0" onLoad="width=width/2" onMouseout="width=width/2" onMouseover="width=width*2" />

    Now people can see the full sized avatar if they want by putting their mouse over it.

    I still have no clue why it works to only specify the width though. Maybe my code won't work on some browsers with just the width specified?
    Last edited by Kamex; Mon 2 Feb '04, 9:50am. Reason: Reworded some things.

    Leave a comment:


  • diades
    replied
    Not
    name="useravatar"
    But
    id="useravatar"

    and:
    <script type="text/javascript">
    //<![CDATA[
    img = new Image();
    img.src = "demo.gif";
    onload = function(){
    document.getElementById("useravatar").style.width=Math.round(img.width/2) + "px";
    document.getElementById("useravatar").style.height=Math.round(img.height/2) + "px";
    }
    //]]>
    </script>

    Leave a comment:


  • Kamex
    replied
    lol. Man I'm dumb.

    So in the <img> tag I should put name="useravatar" then? Cause I tried it an it's still not working. Somethings working though, because I get an error if there's no image there.

    Edit: Oh, and yes, I did put it in the head.

    Leave a comment:


  • diades
    replied
    Hi Kamex

    This is bet placed in the head of the document, it presuposes that you have an image in the document and that you have changed "yourimageid" to the id of that image.

    Leave a comment:


  • Kamex
    replied
    The image isn't showing up (no red x either). Where do I put this? Do I replace the <img> with it?

    Leave a comment:


  • diades
    replied
    A purely client-side solution:
    Code:
    <script type="text/javascript">
    //<![CDATA[
      img = new Image();
      img.src = "demo.gif";
      onload = function(){
        document.getElementById("yourimageid").style.width=Math.round(img.width/2) + "px";
        document.getElementById("yourimageid").style.height=Math.round(img.height/2) + "px";
      }
    //]]>
    </script>

    Leave a comment:


  • digitok
    replied
    You'd need to use PHP (or something else) to work out half of the width/height and put it in the width/height values of the image tag.

    Look up the PHP image functions if you have PHP.

    Leave a comment:


  • Kamex
    started a topic Half size image

    Half size image

    How do I make it so an image displays in half the width and height of the graphic. Like if the image is 150 x 150, make it 75 x 75? I tried height/width="50%" but that seems to affect its size relative to the table.
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X