Following on from my questions in this StackOverflow thread, I'm trying to use an image as a link. The image is an SVG file and the link is to a simple static HTML page.

In the question I've referred to it was suggested that I add an attribute of onclick="window.location='URLHERE'; return false;" to the object. I've tried a number of configurations (putting this in the <img> tag, in the <object> tag, creating a small Javascript function and placing it in there) but it doesn't work - the link isn't rendered at all.

My jsFiddle is here. Can anyone please give me a pointer? Please assume that I know very little about Javascript or even HTML for that matter. Thank you.

CSS:

.center {text-align: center;}

#sfimages {padding:15px;}

#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;     
}

HTML:

<table style="width: 100%">
    <tr>
        <td class="center">
            <div id="sfimages">
                <object class="images" type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt=""
                        onclick="window.location='http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG'; return false;" />
                </object>
            </div>
        </td>
        <td class="center">
            <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
            </div>
        </td>
        <td class="center">
            <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
            </div>
        </td>
    </tr>
</table>