- From: Robert Burns <rob@robburns.com>
- Date: Wed, 15 Aug 2007 20:52:17 -0500
- To: Robert Burns <rob@robburns.com>
- Cc: Philip Taylor <philip@zaynar.demon.co.uk>, public-html <public-html@w3.org>
- Message-Id: <0E7057C4-0C05-45C1-9C63-19EDA54C9DE5@robburns.com>
Hello all,
I put together a little LiveDOMviewer example. Part of this works in
Firefox . Much of it does not. However, this is what I think the HTML
4.01 recommendation had in mind. With more complicated polygon
coordinates, this approach would do what I said in the previous email
[1] regarding selecting a timezone from a World map.
Take care,
Rob
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<title>Untitled</title>
<style type='text/css'>
input {height: 100px; width: 200px;}
#leftarea {border-style: solid; border-color: red; border-size: 1px; }
#rightarea {border-style: solid; border-color: blue; border-size:
1px; }
body {color: red;} /* just checking whether liveDOMviewer
applies CSS*/
</style>
</head>
<body>
<p>test
<map name=m>
<area id=leftarea title='left-side' alt='left-side' shape=rect
coords='0,0,100,100' >
<area id=rightarea title='right-side' alt='right-side' shape=rect
coords='100,0,200,100' >
</map>
</p>
<form action=.><input type=image src=image usemap='#m'></form>
</body>
</html>
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%
20HTML%20PUBLIC%20%22-//W3C//DTD%20HTML%204.01%20Transitional//EN%22%
0A%20%20%20%20%20%20%20%20%22http%3A//www.w3.org/TR/html4/loose.dtd%
22%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%09%3Cmeta%20http-
equiv%3D%22content-type%22%20content%3D%22text/html%3B%20charset%
3Dutf-8%22%20%3E%0A%09%3Ctitle%3EUntitled%3C/title%3E%0A%3Cstyle%
20type%3D%27text/css%27%3E%0Ainput%20%7Bheight%3A%20100px%3B%20width%
3A%20200px%3B%7D%0A%23leftarea%20%7Bborder-style%3A%20solid%3B%
20border-color%3A%20red%3B%20border-size%3A%201px%3B%20%7D%0A%
23rightarea%20%20%7Bborder-style%3A%20solid%3B%20border-color%3A%
20blue%3B%20border-size%3A%201px%3B%20%7D%0A%20%20%20%20%20body%20%
7Bcolor%3A%20red%3B%7D%0A%3C/style%3E%0A%0A%3C/head%3E%0A%3Cbody%3E%0A
%0A%0A%3Cp%3Etest%0A%3Cmap%20name%3Dm%3E%0A%09%3Carea%20id%3Dleftarea%
20title%3D%27left-side%27%20alt%3D%27left-side%27%20shape%3Drect%
20coords%3D%270%2C0%2C100%2C100%27%20%3E%0A%09%3Carea%20id%3Drightarea
%20title%3D%27right-side%27%20alt%3D%27right-side%27%20shape%3Drect%
20coords%3D%27100%2C0%2C200%2C100%27%20%3E%0A%3C/map%3E%0A%3C/p%3E%0A%
0A%3Cform%20action%3D.%3E%3Cinput%20type%3Dimage%20src%3Dimage%
20usemap%3D%27%23m%27%3E%3C/form%3E%0A%0A%3C/body%3E%0A%3C/html%3E%0A
[1]: <http://lists.w3.org/Archives/Public/public-html/2007Aug/0555.html>
Received on Thursday, 16 August 2007 01:52:31 UTC