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

[Aaron Freeman]

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!

 

[Mark Parnell]

Deciding to do something for the good of humanity, Aaron Freeman

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.

 

[Neredbojias]

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>

 

[Alan J. Flavell]

<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).

 

[nice.guy.nige]

While the city slept, Aaron Freeman ([email protected]) 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

 

[Andy Dingley]

<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

 

[nice.guy.nige]

While the city slept, Andy Dingley ([email protected]) feverishly
typed...

<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

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

 

[Jonathan N. Little]

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.