Create an image map with tooltips

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Create an image map with tooltips

Post by Josh1billion »

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

Code: Select all

<div id="dhtmltooltip"></div>
<script type="text/javascript" src="tooltip.js"></script>
Step 3: Copy and paste this into a new file, "map_functions.php", and save

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()'>";
	}
?>
Step 4: include map_functions.php into your page and use the functions freely
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();
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.
Last edited by Josh1billion on Thu Nov 22, 2007 6:29 pm, edited 1 time in total.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Cool. Kind of like on facebook. :)
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

looks cool, but you need to close your img tag!
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post by Josh1billion »

If anyone wants to see a working example, I have one temporarily uploaded.

Here's a screenshot:
Image

Here's the working example, though you'll need to be logged into SoTO to use it (the imagemap isn't the only purpose of the page):
http://www.seedsoftime.net/worldmap.php

Note: the compass is one single image. No need to upload the image in different sections.
spikereloaded
Forum Newbie
Posts: 3
Joined: Fri Nov 25, 2011 6:20 pm

Re: Create an image map with tooltips

Post by spikereloaded »

hi, im having trouble getting the tooltips to show on my image map. the code for the map is working fine but im not able to get the tooltips to appear. i know this is quite an old topic so will wait for a reply before posting any code! hope someone can help me!
spikereloaded
spikereloaded
Forum Newbie
Posts: 3
Joined: Fri Nov 25, 2011 6:20 pm

Re: Create an image map with tooltips

Post by spikereloaded »

thought id post the code in case anyone passes through and has any idea why this wont work for me!

Code: Select all

<?php
include "globals.php";
?>
<head>
<style type="text/css">

#dhtmltooltip{
	position: absolute;
	width: 150px;
	border: 2px solid black;
	padding: 2px;
	background-color: lightyellow;
	visibility: hidden;
	z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>
</head>
<?php
Include "map_functions.php";
$q=$db->query("SELECT u.*,c.* FROM users u LEFT JOIN cities c ON u.location=c.cityid WHERE u.userid=$userid");
$r=$db->fetch_row($q);
$_GET['to'] = abs((int) $_GET['to']);
if(!$_GET['to'])
{
print "Welcome to the Monorail Station. It costs \$1000 for a ticket.<br> <u><b>Please be aware that you will still be charged if you choose to travel to a location that you are already in. <br>You are Currently in {$r['cityname']}</b></u></br> <br />
Where would you like to travel today?<br />";
$q=$db->query("SELECT * FROM cities WHERE cityid != {$ir['location']} AND cityminlevel <= {$ir['level']}");
//code for the imagemap
map_Start("http://murdercountry.com/murdercountrymap.jpg");

        map_Entry("This is one place on the map", "white", 98, 496, 10, 10, "monorail.php?to=1", 500);
		map_entry("This is Thugville", "white", 141, 200, 10, 10, "monorail.php?to=2", 150);
		map_entry("This is Gangsterville", "white", 218, 49, 10, 10, "monorail.php?to=3", 150);

        map_End();
		
		//end code for imagemap
while($r=$db->fetch_row($q))
{

}

}
else
{
if($ir['money'] < 1000)
{
print "You don't have enough money.";
}
else if( ((int) $_GET['to']) != $_GET['to'])
{
print "Invalid city ID";
}
else
{
$q=$db->query("SELECT * FROM cities WHERE cityid = {$_GET['to']} AND cityminlevel <= {$ir['level']}");
if(!$db->num_rows($q))
{
print "Error, this city either does not exist or you are not a high enough level to go there.";
}
else
{
$db->query("UPDATE users SET money=money-1000,location={$_GET['to']} WHERE userid=$userid");
$r=$db->fetch_row($q);
print "Congratulations, you paid \$1000 and travelled to {$r['cityname']} on the monorail!";
}
}
}
$h->endpage();
?>
<body>
<div id="dhtmltooltip"></div>
<script type="text/javascript" src="tooltip.js"></script>
</body>
spikereloaded
Forum Newbie
Posts: 3
Joined: Fri Nov 25, 2011 6:20 pm

Re: Create an image map with tooltips

Post by spikereloaded »

no wories sorted it. Had to put the Script in the header of the actual page rather than putting it in a seperate .js file.
Post Reply