Side navigation
Ticket #3396: areatagtest.html
File areatagtest.html, 1.2 KB (added by morgan, October 08, 2008 03:38PM UTC)
working test case
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js" type="text/javascript"></script>
<script>
$(function()
{
$('area').click(function()
{
$('#clicked').text($(this).attr('alt'));
});
});
</script>
</head>
<body>
<p>Click on one of the planets:</p>
<img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href="#sun" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href="#mercur" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href="#venus" alt="Venus" />
</map>
<p>Clicked: <span id="clicked" /></p>
</body>
</html>
Download in other formats:
Original Format
File areatagtest.html, 1.2 KB (added by morgan, October 08, 2008 03:38PM UTC)
working test case
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js" type="text/javascript"></script>
<script>
$(function()
{
$('area').click(function()
{
$('#clicked').text($(this).attr('alt'));
});
});
</script>
</head>
<body>
<p>Click on one of the planets:</p>
<img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href="#sun" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href="#mercur" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href="#venus" alt="Venus" />
</map>
<p>Clicked: <span id="clicked" /></p>
</body>
</html>