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.gi f"
alt="Click" />
</a>

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

<script language="javas cript" type="text/javascript" >
var testVar = 1;
var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM =
document.getEle mentById;
if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1;
else {
var nsDOM = ((navigator.app Name.indexOf('N etscape') != -1)
&& (parseInt(navig ator.appVersion ) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) {
if (stdDOM) return wS ? document.getEle mentById(object Id).style:
document.getEle mentById(object Id);
if (ieDOM) return wS ? document.all[objectId].style:
document.all[objectId];
if (nsDOM) return document.layers[objectId];
}

function hideColumn()
{
var objs = xDOM('menu_colu mn',1)
var objs2 = xDOM('imgArrow' ,1)
if ( objs.display != 'none' )
{
objs.display = 'none';
objs2.src = 'App_Themes/Trmis/WebResource4.gi f'
}
else
{
objs.display = 'block';
objs2.src = 'App_Themes/Trmis/WebResource3.gi f'
}

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="javas cript" type="text/javascript" >

function hideColumn()
{

var objs = document.getEle mentById('menu_ column').style;
var objs2 = document.getEle mentById('imgAr row');
if ( objs.display != 'none' )
{
objs.display = 'none';
objs2.src = 'App_Themes/Trmis/WebResource4.gi f'
}

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

}

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.c om, 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/ >

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.i mages['imagename'].src.match('Web Resource4.gif') ?'WebResource3. gif':'WebResour ce4.gif';

}

It could be made generic very simply though.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Walton]

Please quote what you are replying to.

If you want to post a followup via groups.google.c om, 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.image s['imagename'].src=document.i mages['imagename'].src.match('We* bResource4.gif' )?'WebResource3 .gif':'WebResou rce4.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:

<snip>

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.

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

function changeVisibilit y(elem,visibili tyMode){
document.getEle mentById(elem). style.visibilit y = 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.appNa me as 99.99% of
code that is based on the navigator.appNa me needs to be re-written as it
is crap code.

function swapPic(){
document.images['imagename'].src=document.i mages['imagename'].src.match('We* bResource4.gif' )?'WebResource3 .gif':'WebResou rce4.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.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Thomas 'PointedEars' Lahn]

Burak Gunay wrote:

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.gi f"
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.gi f" 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 ...

<URL:http://hixie.ch/advocacy/xhtml>
WebResource3.gi f is an arrow pointing left and when I click on it I
want to replace it with WebResource4.gi f 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.or g/>
PointedEars
--
The English government is much of a German poodle as
other governments. The Germans infiltrated them all.
-- "The only real Barbara Schwarz", dsw.scientology ,
<16************ **************@ posting.google. com>)