Announcement

Collapse
No announcement yet.

Half size image

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

  • 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.

  • #2
    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.

    Comment


    • #3
      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>
      Later
      Keith

      Webxpertz Community for Webmasters & Developers

      Comment


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

        Comment


        • #5
          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.
          Later
          Keith

          Webxpertz Community for Webmasters & Developers

          Comment


          • #6
            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.

            Comment


            • #7
              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>
              Later
              Keith

              Webxpertz Community for Webmasters & Developers

              Comment


              • #8
                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.

                Comment

                widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                Working...
                X