473,325 Members | 2,872 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Javascript image src

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
5 7073
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
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
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
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

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Cynthia | last post by:
I'm looking for javascript code that when I mouse over a menu item will display a picture elsewhere on the page. I know it exists, but the ones I've found so far just swap out the menu item in...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.