Welcome to Dream.In.Code
Become an Expert!

Join 149,752 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,437 people online right now. Registration is fast and FREE... Join Now!




Easily changed or moved clickable links on an image... how best to do

 
Reply to this topicStart new topic

Easily changed or moved clickable links on an image... how best to do

Sifu_Socky
8 Feb, 2007 - 07:09 AM
Post #1

New D.I.C Head
*

Joined: 8 Feb, 2007
Posts: 5


My Contributions
First of all, hi guys! I'm an amatuer web designer trying to learn some of the tricks of the trade, I work in PHP and CSS and I'm trying to get into Javascript and Flash.
I've been given this job by a friend to makeover her website, which largely sounds fairly straightforward. I've done sites for her before, and I usually use PHP and SQL databases to provide administration tools for her and my other "clients" because they generally have little or no HTML knowledge.

One thing she wants to have on her site, though, is a map. On the map, she wants to have a number of 'markers', highlighting points of interest - basically red dots. These dots should ideally be clickable for more information, and she wants to be able to add and remove these dots to and from the map herself (she has no knowledge of image editing, hot spots, image maps or anything like that). Ideally I would like to have it so that it can all be done from the Admin Panel I'm building for her, so that all she has to do is click the map where the dot should go and type a little info. Is this possible? What would be the best way to do this??

I was thinking maybe using a database to store the x and y coordinates and hyperlink info of each 'dot' and using Javascript to put each dot in place when the page is loaded? Is this possible? Is there a better way of doing it??

I'm sorry to have to pick your brains, guys, but I'm kinda stuck! Any help would be much appreciated. Thanks smile.gif

~Sifu
User is offlineProfile CardPM
+Quote Post

rockstar_
RE: Easily Changed Or Moved Clickable Links On An Image... How Best To Do
8 Feb, 2007 - 09:54 AM
Post #2

D.I.C Head
Group Icon

Joined: 16 Oct, 2006
Posts: 187


Dream Kudos: 275
My Contributions
QUOTE(Sifu_Socky @ 8 Feb, 2007 - 08:09 AM) *

One thing she wants to have on her site, though, is a map. On the map, she wants to have a number of 'markers', highlighting points of interest - basically red dots. These dots should ideally be clickable for more information, and she wants to be able to add and remove these dots to and from the map herself (she has no knowledge of image editing, hot spots, image maps or anything like that). Ideally I would like to have it so that it can all be done from the Admin Panel I'm building for her, so that all she has to do is click the map where the dot should go and type a little info. Is this possible? What would be the best way to do this??

I would say you're on the right track. You let her create the points on the map, and then enter them into the database. As long as they were only rectangular areas for the link, you could generate an image map for them. The table would have the hyperlink destination intended, and the coordinates in them. For instance:
CODE

$links = getAllImageMapLinks();
echo '<map name="map">';
foreach( $links as $link ) {
  echo '<area href="'. $link->href .'" alt="'. $link->description .'" coords="'. $link->coords .'" />";
}
echo '</map>';
echo '<img src="imagemap.jpg" usemap="#map" />';

I hope that's a code start for you. I'm interested to see a final product, as this seems like a cool idea.

rockstar_
User is offlineProfile CardPM
+Quote Post

Sifu_Socky
RE: Easily Changed Or Moved Clickable Links On An Image... How Best To Do
8 Feb, 2007 - 10:18 AM
Post #3

New D.I.C Head
*

Joined: 8 Feb, 2007
Posts: 5


My Contributions
Ah, yeah, it's starting to make some sense. Thanks man! :-D

The only thing that still baffles me is how do I get the coordinates in the first place? I get the bit about storing the coordinates for each hotspot in the database and loading them up with PHP, but how might I get it so that in her Admin Panel, she can click her copy of the map and have her new coordinates added to the database? Is there a script of some sort that I could use which might be able to return the coordinates, relating only to the image, of the point she has clicked?
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/8/09 05:47AM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month