?
Solved

Apply links to portions of an image.

Posted on 2007-10-14
14
Medium Priority
?
360 Views
Last Modified: 2013-12-02
I have created a large image for a header with a number of points on it that I would like to assign different links to.  I have no idea how to do this within 1 image or if it is even possible.

For example, let's say that at a point 5px from top and 5px from left, I want to assign a link to google, what code would I need to put in place?

Thanks.
0
Comment
Question by:vsllc
  • 5
  • 4
  • 3
  • +1
14 Comments
 
LVL 28

Accepted Solution

by:
TName earned 1600 total points
ID: 20074683
Have a look at this:
The "sensitive area" for the first link is a square with thetop left corner at the coordinates 5,5 and the bottom right corner with the coordinates  50,50  (pixel):
An image named 1.jpg is located in the same folder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>

<map name="map1">
<area href="http://www.google.com/" alt="google" shape="rect" coords="5,5,50,50">
<area href="http://www.yahoo.com/" alt="yahoo" coords="105,5,195,195">
<area href="http://www.experts-exchange.com/" alt="EE" shape="circle" coordsS="250,100,50">
</map>
<img src="1.jpg" ALT="img map" usemap="#map1">

</body>
</html>
0
 

Author Comment

by:vsllc
ID: 20075180
I'm doing something wrong.  I was able to get the code to create a link, but not in the right spot.  Does it matter where I place this code in my text as long as it is somewhere in the body tags?  Here's my header code where the image I want to do the map on is placed, can you tell me how to implement?

</head>
<body onload="init()">
<a name="up" id="up"></a>
  <center>
  <table border="0" cellpadding="0" cellspacing="0" id="table_header">
    <tr>
        <td align="left" valign="top"><div id="div_pathway"><span class="pathway">
<?php include "pathway.php"; ?>
</span></div></td>
    </tr>
  </table>
  </center>
</body>

Here is the code for table_header:

#table_header{
width:900px;
height:156px;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
}


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:karlwilbur
ID: 20075283
it doesn't matter where you put the map, as long as it in on the page. You tell the image which map to use with "usemap". Within the map you have to define an area for each "hotspot" and assign to that area an href.

Make sure that the map's name matches the name in the "usemap" for the image and also make sure that you have a '#' before the name in the image's 'usemap' value.

Please look again at TName's code.
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 20075291
for parts of an image to have different llinks you need to define a map (put it at the end of your html page just before </body>  )    here's an example:

<map name="Map" id="Map"><area shape="circle" coords="144,56,9" href="www.google.co.uk" />
<area shape="circle" coords="113,61,9" href="www.msn.com" />
</map>
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 20075294
opps and the image must have a defned map name as:

<img src="../photoshop/images/GGA_01.gif" alt="" width="236" border="0" usemap="#Map" />

the the "usemap bit added"
0
 

Author Comment

by:vsllc
ID: 20075403
Although it seems easy enough, I'm still not getting this to work.  I posted the following code for the map to test one "hot spot".  The only thing it did was create a dark blue square on my image about 1px/1px and no link.  I've gone through the tutorial links and no matter what changes I make, I can't seem to get anything but this blue square.  As I change the position of the code in my html file, the blue square moves.

<map name="map1">
<area href="http://www.google.com/" alt="google" shape="circle" coords="18,18,13"/>
</map>
<img src="../images/header.jpg" ALT="" usemap="#map1"/>
0
 
LVL 6

Expert Comment

by:karlwilbur
ID: 20075979
vsllc,

Your code is correct. It should be working. You might try "CIRC" instead of "CIRCLE" or placing the map after the image element but these shouldn't make a difference.

You can look at my source to see this kind of thing in use; here: http://www.healthychoice.com/home/home.jsp

E.G.:
<img src="/images/home/HCH_Flash_back.jpg" alt="" usemap="#flash_placeholder1" /><map name="flash_placeholder1"><area href="/products/meals/meals.jsp" alt="Healthy Choice Meals" shape="rect" coords="247,241,322,265" /></map>
</map>
0
 
LVL 28

Expert Comment

by:TName
ID: 20076263
There has to be some other problem on your page. This looks and behaves ok for me (no dark blue square on the image, just the expected sensitive area). What browser are you testing with?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function init() {
 //
}
</script>
<style>
body { text-align:center; }  
#table_header{
width:900px;
height:156px;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
margin:0 auto;   /* to center the table (IE6 only in strict mode) */
}
td img { display:block; }  /* to get rid of gap below image in strict mode */
</style>
</head>
<body onload="init()">
<a name="up" id="up"></a>
  <table border="1" cellpadding="0" cellspacing="0" id="table_header">
    <tr>
        <td align="left" valign="top">
      <div id="div_pathway">            
         <map name="map1">
             <area href="http://www.google.com/" alt="google" shape="circle" coords="18,18,13"/>
           </map>
         <img src="../images/header.jpg" ALT="" usemap="#map1"/>            
         <span class="pathway"><?php include "pathway.php"; ?></span>
      </div>
      </td>
    </tr>
  </table>
</body>
</html>

0
 
LVL 28

Expert Comment

by:TName
ID: 20076285
>The only thing it did was create a dark blue square
Are you using dreamweaver or some similar program? DW seems to draw a sqare on the image:
  http://www.un.org/events/workshop/dpi-unitar/2003/dreamweaver/advanced-dreamweaver.htm
0
 
LVL 6

Assisted Solution

by:karlwilbur
karlwilbur earned 400 total points
ID: 20076416
We tested with:
IE6 on Windows
Firefox 1.5 on Windows
Firefox 2.0 on Windows
Safari on Mac OS X
Firefox on Mac OS X
Firefox on Linux (Ubuntu 6.10)
IE 5.5 and IE 6 on Linux (Ubuntu 6.10)
Konqueror on Linux (Ubuntu 6.10)

I think that it is Dreamweaver. You are getting the blue dot because your image is not found and, by default, has a blue border. The dot is because the image, by not being found, is zero pixels surrounded by the default blue border. (add "img {border:0px;}" to your css to eliminate the borders on images)

Replace the image source with something directly accessible on the internet like: http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/220px-Albert_Einstein_Head.jpg
0
 
LVL 6

Expert Comment

by:karlwilbur
ID: 20076423
Sorry, I thought that TName was asking me what I tested with.
0
 

Author Comment

by:vsllc
ID: 20081122
OK.  I got it to work.  I tried the web link, which worked, so I knew it had to be my image.  Here's my final code.

<map name="map1">
<area href="http://www.google.com/" alt="google" shape="circle" coords="18,18,13"/>
</map>
<?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/header.jpg" border="0" alt="" usemap="#map1"/>'; ?>

Although this worked, it caused other issues with code for my <div> tags.  It pushed my <div_pathway> below the header.jpg image instead of leaving it showing over the bottom of the image when ut was loading through the table_header.

I'll play around with those and see if I can get them to work as before.

Thank you all for your help.
0
 
LVL 6

Expert Comment

by:karlwilbur
ID: 20081206
NP. Glad to help.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn the basic shortcuts and functions of Illustrator. The viewer will learn about the paintbrush tool, anchor points, font sizing, and more.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question