Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    24
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Deactivate Clickable Link

    I am using the following code for a rollover image:

    Code:
    <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.

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    get rid of the href

  • Users who have thanked ohgod for this post:

    FatCodeMonkey (07-30-2008)

  • #3
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    you could also use
    Code:
    <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>

  • Users who have thanked ninnypants for this post:

    FatCodeMonkey (07-30-2008)

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    24
    Thanks
    8
    Thanked 0 Times in 0 Posts
    thank you!

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Quote Originally Posted by Bill Posters View Post
    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.

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    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:

    Code:
    <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.

  • #8
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Try somthing like this:

    HTML:
    Code:
    <div id="a_div"><!-- image as CSS background --></div>
    CSS:
    Code:
    #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'); }

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by auslin View Post
    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.
    Last edited by Bill Posters; 07-31-2008 at 11:00 AM.

  • #10
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    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.......


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •