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 4 of 4
  1. #1
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts

    Clickable SVG Images

    I have two large banners on my site that I converted SVG.

    I can't figure out how to set them up for people to click on.

    I have tried all of the examples at Stackoverflow. Almost all worked in Firefox but no other browser.

    The only thing I have been able to figure out is to put a 15px high image as long as the other image is just above the SVG banner for them to click on.

    I'm using the object tag to display them since that is the only way to display them for the top 4 browsers.

    I've encased it in anchor tags, button tags, added window.open, location.href, z-index and everything else I could think of. All worked fine in Firefox but none of the others.

    I have never seen anything so stubborn.

    Do any of you know what to do?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,989
    Thanks
    15
    Thanked 231 Times in 231 Posts
    You could maybe cover them with a transparent gif resized by css to fit and make that clickable.

  • #3
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    Would I need absolute positioning for that? Wouldn't that get thrown off by someone zooming the page?

  • #4
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    I should have thought of this before. Inkscape makes it easy to add links to them.

    http://tavmjong.free.fr/INKSCAPE/MAN...Web-Links.html

    The header and footer images are now SVG and the footer image is clickable with target="_blank" in it. Getting them to center was the hardest part but that was no chore either.

    The file sizes are now 1/4 to 1/3 of the original image.

    Works great in Cyberfox v20.0, Chrome v27, and IE10 for Windows 7.

    http://dwight.byethost31.com/index.htm
    Last edited by oldcrazylegs; 04-27-2013 at 09:26 PM.


  •  

    Posting Permissions

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