...

View Full Version : Text overRuns my image display



inadaze
01-23-2005, 01:48 AM
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

Brandoe85
01-23-2005, 07:38 PM
What you could do is place your text in a div, and place that where you want. Asside from that, try this:


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

mcq
01-23-2005, 08:19 PM
i havent a clue how to do that..im all confused now.. :D

Brandoe85
01-23-2005, 10:21 PM
Heres a quick example of what I meant.


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

Kor
01-24-2005, 09:40 AM
... 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.

glenngv
01-24-2005, 10:21 AM
... 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!')" />

Kor
01-24-2005, 10:50 AM
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3

:D 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

Willy Duitt
01-24-2005, 11:10 AM
http://www.w3schools.com/htmldom/dom_obj_image.asp

Kor
01-24-2005, 11:19 AM
http://www.w3schools.com/htmldom/dom_obj_image.asp

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

glenngv
01-24-2005, 11:27 AM
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 (http://www.codingforums.com/showthread.php?t=50196#post263910).

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.

Willy Duitt
01-24-2005, 11:43 AM
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

Kor
01-24-2005, 11:47 AM
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.

glenngv
01-24-2005, 12:06 PM
Mine alerted 'no' first. Result may vary depending on the environment especially if the existing image has been cached. Have you tried this?


<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++">

Kor
01-24-2005, 12:09 PM
that is quite inteersting... as I have always thought that the picture's loading process can not be controlled/measured by javascript... he...

glenngv
01-24-2005, 12:12 PM
Now you know. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum