Javascript image src

Discussion in 'Javascript' started by euronay@hotmail.com, Jan 10, 2006.

  1. Guest

    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, 2006
    #1
    1. Advertising

  2. jshanman Guest

    is this code in a function that is called on an "onclick" event? If so,
    please post the HTML code, and the javascript function.
     
    jshanman, Jan 10, 2006
    #2
    1. Advertising

  3. Ivo Guest

    <> 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/
     
    Ivo, Jan 10, 2006
    #3
  4. Guest

    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, 2006
    #4
  5. Nays Guest

    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
     
    Nays, Jan 11, 2006
    #5
  6. Howard Jess Guest

    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
     
    Howard Jess, Jan 11, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Steve Richter

    <txt src= ...> equivalent of <img src= ...>

    Steve Richter, Feb 8, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    2,179
    Laurent Bugnion
    Feb 9, 2006
  2. Greg Johnson
    Replies:
    4
    Views:
    3,140
  3. Replies:
    1
    Views:
    1,674
    Alex Hunsley
    Mar 23, 2007
  4. pheadxdll
    Replies:
    16
    Views:
    3,885
    Neredbojias
    Jun 6, 2007
  5. Soren Vejrum
    Replies:
    4
    Views:
    762
    Lasse Reichstein Nielsen
    Jul 5, 2003
Loading...

Share This Page