Topic: changing image src using dom Pages that link to <a href="https://ozoneasylum.com/backlink?for=23831" title="Pages that link to Topic: changing image src using dom" rel="nofollow" >Topic: changing image src using dom\
 
Author Thread
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:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu