onClick() on an anchor that doesn't force the page to jump to thetop?

Discussion in 'HTML' started by Aaron Freeman, Mar 17, 2006.

  1. I have a javascript swap image funciton that's called when a user clicks
    on an image wrapped by an anchor. The anchor points to "#", but the
    problem is that the image is below the fold, and when the user clicks
    on the image, the image swaps but the page links to "#" and scrolls the
    page to the top.

    So it looks like:

    <a href="#" onClick="function()"><img src="image.gif"></a>

    If I place the onClick on the image itself, the swap will work without
    jumping the page, but the cursor won't change to indicate a "hot" image.

    Is there an easy solution here?

    Thanks!
     
    Aaron Freeman, Mar 17, 2006
    #1
    1. Advertising

  2. Aaron Freeman

    Mark Parnell Guest

    Re: onClick() on an anchor that doesn't force the page to jump to the top?

    Deciding to do something for the good of humanity, Aaron Freeman
    <> declared in alt.html:

    > problem is that the image is below the fold, and when the user clicks
    > on the image, the image swaps but the page links to "#" and scrolls the
    > page to the top.


    Assuming the user even has Javascript enabled/available. Anyone else
    just gets taken to the top of the page, and nothing happens to the
    image. Besides, swapping an image on click is an unusual occurrence -
    most users will expect to be taken somewhere when they click.

    --
    Mark Parnell

    Now implementing http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Mar 17, 2006
    #2
    1. Advertising

  3. Aaron Freeman

    Neredbojias Guest

    Re: onClick() on an anchor that doesn't force the page to jump to the top?

    With neither quill nor qualm, Aaron Freeman quothed:

    > I have a javascript swap image funciton that's called when a user clicks
    > on an image wrapped by an anchor. The anchor points to "#", but the
    > problem is that the image is below the fold, and when the user clicks
    > on the image, the image swaps but the page links to "#" and scrolls the
    > page to the top.
    >
    > So it looks like:
    >
    > <a href="#" onClick="function()"><img src="image.gif"></a>
    >
    > If I place the onClick on the image itself, the swap will work without
    > jumping the page, but the cursor won't change to indicate a "hot" image.
    >
    > Is there an easy solution here?


    Easy? How about right?

    What if the proverbial user has javascript disabled? He should get
    something, shouldn't he?

    <a href="bigimage.gif"><img src="image.gif" alt=""></a>

    Notice the 'alt=""'. It is required, and it's good if there's some
    meaningful text between the quotes.

    Now, if you want to do the swap thing (for whatever reason,) here is the
    same line with the added inclusion.

    <a href="bigimage.gif" onClick="function();return false;"><img
    src="image.gif" alt=""></a>

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Mar 17, 2006
    #3
  4. Re: onClick() on an anchor that doesn't force the page to jump tothe top?

    On Fri, 17 Mar 2006, Neredbojias wrote:

    > <a href="bigimage.gif"><img src="image.gif" alt=""></a>


    Someone's likely to take that all too literally.

    > Notice the 'alt=""'.


    I did. There are situations where a null alternative text is not only
    acceptable, it's even recommended; but when the image is the only
    content inside a link, that's a clear accessibility failure - as most
    of the accessibility checkers would report.

    > It is required, and it's good if there's some
    > meaningful text between the quotes.


    Quite. In this case, accessibility requires it. (If one were trying
    to completely hide a link from some class of users, then I'd recommend
    either reconsidering the requirement, or doing it in a different way).
     
    Alan J. Flavell, Mar 17, 2006
    #4
  5. Re: onClick() on an anchor that doesn't force the page to jump to the top?

    While the city slept, Aaron Freeman () feverishly typed...

    > I have a javascript swap image funciton that's called when a user
    > clicks on an image wrapped by an anchor. The anchor points to "#",
    > but the problem is that the image is below the fold, and when the
    > user clicks on the image, the image swaps but the page links to "#"
    > and scrolls the page to the top.


    [...]

    That is because you have fallen into the trap of having to use <a href...>
    to gather your onclick event, but you think it doesn't need to point to a
    file, so you erroneously use "#" as the URI assuming that goes nowhere.
    Unfortunately it usually goes to the top of the page.

    The big problem you have is that you aren't providing any support for those
    users who have javascript turned off or even unavailable. You should make
    the image available to the user regardless. As others have said, you could
    link direct to the image, or I have a reasonably elegant solution here if
    php is available to you (or, it could of course be adapted to another
    server-side language): http://www.nigenet.org.uk/stuff/thumbtastic/ - This
    displays a main image and a series of thumbnails underneath. It uses
    javascript to change the main image according to which thumbnail was clicked
    (and - where available - also changes the alt-text). If javascript is not
    available to the end user, the page is reopened and php sets the main image
    to the one selected.

    Hope that helps.

    Cheers,
    Nige

    --
    Nigel Moss http://www.nigenet.org.uk
    Mail address will bounce. | Take the DOG. out!
    "Your mother ate my dog!", "Not all of him!"
     
    nice.guy.nige, Mar 17, 2006
    #5
  6. Aaron Freeman

    Andy Dingley Guest

    Re: onClick() on an anchor that doesn't force the page to jump to the top?

    Aaron Freeman wrote:

    > <a href="#" onClick="function()"><img src="image.gif"></a>


    > Is there an easy solution here?


    <a href="#" onClick="function(); return false;"><img
    src="image.gif"></a>

    There are still issues about whether this is a good idea, and how to
    support non-JS
     
    Andy Dingley, Mar 17, 2006
    #6
  7. Re: onClick() on an anchor that doesn't force the page to jump to the top?

    While the city slept, Andy Dingley () feverishly
    typed...

    > <a href="#" onClick="function(); return false;"><img
    > src="image.gif"></a>


    Or... <a href="image.gif" onClick="function; return false;">......

    > There are still issues about whether this is a good idea, and how to
    > support non-JS


    As for non-JS, see above. Although this is still not the ideal solution to
    the poster's problem, as it will just open an instance of the image.

    Cheers,
    Nige

    --
    Nigel Moss http://www.nigenet.org.uk
    Mail address will bounce. | Take the DOG. out!
    "Your mother ate my dog!", "Not all of him!"
     
    nice.guy.nige, Mar 17, 2006
    #7
  8. Re: onClick() on an anchor that doesn't force the page to jump tothe top?

    Aaron Freeman wrote:
    > I have a javascript swap image funciton that's called when a user clicks
    > on an image wrapped by an anchor. The anchor points to "#", but the
    > problem is that the image is below the fold, and when the user clicks
    > on the image, the image swaps but the page links to "#" and scrolls the
    > page to the top.


    First of all why are your using a 'A' (link) that goes nowhere? Do you
    just want to do some sort of a image swap, if so there are other ways to
    to do an image swap on mouse-overs. Generally when the cursor changes to
    the 'hand' folks expect i to be a link that takes you somewhere. Without
    a URL is is hard to say in your case but it seems like your are
    "painting a false 'door' on a solid brick wall like a Candid Camera stunt"

    > So it looks like:
    >
    > <a href="#" onClick="function()"><img src="image.gif"></a>


    To prevent the link from traveling the onclick function needs to return
    FALSE. Of course this only works IF JavaScript is enabled, else your
    have the same problem, the browser looks for a nonexistent anchor so
    moves to the top of the page. One way to stop this is to provide a valid URL

    function myFunction(){
    ...
    return false; // <-important don't forget
    }

    <a href="#StayHere" onclick="return myFunction()">
    <img id="StayHere" src="image.gif">
    </a>

    Where 'myFunction' returns FALSE else you have to added it to the
    onclick "myFunction(); return false". Then the fall back if the user has
    disabled the link points to where you are and the page does not scroll.

    >
    > If I place the onClick on the image itself, the swap will work without
    > jumping the page, but the cursor won't change to indicate a "hot" image.


    Again would help to know what your need a "hot Zone" indication for.
    >
    > Is there an easy solution here?


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 17, 2006
    #8
    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. Robert Wehofer

    How to jump to an anchor?

    Robert Wehofer, Nov 13, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    3,270
    John Carnahan
    Nov 17, 2003
  2. darrel
    Replies:
    16
    Views:
    13,483
    darrel
    Feb 8, 2005
  3. Robert Mark Bram

    Jump to named anchor after form processing

    Robert Mark Bram, Oct 20, 2004, in forum: ASP General
    Replies:
    3
    Views:
    208
    Evertjan.
    Oct 21, 2004
  4. TWW
    Replies:
    1
    Views:
    158
    A. Sinan Unur
    Jul 16, 2003
  5. Eadwine Rose
    Replies:
    2
    Views:
    230
    Eadwine Rose
    Oct 15, 2006
Loading...

Share This Page