Problem with Setting the "src" of an "img" using javascript

[Burak Gunay]

Hello,

In my asp.net 2.0 page, I have a hyperlink with an arrow image

<a id="imgtest" href="#"onclick="return hideColumn()">
<img id="imgArrow" src="App_Themes/Trmis/WebResource3.gif"
alt="Click" />
</a>

WebResource3.gif is an arrow pointing left and when I click on it I
want to replace it with WebResource4.gif which is an arrow pointing
right, but for some reason the code below is not working.

<script language="javascript" type="text/javascript" >
var testVar = 1;
var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM =
document.getElementById;
if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1;
else {
var nsDOM = ((navigator.appName.indexOf('Netscape') != -1)
&& (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) {
if (stdDOM) return wS ? document.getElementById(objectId).style:
document.getElementById(objectId);
if (ieDOM) return wS ? document.all[objectId].style:
document.all[objectId];
if (nsDOM) return document.layers[objectId];
}

function hideColumn()
{
var objs = xDOM('menu_column',1)
var objs2 = xDOM('imgArrow',1)


if ( objs.display != 'none' )
{
objs.display = 'none';
objs2.src = 'App_Themes/Trmis/WebResource4.gif'
}
else
{
objs.display = 'block';
objs2.src = 'App_Themes/Trmis/WebResource3.gif'
}

return true;
}

</script>

Any help will be appreciated.

Thanks,

Burak

 

[Walton]

what brower(s) are you testing with? Are you getting any specific
errors in the javascript console?

 

[Burak Gunay]

I am using IE 6.0 and I am not getting any errors in the browser.

what is the javascript console?

 

[Walton]

in firefox if you go to Tools | JavaScript console, you get some really
helpful javascript debugging info. much more specific than IE

 

[Walton]

replace all your script with this script and let me know if it works:


<script language="javascript" type="text/javascript" >

function hideColumn()
{

var objs = document.getElementById('menu_column').style;
var objs2 = document.getElementById('imgArrow');


if ( objs.display != 'none' )
{
objs.display = 'none';
objs2.src = 'App_Themes/Trmis/WebResource4.gif'
}

else
{
objs.display = 'block';
objs2.src = 'App_Themes/Trmis/WebResource3.gif'

}

return true;

}

</script>

 

[Burak Gunay]

Thanks Walton, it worked.

 

[Randy Webb]

Walton said the following on 5/19/2006 10:32 AM:

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

replace all your script with this script and let me know if it works:

Looks like a lot of trouble to simply change the source of an image.

function swapPic(){
document.images['imagename'].src=document.images['imagename'].src.match('WebResource4.gif')?'WebResource3.gif':'WebResource4.gif';

}

It could be made generic very simply though.

 

[Walton]

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

<URL: http://www.safalra.com/special/googlegroupsreply/ >

Thanks for the head's up. I'm new to this kind of stuff.

Looks like a lot of trouble to simply change the source of an image.

If you look at the script again, you'll notice he's not just changing
the source of an image. he also wants to hide/unhide a column, which
may or may not be referenced easily relative to the image element. So
there is a bit more to it than your solution.

function swapPic(){
document.images['imagename'].src=document.images['imagename'].src.match('We­bResource4.gif')?'WebResource3.gif':'WebResource4.gif';
}

I never knew about the document.images properties before... is it
compatible in most browsers?

 

[Randy Webb]

Walton said the following on 5/19/2006 4:20 PM:

If you look at the script again, you'll notice he's not just changing
the source of an image. he also wants to hide/unhide a column, which
may or may not be referenced easily relative to the image element. So
there is a bit more to it than your solution.

Then you add a second function that I have posted twice in the last week
or so:

function changeVisibility(elem,visibilityMode){
document.getElementById(elem).style.visibility = visibilityMode;
}

And call it appropriately with the element ID and the visibility Mode
you want, whether visible or hidden.

But to be honest, I stopped reading his text (I don't want to call it
code or crap) when I read the part with navigator.appName as 99.99% of
code that is based on the navigator.appName needs to be re-written as it
is crap code.

function swapPic(){
document.images['imagename'].src=document.images['imagename'].src.match('We­bResource4.gif')?'WebResource3.gif':'WebResource4.gif';
}

I never knew about the document.images properties before... is it
compatible in most browsers?

NN4, IE4> Any Mozilla browser and a ton more. It is a lot more
compatible than gEBI is, that is for sure.

But, document.images is a collection, not a property.

 

[Thomas 'PointedEars' Lahn]

In my asp.net 2.0 page, I have a hyperlink with an arrow image

<a id="imgtest" href="#"onclick="return hideColumn()">
<img id="imgArrow" src="App_Themes/Trmis/WebResource3.gif"
alt="Click" />
</a>

This is XHTML markup. XHTML UAs most certainly already support the
`onclick' attribute for `img' elements; you do not need a not gracefully
degrading a[href=#,onclick]:

<img src="App_Themes/Trmis/WebResource3.gif" alt="Click"
id="imgArrow" onclick="return hideColumn();" />

See also <URL:http://jibbering.com/faq/>

Note however, that IE does not support XHTML. AFAIK, it is the major
drawback of ASP.NET that it generates XHTML markup code that is served
as text/html and therefore relies on error correction to be properly
displayed. That is Microsoft's idea of proper XHTML support ...

WebResource3.gif is an arrow pointing left and when I click on it I
want to replace it with WebResource4.gif which is an arrow pointing
right, but for some reason the code below is not working.

Well, the code is simply junk.

<URL:http://pointedears.de/scripts/test/whatami>
And prophylactic: <URL:http://validator.w3.org/>


PointedEars