Create an image map with tooltips
Posted: Thu Nov 22, 2007 4:31 pm
The tooltip script is from DynamicDrive.com as you'll see, and the functions are basically a wrapper to make a nice imagemap which uses that tooltip script. The functions are slightly-modified functions of the ones I use on my own site, and they create a nice, easy wrapper for the making an imagemap with tooltips. So in the end, you'd basically get an image where you can have a few boxes on the map (as many as you want), and when you hover over one of those boxes, a tooltip with some message would display, and clicking on that box would link you to another page.
With that out of the way, here we go.
Name: Imagemap functions
Description: Use this code to create imagemaps quickly and painlessly. The imagemaps will also have some cool tooltips so you can display text in a box whenever your mouse hovers over an imagemap entry, thanks to a nice script from DynamicDrive. The functions are built around that script.
Step 1: Install the tooltip script
Go to DynamicDrive.com's "Cool DHTML Tooltip" script and copy the CSS into your own stylesheet. Then, take the Javascript script from there and save it as a Javascript file "tooltip.js" .. remember to take the <script> and </script> tags out from that file before saving.
Step 2: Copy and paste this right after your real page's <body> tag
Step 3: Copy and paste this into a new file, "map_functions.php", and save
Step 4: include map_functions.php into your page and use the functions freely
Here's an example:
The functions are pretty simple:
map_Start($image_filename) - call this only once, at the start of where you want your image map to be. $image_filename is the filename of the image, obviously.
map_Entry($text, $color, $x, $y, $width, $height, $links_to, $box_width=100) - you can call this an unlimited number of times, once for each area/location on the map. Read my paragraph below for an explanation of the parameters.
map_End() - call this once at the end.
In that example, "example.png" is the filename of the map image (all in one piece-- you do NOT need to split your image into separate pieces at all for this). "This is one place on the map" is the text that is displayed in the tooltip when that location is hovered over. "white" is the background color-- it can be as a word like "red" or "blue" or a hexidecimal color like "#12AABB". 200 and 200 are the x and y of the starting point for the map location, and 100 and 100 are the width and height of that location. "test.php" is the page that you go to when you click on that part of the map, and 150 is the width of the tooltip box (it's an optional parameter, so you can leave it out and have it as the default of what's in the CSS style, or you can set it manually via the function).
EDIT: Made a correction to the map_functions.php functions.
With that out of the way, here we go.
Name: Imagemap functions
Description: Use this code to create imagemaps quickly and painlessly. The imagemaps will also have some cool tooltips so you can display text in a box whenever your mouse hovers over an imagemap entry, thanks to a nice script from DynamicDrive. The functions are built around that script.
Step 1: Install the tooltip script
Go to DynamicDrive.com's "Cool DHTML Tooltip" script and copy the CSS into your own stylesheet. Then, take the Javascript script from there and save it as a Javascript file "tooltip.js" .. remember to take the <script> and </script> tags out from that file before saving.
Step 2: Copy and paste this right after your real page's <body> tag
Code: Select all
<div id="dhtmltooltip"></div>
<script type="text/javascript" src="tooltip.js"></script>Code: Select all
<?php
function map_Start($image_filename)
{
print "<img src='$image_filename' border='0' usemap='#mapname'><map name='mapname'>";
}
function map_End()
{
print "</map>";
}
function map_Entry($text, $color, $x, $y, $width, $height, $links_to, $box_width=100)
{
$text = addslashes($text);
$x2 = $x + $width;
$y2 = $y + $width;
print "<area shape='rect' onMouseOver=\"ddrivetip('$text', '$color', $box_width)\" coords='$x,$y,$x2,$y2' href='$links_to' onMouseout='hideddrivetip()'>";
}
?>Here's an example:
Code: Select all
map_Start("example.png");
map_Entry("This is one place on the map", "white", 200, 200, 100, 100, "test.php", 150);
map_End();map_Start($image_filename) - call this only once, at the start of where you want your image map to be. $image_filename is the filename of the image, obviously.
map_Entry($text, $color, $x, $y, $width, $height, $links_to, $box_width=100) - you can call this an unlimited number of times, once for each area/location on the map. Read my paragraph below for an explanation of the parameters.
map_End() - call this once at the end.
In that example, "example.png" is the filename of the map image (all in one piece-- you do NOT need to split your image into separate pieces at all for this). "This is one place on the map" is the text that is displayed in the tooltip when that location is hovered over. "white" is the background color-- it can be as a word like "red" or "blue" or a hexidecimal color like "#12AABB". 200 and 200 are the x and y of the starting point for the map location, and 100 and 100 are the width and height of that location. "test.php" is the page that you go to when you click on that part of the map, and 150 is the width of the tooltip box (it's an optional parameter, so you can leave it out and have it as the default of what's in the CSS style, or you can set it manually via the function).
EDIT: Made a correction to the map_functions.php functions.
