Gamemorize Gamemorize - 7 months ago 11
HTML Question

Nested Objects with a different <a href>?

Is there any way to give a nested object a different hyperlink?

I don't think tags can be nested but is there anyway to have the img's associated with a href in some fiendish way?

So here for example

<a href="blahblah.php">
<object class="svg" type="image/svg+xml" data="svgimage.svg" >
<img src="pngimage.png" type="image/png" />
</object>
</a>


if the svg can't be loaded the png comes and the user can click and go to a separate set of pages. blobblob.php

WHY? well in the pages that follow (aimed at mobile) constantly serving back-up png to svg mobile devices is a waste. So for android pre 3.0 i want to serve them separate png files.

JAVASCRIPT? Ideally not.

Answer

You can use image maps.

<a href="blahblah.php">
    <object class="svg" type="image/svg+xml" data="svgimage.svg" >
        <img src="http://dummyimage.com/100/000/fff" type="image/png" usemap="#mapping"/>
    </object>
</a>
<map name="mapping">
    <area shape="rect" coords="0,0,100,100" href="bloblob.php" />
</map>

This works the way you intended.

As also shown here: http://jsfiddle.net/xr3gT/