...

View Full Version : Deactivate Clickable Link



FatCodeMonkey
07-30-2008, 07:13 PM
I am using the following code for a rollover image:



<a href="link.html"
OnMouseOver="move_in('image12','gallery/12in.jpg')"
OnMouseOut="move_out('image12','gallery/12out.jpg')"><img src="images/gallery/images/12.jpg" name="image12" width="300" height="450" border="0" /></a>


If the image is clicked, then it takes you to a blank page. How do you deactivate the link so that there is only a rollover and it is not 'clickable'?

Thanks.

ohgod
07-30-2008, 08:07 PM
get rid of the href

ninnypants
07-30-2008, 08:12 PM
you could also use


<a href="link.html"
OnMouseOver="move_in('image12','gallery/12in.jpg')"
OnMouseOut="move_out('image12','gallery/12out.jpg')"
onclick="return false;"><img src="images/gallery/images/12.jpg" name="image12" width="300" height="450" border="0" /></a>

FatCodeMonkey
07-30-2008, 08:29 PM
thank you!

Bill Posters
07-30-2008, 08:34 PM
Given that the element appears to be non-functioning (i.e. have no functioning purpose), then I'd tend to ditch the anchor altogether and use something more appropriate (or rather, less inappropriate) - such as a span or div element, using either js or CSS :hover to control the image swap.

In short, it's not a link, so don't use an anchor element.

ninnypants
07-30-2008, 08:42 PM
Given that the element appears to be non-functioning (i.e. have no functioning purpose), then I'd tend to ditch the anchor altogether and use something more appropriate (or rather, less inappropriate) - such as a span or div element, using either js or CSS :hover to control the image swap.

In short, it's not a link, so don't use an anchor element.

I agree with Bill Posters. Unless you are going to link that to something you should use a div or span.

auslin
07-31-2008, 09:29 AM
However, if you are concerned about those who may be viewing the page using IE6, you may have to keep the link tag and de-activate it as follows:



<a href="#"
OnMouseOver="move_in('image12','gallery/12in.jpg')"
OnMouseOut="move_out('image12','gallery/12out.jpg')"><img src="images/gallery/images/12.jpg" name="image12" width="300" height="450" border="0" /></a>


Internet Explorer 6 (& earlier) will only do the :hover effect on a link (or an element wrapped within a link). No problems with IE7, Firefox, etc though.

Mikebert4
07-31-2008, 10:18 AM
Try somthing like this:

HTML:


<div id="a_div"><!-- image as CSS background --></div>


CSS:


#a_div { width: 300px; height: 450px; background-image: url('images/gallery/images/12out.jpg') }

#a_div:hover {background-image: url('images/gallery/images/12in.jpg'); }

Bill Posters
07-31-2008, 10:52 AM
However, if you are concerned about those who may be viewing the page using IE6…

Internet Explorer 6 (& earlier) will only do the :hover effect on a link (or an element wrapped within a link). No problems with IE7, Firefox, etc though.

Given that the effect is cosmetic/non-critical, it can (and imo, should) be implemented as a progressive enhancement whilst minimising the impact on the markup itself.
If the effect is implement primarily using CSS :hover with a js-based fallback for IE6, then it will appear for the vast majority of users - i.e. all the usual supported browsers minus those using IE6 and below without js enabled).

CSS is the right tool for the job. Javascript is available as the next-best thing.
Being non-critical, imo, it's perfectly acceptable to use only CSS :hover, without the fuss of a js fallback (i.e. don't both adding support for this effect in IE6 and below).

Being a non-critical effect, it won't matter to those for whom it doesn't appear and won't impact on the underlying accessibility/usability.

auslin
07-31-2008, 03:29 PM
Actually, sorry about my last post - I had my wires crossed between CSS :hover and JavaScript mouseover. The latter are fine in IE6. It's been a long day....... :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum