IE can't access image src

[faraz_mit]

Hi
I posted the same issue but since I was using the old syntax of
"document.all", I took the focus away from the actual problem. I am
trying to change the image source on a click event but can't access
the image src using Internet explorer. Same code works fine in Firefox
and alerts the correct image src but I get undefined in Internet
explorer. I am using IE version 6.

I also tried document.images['im'], document.getElementById['im'], and
document['images']['im'] but none of them worked.

Here is the code I have:

/* in the head section I have the following simple javascript function
*/
function changeimgsrc(img_src) {
alert(document.getElementById('im').src);
document.getElementById('im').src = img_src;
}

/* in the body section I have the following nested div structure */
<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle">...</h3>
<div id="m1" class="horizontal_accordion_content">
<div id="m2" ><img id="im" width="360" src="images/
com_01_angle.gif" /></div>
....
<div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div>
......

Thanks alot for your help,
Ross

 

[Lee]

faraz_mit said:

Hi
I posted the same issue but since I was using the old syntax of
"document.all", I took the focus away from the actual problem. I am
trying to change the image source on a click event but can't access
the image src using Internet explorer. Same code works fine in Firefox
and alerts the correct image src but I get undefined in Internet
explorer. I am using IE version 6.

I also tried document.images['im'], document.getElementById['im'], and
document['images']['im'] but none of them worked.

Here is the code I have:

/* in the head section I have the following simple javascript function
*/
function changeimgsrc(img_src) {
alert(document.getElementById('im').src);
document.getElementById('im').src = img_src;
}

/* in the body section I have the following nested div structure */
<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle">...</h3>
<div id="m1" class="horizontal_accordion_content">
<div id="m2" ><img id="im" width="360" src="images/
com_01_angle.gif" /></div>
....
<div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div>

1) Don't use the onclick event of a link tag to make changes to
the current page. Your code is going to change the src of the
image, and then immediately follow the link to "#", which is the
top of the current page, which, depending on the browser, may
reload the page in the process, restoring the original image.

2) If you absolutely insist on using the onclick event of a link,
at least have the onclick event handler return false, so the link
to "#" will be cancelled:

onclick="changeimgsrc('com_01_angel_blue.gif');return false"

3) It looks to me like you probably really want to change the
src attribute to 'images/cum_01_angel_blue.gif', anyway.


--

 

[Thomas 'PointedEars' Lahn]

I posted the same issue

Yes, indeed. Please don't start new threads for the same problem.

[...] Same code works fine in Firefox
and alerts the correct image src but I get undefined in Internet
explorer. I am using IE version 6.

I also tried document.images['im'], document.getElementById['im'], and

document.getElementById['im'] isn't going to work (it would yield
`undefined' at best). gEBI is a method.

document['images']['im'] but none of them worked.

Here is the code I have:

It's still XHTML, there are still probably too many `div' elements, and you
don't generate the link with script as suggested. Is your markup even
valid? http://validator.w3.org/


PointedEars

 

[David Mark]

Hi
I posted the same issue but since I was using the old syntax of
"document.all", I took the focus away from the actual problem. I  am
trying to change the image source on a click event but can't access
the image src using Internet explorer. Same code works fine in Firefox
and alerts the correct image src but I get undefined in Internet
explorer. I am using IE version 6.

I also tried document.images['im'], document.getElementById['im'], and

That second one is nonsense. Use:

document.getElementById('im')

(presuming that the image element has an ID of "im.")

document['images']['im'] but none of them worked.

That is the same as document.images['im'] or document.images.im, which
will retrieve the image if it has that name. IIRC, in some browsers,
it will retrieve an image with an ID of 'im', but only if there is no
contradictory name attribute.

Here is the code I have:

/* in the head section I have the following simple javascript function
*/
function changeimgsrc(img_src) {
         alert(document.getElementById('im').src);
         document.getElementById('im').src = img_src;

Since you used an ID attribute and no name, this would be your best
bet.

}

/* in the body section I have the following nested div structure */
<div id="horizontal_container" >
 <h3 class="horizontal_accordion_toggle">...</h3>
        <div id="m1" class="horizontal_accordion_content">
                <div  id="m2" ><img id="im"  width="360"  src="images/
com_01_angle.gif"   /></div>

It isn't the cause of the problem, but get rid of that slash at the
end of the img tag (unless you plan to serve this as XHTML.)

                ....
               <div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div>
                 ......

Do you have an element with a name attribute of "im" elsewhere on the
page? IE will retrieve elements by name with getElementById.

 

[faraz_mit]

Hi
I posted the same issue but since I was using the old syntax of
"document.all", I took the focus away from the actual problem. I am
trying to change the image source on a click event but can't access
the image src using Internet explorer. Same code works fine in Firefox
and alerts the correct image src but I get undefined in Internet
explorer. I am using IE version 6.

I also tried document.images['im'], document.getElementById['im'], and
document['images']['im'] but none of them worked.

Here is the code I have:

/* in the head section I have the following simple javascript function
*/
function changeimgsrc(img_src) {
alert(document.getElementById('im').src);
document.getElementById('im').src = img_src;

}

/* in the body section I have the following nested div structure */
<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle">...</h3>
<div id="m1" class="horizontal_accordion_content">
<div id="m2" ><img id="im" width="360" src="images/
com_01_angle.gif" /></div>
....
<div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div>
......

Thanks alot for your help,
Ross

The interesting part is that when I use width instead of src it works
for both IE and firefox. Any ideas ?

 

[faraz_mit]

I posted the same issue

Yes, indeed. Please don't start new threads for the same problem.

[...] Same code works fine in Firefox
and alerts the correct image src but I get undefined in Internet
explorer. I am using IE version 6.

I also tried document.images['im'], document.getElementById['im'], and

document.getElementById['im'] isn't going to work (it would yield
`undefined' at best). gEBI is a method.

document['images']['im'] but none of them worked.

Here is the code I have:

It's still XHTML, there are still probably too many `div' elements, and you
don't generate the link with script as suggested. Is your markup even
valid? http://validator.w3.org/

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

I can get the width but not the src !!!!!. I am not sure what's going
on. I can even get the alt content by typing
alert(document.getElementById('im').alt); only
alert(document.getElementById('im').src) doesn't work

 

[Thomas 'PointedEars' Lahn]

document['images']['im'] but none of them worked.
Here is the code I have:

It's still XHTML, there are still probably too many `div' elements, and you
don't generate the link with script as suggested. Is your markup even
valid? http://validator.w3.org/
[...]

I can get the width but not the src !!!!!.

Your `!' key is malfunctioning.

I am not sure what's going on. I can even get the alt content by typing
alert(document.getElementById('im').alt); only
alert(document.getElementById('im').src) doesn't work

You cannot be helped if you don't follow the advice that you have been given
already.

And please, trim your quotes.


PointedEars

 

[faraz_mit]

I posted the same issue

Yes, indeed. Please don't start new threads for the same problem.

[...] Same code works fine in Firefox
and alerts the correct image src but I get undefined in Internet
explorer. I am using IE version 6.

I also tried document.images['im'], document.getElementById['im'], and

document.getElementById['im'] isn't going to work (it would yield
`undefined' at best). gEBI is a method.

document['images']['im'] but none of them worked.

Here is the code I have:

It's still XHTML, there are still probably too many `div' elements, and you
don't generate the link with script as suggested. Is your markup even
valid? http://validator.w3.org/

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

I just checked my page withe validator you suggested and it passed the
validations successfully. Can you tell me what you meant by 'you
don't generate the link with script as suggested. '. IE is killing me

 

[Anthony Levensalor]

faraz_mit said:
[snip]


I literally just ran your code in IE7:
function changeimgsrc(img_src) {
alert(document.getElementById('im').src);
document.getElementById('im').src = img_src;
}

/* in the body section I have the following nested div structure */
</script>
<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle"></h3>
<div id="m1" class="horizontal_accordion_content">
<div id="m2" ><img id="im" width="360"
src="images/com_01_angle.gif" /></div>
....
<div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div></div></div>

I closed up the last fifteen or so divs, but it ran. IE popped up a
clever little alert with the src attribute plain as day. Something else
is going on in your code, and I think you may have isolated the wrong chunk.

~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

 

[faraz_mit]

faraz_mit said:
[snip]

I literally just ran your code in IE7:
function changeimgsrc(img_src) {
alert(document.getElementById('im').src);
document.getElementById('im').src = img_src;

}

/* in the body section I have the following nested div structure */
</script>
<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle"></h3>
<div id="m1" class="horizontal_accordion_content">
<div id="m2" ><img id="im" width="360"
src="images/com_01_angle.gif" /></div>
....
<div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div></div></div>

I closed up the last fifteen or so divs, but it ran. IE popped up a
clever little alert with the src attribute plain as day. Something else
is going on in your code, and I think you may have isolated the wrong chunk.

~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

Hey there, Thanks for the reply. The actual code is on
http://mkweb123.web.aplus.net/kayaks.php. Thanks again.

 

[Anthony Levensalor]

faraz_mit said:

On Dec 28, 7:46 pm, Anthony Levensalor <[email protected]> [snip]
Hey there, Thanks for the reply. The actual code is on
http://mkweb123.web.aplus.net/kayaks.php. Thanks again.

Ok, you have more things going on in this page than I can even begin to
comprehend. prototype, lightbox, effects.js, accordion.js, there is a lot.

The HTML you are physically writing is absolutely clobbered by the stuff
you're instantiating and giving free reign over your page. The element
with an id of 'im' is an image when you write the code, but when I check
out the generated source in IE, I see no img element in IE at all. In
the web developer toolbar, when I check out the element source for what
"used" to be your image, I see a looooong string of code that I think it
inappropriate to paste in it's entirety.

<VAR class="iradius15 noshade noshine" id="im" title=""
style="VISIBILITY: visible; WIDTH: 360px; HEIGHT: 152px" h.....

THAT is your image at runtime, a VAR tag (not sure what that is) with
other elements embedded in it. It is 1367 characters long, the element
you thought was an image.

In short, I am way out of my league looking at that. My best guess is
that one of the libraries you're implementing has decided that you are
not in control any more, and is giving you cool affects in exchange for
completely screwing your page.

Maybe somebody can give you a little more insight, I'm just not equipped.

Best of luck on that.

~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

 

[David Mark]

faraz_mit said:
[snip]

I literally just ran your code in IE7:
function changeimgsrc(img_src) {
          alert(document.getElementById('im').src);
          document.getElementById('im').src = img_src;

/* in the body section I have the following nested div structure */
</script>
<div id="horizontal_container" >
  <h3 class="horizontal_accordion_toggle"></h3>
         <div id="m1" class="horizontal_accordion_content">
                 <div  id="m2" ><img id="im"  width="360"
src="images/com_01_angle.gif"   /></div>
                 ....
                <div ><a href="#"
onclick="changeimgsrc('cum_01_angel_blue.gif');">test</a> </div></div></div>

I closed up the last fifteen or so divs, but it ran. IE popped up a
clever little alert with the src attribute plain as day. Something else
is going on in your code, and I think you may have isolated the wrong chunk.

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

Hey there, Thanks for the reply. The actual code is onhttp://mkweb123.web.aplus.net/kayaks.php.

Weren't you trying to do this effect with jQuery a few days back?
When I said to stop using jQuery, I didn't mean to switch to Prototype/
Scriptaculous. You are wasting your time with these libraries. Do
you really think that effect is going to sell more kayaks? More
likely, these bloated and incompetently written scripts are going to
drive customers away.

The effect did work for me in IE7, until I rapidly clicked one of the
boats, then it predictably threw a script error (this.showAccordian is
null or not an object.) I knew it would do that before I even looked
at the accordian script. How? Because the people who write these
libraries and the widgets that run on top of them are idiots.

Quoting from the top of the accordian script:

// accordion.js v2.0
//
// Copyright (c) 2007 stickmanlabs
// Author: Kevin P Miller | http://www.stickmanlabs.com

An idiot.

//
// Accordion is freely distributable under the terms of an MIT-style
license.

Free scripts are usually worth every penny.

//
// I don't care what you think about the file size...
// Be a pro:

See what I mean?

// http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
// http://rakaz.nl/item/make_your_page...ning_and_compressing_javascript_and_css_files

This is a load of crap. Compression is automatically negotiated by
Web servers and modems. There is no need for manual intervention.
Doing so invites all sorts of problems. Especially if you do it the
way this article recommends.