Topic: changing image src using dom (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=23831" title="Pages that link to Topic: changing image src using dom (Page 1 of 1)" rel="nofollow" >Topic: changing image src using dom <span class="small">(Page 1 of 1)</span>\

 
ninmonkeys
Nervous Wreck (II) Inmate

From:
Insane since: May 2004

IP logged posted posted 10-27-2004 21:49 Edit Quote

If I have an image with the id imageLine, then is the correct way to change its source

code:
document.images.imageLine.src = 'new/source';

?

This appears to be working correctly on both IE and firefox, but firefox says "transfering data from localhost..." on the status bar forever, or untill I refresh.

Before I used document.imageLine.src it worked in mozilla(didn't have the status bar message), but this way doesn't work in IE.

(Edited by ninmonkeys on 10-27-2004 22:00)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-27-2004 22:25 Edit Quote

The DOM way is :

code:
document.getElementById( idOfYouImage ).src  = 'new/source';

Or even better :

code:
document.getElementById( idOfYouImage ).setAttribute( 'src', 'new/source' );

Hope that helps,

ninmonkeys
Nervous Wreck (II) Inmate

From:
Insane since: May 2004

IP logged posted posted 10-28-2004 00:51 Edit Quote

Now it doesn't work at all (when I click the button, I get a javascript error)

In IE 6.0 using either of those methods I get:

quote:
error: 'document.getElementById(...)' is null or not an object

In FireFox 1.0 with either method I get

quote:
Error: imageLine is not defined

If I use firefox's DOM inspector, and search for "imageLine" it finds it...

Here's my javascript, with the 3 methods I tried:

code:
<script type="text/javascript">
<!--
function updateLine(data)
{
// poi for the following:
//document.getElementById( idOfYouImage ).src = 'new/source';
//document.getElementById( idOfYouImage ).setAttribute( 'src', 'new/source' );

//update image with new values


//poi #1
// document.getElementById(imageLine).src = 'images/drawline.php?x1=' +
// data.x1.value + '&y1=' + data.y1.value + '&x2=' + data.x2.value +
// '&y2=' + data.y2.value;

//poi #2: quote 'better way'
document.getElementById(imageLine).setAttribute('src',
'images/drawline.php?x1=' + data.x1.value + '&y1=' +
data.y1.value + '&x2=' + data.x2.value + '&y2=' + data.y2.value);

// oldest way
// document.images.imageLine.src = 'images/drawline.php?x1=' +
// data.x1.value + '&y1=' + data.y1.value + '&x2=' +
// data.x2.value + '&y2=' + data.y2.value;
}
-->
</script>

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-28-2004 01:23 Edit Quote

you MUST put some quotes around the ID of your object in getElementById( ) unless you use a variable ( like I did in my "general case" example ).



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu