Quick hmtl/css problem

[Nigel]

Basically I have an image link on my page. The link doesn't go anywhere using "#". The image changes another image elsewhere on the page. When the link is clicked I want the page to stay where it is. At the moment it keeps scrolling back to the top. I'm sure I've got around this before.

Anyone know how?

 

[KDF]

Dont use a link.. use an onclick event.. you can even use javascript to change the mouse pointer so it looks like a proper link.

 

[mark__b]

Put an anchor into the page?
link to it here:
<a href="#image">blah</a>

Add this next to your image
<a name="image" id="image"></a>

I'm sure there are lots of better ways of doing it - but this is the simplest way i could think of doing it with what you've said

 

[Nigel]

Dont use a link.. use an onclick event.. you can even use javascript to change the mouse pointer so it looks like a proper link.

Thats how i had it working previously. But I've now got a border to display around each thumbnail when rolled over using the a:hover command.

How can I replicate this using javascript?

 

[KDF]

use javascript

onhover="setstyle border=3" on the thumbnail

(Note that exact text above wont work as I cant remember the exact code/method of doing it, but you get the idea)

 

[Red Cup]

The page is jumping around because you are using a fragment identifier. "#anchor1" will take you to an anchor named "anchor1" but just "#" will take you to the top of the page.

If you add "return false" to your onclick event, then only the JavaScript will be executed and the browser won't follow the link:

<a href="#" onclick="yourFunction(); return false;"><img src... etc></a>

Note that it's pretty bad for accessibility to have links with a href of just "#". The link should point to real content, thereby anyone without JavaScript, or using a screen reader can still view the page.

Ideally you'd have all your JS in an external file and an event handler to hook into the links and set your onclick events, but that might be a bit advanced for now!