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?
You could maybe cover them with a transparent gif resized by css to fit and make that clickable.
Would I need absolute positioning for that? Wouldn't that get thrown off by someone zooming the page?
I should have thought of this before. Inkscape makes it easy to add links to them.
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.