By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,956 Members | 1,683 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,956 IT Pros & Developers. It's quick & easy.

Javascript image src

P: n/a
Hi

I'm pretty rubbish at java and I'm trying to get an image to change
when a user clicks a link.

I don't know why this doesn't work. Can anyone help?

foc.src=foc.src=='1.gif'?'2.gif':'1.gif';

foc is the image element - if i do foc.src='2.gif' it will quite
happily change but I want it to alternate between the two images every
time the link is clicked.

Thanks in advance

Jan 10 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
is this code in a function that is called on an "onclick" event? If so,
please post the HTML code, and the javascript function.

Jan 10 '06 #2

P: n/a
Ivo
<eu*****@hotmail.com> wrote
foc.src=foc.src=='1.gif'?'2.gif':'1.gif';

foc is the image element - if i do foc.src='2.gif' it will quite
happily change but I want it to alternate between the two images every
time the link is clicked.


Although you eset the src to '1.gif', the browser will make it the full
http://yoursite/path/1.gif.
So in the test, check that '1.gif' is part of the string, with
foc.src.indexOf( '1.gif' ) or so. If you have 11.gif and 21.gif, the check
needs to do a little more work.

--
hth
ivo
http://4umi.com/web/javascript/
Jan 10 '06 #3

P: n/a
Cheers Ivo, that worked an absolute treat. :)

My first ever post on usenet and my problem solved in 15 minutes.
Awsome guys. Thanks.

Jan 10 '06 #4

P: n/a
OK, so my little image script i managed to get working but not in
firefox. The Firefox java console says:

Error: foc.src has no properties
Source File: file:///.../test.htm
Line: 39

My code in full is:

function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild;
if(foc.src.indexOf('down.gif')>0){
foc.src = 'up.gif';}
else{
foc.src = 'down.gif';}
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;
foc.style.display=foc.style.display=='block'?'none ':'block';}}

This is called like so:

<div class="header"><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<img src="down.gif" border="0"></img>Test</a></div>
<div class="dspcont">
Content - yay!
</div>

Do any of you guys know how i can get the image 'src' value in firefox?
Or if this is impossible - detect the fact that it is firefox and go
straight to setting the divs style property because i know that the div
will work.

Thanks again

Jan 11 '06 #5

P: n/a

Nays wrote:

My code in full is:

function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild;
You're setting foc twice here; is that a typo? And, you're assuming,
without checking, that foc refers to an IMG element.
if(foc.src.indexOf('down.gif')>0){
foc.src = 'up.gif';}
else{
foc.src = 'down.gif';}
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;
foc.style.display=foc.style.display=='block'?'none ':'block';}}

This is called like so:

<div class="header"><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<img src="down.gif" border="0"></img>Test</a></div>


Notice that there's a bit of (whitespace) text between the end of the
div tag and the beginning of the img tag. *That" is a Text node, and
is the firstChild of the div element whose reference is passed to
the function dsp. IE often eliminates these.

[Omitting comments about the javascript: protocol; I'm sure others will
do so.]

A less fragile construction might be (untested)

function dsp(imgID,divID) {
var img = document.getElementById(imgID),
div = document.getElementById(divID);
if (img != null) {
if (img.src.indexOf('down.gif') >= 0) img.src = 'up.gif';
else img.src = 'down.gif';
}
if (div != null && div.style != null)
div.style.display = (div.style.display == '' ? 'none' : '');
}

and

<div class="header"><a href="#here" name="here" class="dsphead"
onclick="dsp('downImg','cntDiv');return false"><img id="downImg"
src="down.gif" border="0">Test</a></div>
<div id="cntDiv">Content - Yay!</div>
hj
Jan 11 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.