Making an svg image object clickable with onclick, avoiding absolute positioning

Question

I have tried to change the images on my site from to svg, changing img tags to embed and object tags(standard procedure, i think). But, implementing the onclick function, which previously was contained in the img tag is proving most difficult.

I found onclick had no effect when placed inside the object or embed tag.

So, I made a div exclusively for the svg, and placed onclick in this div tag. But, no effect unless visitor clicks on the edges/padding of the image.

I have read about overlaying a div, but am trying to avoid using absolute positioning, or specifying positions at all. Maybe there's a way to do it without specifying postions?

Or maybe theres another way to apply onclick to a svg.

Has anyone encountered this problem? Questions and suggestions are welcome.

Answer 1

Have you looked into using the CSS z-index property to make the container dev be "on top" of the svg? Because the div is (presumably) transparent, you will still see the image exactly as before.

This, I believe, is the best-practice, non-hack, intended way of solving your problem. z-index is only useful for elements that have a position property of fixed, relative, or, as you've heard, absolute. However, you don't actually have to move the object.

For example:

<style>
    .svgwrapper {
        position: relative;
        z-index: 1;
    }
</style>
<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

For what it's worth, it would also be a little more elegant and safe to not use onClick at all, but instead to bind the click event using javascript. That's another issue altogether, though.

Answer 2

Assuming you don't need cross browser support (which is impossible without a plugin for IE), have you tried using svg as a background image?

Experimental stuff for sure, but thought I would mention it.

Answer 3

Here is a solution (please use translator).

Answer 4

I got this working accross the latest versions of Firefox, Chrome, Safari and Opera.

It relies on a transparent div before the object that has absolute position and set width and height so it covers the object tag below.

Here it is, I've been a bit lazy and used inline styes:

<div id="toolbar" style="width: 600px; height: 100px; position: absolute; z-index: 1;"></div>
<object data="interface.svg" width="600" height="100" type="image/svg+xml">
</object>

I used the following JavaScript to hook up an event to it:

<script type="text/javascript">
    var toolbar = document.getElementById("toolbar");
    toolbar.onclick = function (e) {
        alert("Hello");
    };
</script>