Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text overRuns my image display

    My page doesn't ever want to act the same way twice. Some times it works and sometimes just the text displays.

    <html>
    <head>
    <title>popup</title>
    <style type="text/css">
    <!--
    body {
    background-color: #000000;
    }
    body,td,th {
    color: #000099;
    }
    -->
    </style>
    <script language=JavaScript>
    function writeText(){
    list = new Array(4);
    list[0]="text1";
    list[1]="text2";
    list[2]="text3";
    list[3]="text4";
    var randNum = Math.round(Math.random()*4);
    document.write(list[randNum]);
    }

    </script>
    </head>
    <body>
    <img src = "images/popImg_01.gif" width="201" height="201" onload="writeText();">
    </body>
    </html>

    It always seems to write the text over the loaded image. Is there an order of operation that I can do that will always write the text after it has loaded the image. It's important that my image is placed where it is.

    Thanks
    Jay

  • #2
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    What you could do is place your text in a div, and place that where you want. Asside from that, try this:
    Code:
    <script language=JavaScript>
    function writeText(){
    list = new Array(4);
    list[0]="text1";
    list[1]="text2";
    list[2]="text3";
    list[3]="text4";
    var randNum = Math.round(Math.random()*4);
    document.write("<img src='images/popImg_01.gif' width='201' height='201'></img>" + list[randNum]);
    }
    </script>

  • #3
    mcq
    mcq is offline
    New Coder
    Join Date
    Jan 2005
    Location
    northren ireland Age:14
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i havent a clue how to do that..im all confused now..

  • #4
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Heres a quick example of what I meant.
    Code:
    <html>
    <head>
    <title>popup</title>
    <style type="text/css">
    <!--
    body {
    background-color: white;
    }
    body,td,th {
    color: white;
    }
    .myTxt{
    	position: absolute; left: 250px; top: 190px;
    	color: white;
    	}
    -->
    </style>
    <script language=JavaScript>
    function writeText(){
    list = new Array(4);
    list[0]="text1";
    list[1]="text2";
    list[2]="text3";
    list[3]="text4";
    var randNum = Math.round(Math.random()*4);
    document.getElementById('myText').innerHTML=(list[randNum]);
    }
    </script>
    </head>
    <body onload="writeText();">
    <img src = "images/popImg_01.gif" width="201" height="201">
    <div id="myText" class="myTxt"></div>
    </body>
    </html>

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ... on the other hand, onload is a body or a frame/iframe event handler only, thus you can not apply it on an image object.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by Kor
    ... on the other hand, onload is a body or a frame/iframe event handler only, thus you can not apply it on an image object.
    You can. Try it.

    <img src="http://www.codingforums.com/images/smilies/biggrin.gif" onload="alert('loaded!')" onerror="alert('not loaded!')" />

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    http://www.w3.org/TR/REC-html40/inte....html#h-18.2.3

    well... you may use it, but with no effect. In fact, onload, even inserted in a tag, it will occure only when the object window is loaded, not the document's specific object
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Willy Duitt
    But, as you can see on methods the W3C column is empty, There is no Yes... well, there is neither No... probably w3c has no firm decision whether image object may be a subject of methods or not...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by Kor
    In fact, onload, even inserted in a tag, it will occure only when the object window is loaded, not the document's specific object
    I beg to disagree. Image onload handler (standard or not) is triggered when the image (not the window or document) has loaded successfully. It is sometimes used in preloading image scripts. And just recently, I used it to do sequential loading of images.

    If you're still not convinced, you can try it in an animated image

    <img src="animated.gif" onload="window.status++" />

    When you run that, you can see the status bar shows a number incrementing as each frame of the animated gif is loaded.

  • #11
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor
    But, as you can see on methods the W3C column is empty, There is no Yes... well, there is neither No... probably w3c has no firm decision whether image object may be a subject of methods or not...
    Aye but browsers going back to Netscape 3 and Internet Explorer 4 support it as well as current browsers... Regardless of what most think, the W3C is not the end all of all that is html...

    Much the same as Firefox, a supposedly standards compliant browser supports innerHTML which the W3C does not recognize as standard compliant... And although I try not to use innerHTML, it does have it uses and at times, I find it easier to use then creating a whole bunch of elements...

    .....Willy

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    if images are to be full methods aplyful elements, than how can you explain that:

    if

    <body>
    <img src="non-existetnt-picture.jpg" onerror="alert('no')">
    <img src="existent-picture.jpg" onload="alert('yea')">
    </body>

    The first alert is onload triggered, not onerror. That could mean that both methods are rather a window's methods that images' ones.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Mine alerted 'no' first. Result may vary depending on the environment especially if the existing image has been cached. Have you tried this?
    Code:
    <body onload="window.status+='window has loaded!'">
    <img src="http://www.codingforums.com/logo.gif" onload="window.status+='image has loaded! '">
    </body>
    Or try this in IE to see how the status bar increments as each of the frame in the animated gif is loaded.

    <img src="http://www.gifanimations.com/Image/Animations/Cartoons/Angry_barbarian.gif___1106568110039" onload="window.status++">

  • #14
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    that is quite inteersting... as I have always thought that the picture's loading process can not be controlled/measured by javascript... he...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Now you know.


  •  

    Posting Permissions

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