PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Jun 20, 2019 7:34 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 7 posts ] 
Author Message
PostPosted: Thu Nov 22, 2007 5:31 pm 
Offline
Forum Contributor
User avatar

Joined: Tue Sep 11, 2007 3:25 pm
Posts: 316
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
Syntax: [ Download ] [ Hide ]
<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
Syntax: [ Download ] [ Hide ]
<?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:

Syntax: [ Download ] [ Hide ]
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 7:29 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject:
PostPosted: Thu Nov 22, 2007 5:42 pm 
Offline
Tranquility In Moderation
User avatar

Joined: Sun Feb 06, 2005 8:18 pm
Posts: 5001
Location: Indiana
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.


Top
 Profile  
 
 Post subject:
PostPosted: Fri Nov 23, 2007 12:55 am 
Offline
DevNet Master
User avatar

Joined: Wed Dec 06, 2006 5:14 pm
Posts: 3635
Location: Toronto, Canada
looks cool, but you need to close your img tag!


Top
 Profile  
 
 Post subject:
PostPosted: Sat Nov 24, 2007 4:03 pm 
Offline
Forum Contributor
User avatar

Joined: Tue Sep 11, 2007 3:25 pm
Posts: 316
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.


Top
 Profile  
 
PostPosted: Fri Nov 25, 2011 7:23 pm 
Offline
Forum Newbie

Joined: Fri Nov 25, 2011 7:20 pm
Posts: 3
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


Top
 Profile  
 
PostPosted: Sat Nov 26, 2011 12:43 pm 
Offline
Forum Newbie

Joined: Fri Nov 25, 2011 7:20 pm
Posts: 3
thought id post the code in case anyone passes through and has any idea why this wont work for me!
Syntax: [ Download ] [ Hide ]
<?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>


Top
 Profile  
 
PostPosted: Sun Nov 27, 2011 9:37 am 
Offline
Forum Newbie

Joined: Fri Nov 25, 2011 7:20 pm
Posts: 3
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group