Accessing image src in internet explorer

[faraz_mit]

Hi,
This might be an easy question or I am missing something but I can't
access the src property of an image tag in IE but I can access the
width property. Is my syntax wrong for accessing the src property. I
also tried getelementById and no luck

I have the following simple javascript function in the head section:

function changeimgsrc(img_src){
alert(document.all.im.src); //DOESN'T work and shows
undefined in IE
alert(document.all.im.width]); // WORKS and shows 360
}

I have the following nested divs in my body:

<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle">...</h3>
<div class="horizontal_accordion_content">
<div id="mt" ><img id="im" name="im1" width="360" src="images/
com_01_angle.gif" /></div>
....
<div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div>
......
Thanks for your help in advanced.
Ross

 

[My Pet Programmer]

faraz_mit said:

Hi,
This might be an easy question or I am missing something but I can't
access the src property of an image tag in IE but I can access the
width property. Is my syntax wrong for accessing the src property. I
also tried getelementById and no luck

I have the following simple javascript function in the head section:

function changeimgsrc(img_src){
alert(document.all.im.src); //DOESN'T work and shows
undefined in IE
alert(document.all.im.width]); // WORKS and shows 360
}

Wow, I haven't seen document.all in years. Don't ever, ever, ever, ever,
use it again.

You have document.images['im'], document.getElementById('im'),
document['images']['im'], or any other of ten ways to get at the image
that will work in more than just one non-compliant browser.

I have the following nested divs in my body:

<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle">...</h3>
<div class="horizontal_accordion_content">
<div id="mt" ><img id="im" name="im1" width="360" src="images/
com_01_angle.gif" /></div>
....
<div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div>

Instead of # in the href, put a link to a page that will let people know
they have to have javascript installed. Then use this tag:

<a href="my_no_js_page.html"
onclick="changeImgSrc('cum_01...gif');return false;">test</a>

That way people without javascript won't just get an error, or a page
refresh that means nothing to them.

Download FireFox, and Safari for Windows, and test what you write in all
of them. You'll be glad you did when you post code here.

--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein

 

[My Pet Programmer]

Randy Webb said:

That I disagree with. The only purpose for the link is a JS effect, let
JS create the link.

Well, shouldn't he/she/they/the bunch of em at least cancel the href
with return false in the onclick so that the page doesn't refresh for
them if they don't have it enabled?


--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein

 

[My Pet Programmer]

My Pet Programmer said:

Randy Webb said:
Well, shouldn't he/she/they/the bunch of em at least cancel the href
with return false in the onclick so that the page doesn't refresh for
them if they don't have it enabled?

Ok, so I just realized how friggin' ridiculous THAT comment was. How are
they supposed to cancel the href with return false if JS is disabled?
God, I'm an idiot sometimes. Ignore me, it's what the wife does.

~A!

--
Anthony Levensalor
(e-mail address removed)

Only two things are infinite, the universe and human stupidity,
and I'm not sure about the former. - Albert Einstein

 

[Thomas 'PointedEars' Lahn]

This might be an easy question or I am missing something but I can't
access the src property of an image tag in IE but I can access the
width property. Is my syntax wrong for accessing the src property. I
also tried getelementById and no luck

I have the following simple javascript function in the head section:

function changeimgsrc(img_src){
alert(document.all.im.src); //DOESN'T work and shows
undefined in IE
alert(document.all.im.width]); // WORKS and shows 360
}

If that is so (and not only the result of an oversight on your part), then a
possible explanation would be that MSHTML is confused about how to refer to
the `img' element, since you have given it a name *and* an ID that differs
from the name. Unfortunately, that would apply to access with
document.getElementById() as well there; since the issue is commonplace, I
have recently created a test case for it:

http://pointedears.de/scripts/test/dom/names-and-ids.php

(IE's behavior is annoying, isn't it?)

That said, don't use document.all at all.

[...]I have the following nested divs in my body:

<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle">...</h3>
<div class="horizontal_accordion_content">
<div id="mt" >

If would appear you have a serious case of divitis[tm]. Try to minimize the
number of `div' elements.

<img id="im" name="im1" width="360" src="images/
com_01_angle.gif" />

^
See above. Also, avoid serving XHTML to IE; it does not support it.


PointedEars