Web Publishing
Tooltip Demo: Map

The document demos tooltip pop-up information boxes for a map.

Tooltip pop-ups are associated with images. Moving the mouse pointer over any state in the map will display a summary of the 2000 & 2004 exit polling data for that state.

Note that the XHTML for this document follows the map.

Following is the XHTML markup for this document with all JavaScript-related code highlighted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>lfdf: Web Publishing - Tooltip Demo: Map</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="Stylesheet" type="text/css" href="css/Misc.css" />
<link rel="Stylesheet" type="text/css" href="css/Web.css" />

</head>

<body class="Body">

<script type="text/javascript" src="js/backlink.js"></script>

<div class="Text">

<p class="Title">Web Publishing<br />
Tooltip Demo: Map</p>

<p class="Normal">The document demos tooltip pop-up information boxes for a
map.</p>

<p class="Normal">Tooltip pop-ups are associated with images. Moving the mouse
pointer over any state in the map will display a summary of the 2000 &amp; 2004
exit polling data for that state.</p>

<p class="Normal">Note that the XHTML for this document follows the map.</p>

<p class="BTI">
<script type="text/javascript" src="js/tooltip_gm_map.js">
</script></p>

</div>

...

<div class="Navigation">

Top&nbsp;&nbsp;&nbsp;<a href="#"><img alt="" src="gen/Top.png"
width="12" height="16" /></a>

&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;

<script type="text/javascript" src="js/backlink_do.js"></script>

</div><div class="Footer">

<hr />

<p class="Normal">© Copyright 2006 by
<a href="mailto:gmikos@livefreediefree.com">
George Mikos</a>. Plagiarizing is OK, but attributing is even better.</p>

<p class="Normal">1.0 Publication Date: None<br />
2.0 Publication Date: 01 Dec 05</p>

<p class="Normal">Revised Date: 15 Mar 06</p>

<p class="Normal">
<a href="http://validator.w3.org/check?
uri=http://www.livefreediefree.com/
WebPub_TooltipDemo_Map.htm">
<img src="gen/W3C_XHTML.png" alt="Valid XHTML 1.0!"
height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?
uri=http://www.livefreediefree.com/
WebPub_TooltipDemo_Map.htm">
<img width="88" height="31" src="gen/W3C_CSS.png"
alt="Valid CSS!" /></a></p>

</div>

<script type="text/javascript" src="js/menu_do.js"></script>
<script type="text/javascript" src="js/menu_wp_vs_tm_var.js"></script>
<script type="text/javascript" src="js/menu_com.js"></script>
<script type="text/javascript" src="js/tooltip_wz_table.js"></script>

</body>

</html>

Top       Back   

© Copyright 2006 by George Mikos. Plagiarizing is OK, but attributing is even better.

1.0 Publication Date: None
2.0 Publication Date: 01 Dec 05

Revised Date: 15 Mar 06

Valid XHTML 1.0! Valid CSS!