Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 3 of 3

Thread: javascript: <img> tag, using a given width/height, get proportions right

  1. #1

    javascript: <img> tag, using a given width/height, get proportions right

    Sorry for the cryptic post title, here's what's bugging me:

    I have an array containing relative paths of images and whether they are taller than they are wide.

    Using javascript I want to display a random image every x seconds (this is for an active desktop)

    The arrayFile.js is set like this, imgArray = ('file1.jpg,wider',''file2.jpg,taller'...);
    PHP Code:
    <head>
    <
    script src="arrayFile.js"></script>
    <script language="JavaScript">
     function init(){
         randomImageNumber = Math.round(Math.random()*imgArray.length);
         if(imgArray[randomImageNumber].split(',')[1] == 'taller'){
        document.images['tt'].height = "768";
         }else{
            document.images['tt'].width = "1024";       
         }
         document.images['tt'].src = 'path\/'+imgArray[randomImageNumber].split(',')[0];
         setTimeout('init()',5000);
         }
        </script>
    </head> 
    And in the body:
    PHP Code:
       <body onload="init()">
        <
    img src='' name='tt'>
       </
    body
    Now the images get displayed every 5 seconds BUT proportions get mixed up. If the image is wide, it will use a 1024 pixel width but also the previous image's height, which means that very quickly all the images become 1024x768 regardless of the real width/height proportions (and a 2000x1000px image looks MUCH better using 1024x512pxs than 1024x768px)

    Long story short, how can I tell internet explorer to figure out the length of the shorter side by itself. I've tried 'emptying' width height variables:
    PHP Code:
         if(imgArray[randomImageNumber].split(',')[1] == 'taller'){
            
    document.images['tt'].width "";
            
    document.images['tt'].height "768";
         }else{
            
    document.images['tt'].height "";       
            
    document.images['tt'].width "1024";       
         } 
    But all i get are 0x768px or 1024x0px images.

    Have I confused everyone or is someone able to help ?

    Thanks !

    mlk

  2. #2
    176
    posts
    Registered User
    i think i understand what you mean ... havne't tried anything ... but u think it could be cuz you're trying to set the width/height before source.
    PHP Code:
    <zip> echo this; </zip

  3. #3
    once again thanks for your post, will try that !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012