Solved

Image MAP and getting Title to work.

Posted on 2003-11-15
6
242 Views
Last Modified: 2010-04-09
I am using a image map with three area (hotspots) and wanted to have a Tool Tip help using the TITLE tag.

The Title tag will appear sometimes and usually only over the 3rd area. I need to refresh the screen again for it to appear again but then not even consistently and not over the three areas.

I've added the onMouseOver after searching on here for answers. I get the statusMessage but only when I mouseover the outer border of the imagemap, otherwise I see the resulting URL.

I'm using IE 6 on XP. The following is an example of my code:

    <img src="http://localhost/mysite/layout/images/admin/block-right.gif" TITLE="Image MAP Title" border="0" usemap="#arrow3">
        <map name="arrow3">
            <area coords="0,0,12,20"  href="http://localhost/admin/block.php?mode=move&bid=3&where=up" onMouseOver="window.status='Move up';return true;">
            <area coords="12,0,29,20" href="http://localhost/admin/block.php?mode=move&bid=3&where=1" onMouseOver="window.status='Move Right';return true;">
            <area coords="30,0,43,20" href="http://localhost/admin/block.php?mode=move&bid=3&where=dn" onMouseOver="window.status='Move down';return true;">
        </map>

0
Comment
Question by:Bl248
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9756716
You are going to have all kinds of issues with this.  To get the title to fire, sort of consistently wrap a span around the image and put the title on the span.  That will still leave a big relaibility problem, and once the tooltip is displayed it will not re-position to the cursor. Plus it does not fire correctly in Mozilla... the mouse event take priority so it is slow.

You may be better to put to the title on the area tags.  Still a lttle wonky but that seems to respond a little better in both IE and Mozilla.

With virtually everything I tested it seems to come up extremely slow no matter how you set it up.

Cd&
 
0
 
LVL 11

Accepted Solution

by:
Zontar earned 250 total points
ID: 9757670
Your first two hotspots overlap. Change the coords of the first one to "0,0,11,20" or the coords for the second one to "13,0,29,20". If you don't leave a minimum 1 pixel gap between hotspots, you'll have problems. You also need to use width and height attributes for the img tag (you should do this for *all* img tags). Don't use a title attribute for the img tag itself -- this will interfere with the title attributes on the hotspots.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<img src="block-right.gif" width="45" height="20" border="0" usemap="#arrow3">    
<map name="arrow3">
  <area coords="0,0,11,20"  title="UP" href="block.php?mode=move&bid=3&where=up" onmouseover="window.status='Move up';return true;" onmouseout="window.status='';">
  <area coords="12,0,29,20" title="RIGHT" href="block.php?mode=move&bid=3&where=1" onmouseover="window.status='Move Right';return true;" onmouseout="window.status='';">
  <area coords="30,0,43,20" title="DOWN" href="block.php?mode=move&bid=3&where=dn" onmouseover="window.status='Move down';return true;" onmouseout="window.status='';">
</map>
</body>
</html>

Change the width and height attributes of the <img> tag to match the size of your image if my guess is incorrect and this will work fine.

Note the addition of onmouseout handlers to clear the status bar.

You can also add alt attributes to hotspots and probably should do so.

Also -- no need for absolute URLs. Relative URLs will work fine and will be easier to deal with when you upload your files to a remote server.

This works fine in MSIE 6, Opera 7 and Mozilla 1.5 and should be okay in all browsers that support the title attribute.
0
 

Author Comment

by:Bl248
ID: 9759581
Thanks Zontar, I think the main issue may have been the image coordinates overlap or not having the image size dimensions.

The Title is now responding well but the mouseover status changes are not working. Thats not a show stopper but would be nice.

This being used in a PHP based template application and the {variables} are replaced at execution time. This is what I have now:

    <img src="{layout_url}/images/admin/{blockcontrol_image}" WIDTH="45" HEIGHT="20" border="0" usemap="#arrow{block_id}">
        <map name="arrow{block_id}">
            <area coords="0,0,12,20"  TITLE = "{upTitleMsg}" href="{site_admin_url}/block.php?mode=move&amp;bid={block_id}&amp;where=up" onMouseOver="window.status='{upTitleMsg}';return true;" onmouseout="window.status='';">
            <area coords="13,0,29,20" TITLE = "{moveTitleMsg}"  href="{site_admin_url}/block.php?mode=move&amp;bid={block_id}&amp;where={switchside}" onMouseOver="window.status='{moveTitleMsg}';return true;" onmouseout="window.status='';">
            <area coords="30,0,43,20" TITLE = "{dnTitleMsg}"  href="{site_admin_url}/block.php?mode=move&amp;bid={block_id}&amp;where=dn" onMouseOver="window.status='{dnTitleMsg}';return true;" onmouseout="window.status='';">
        </map>
0
Independent Software Vendors: 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 11

Expert Comment

by:Zontar
ID: 9759824
Well, I tested the image map code I posted in Mozilla, MSIE 6, and Opera 7 -- tooltips and status bar changes worked fine in all 3 browsers. This should be pretty straightforward stuff, might there be something else in the page interfering with it, or some stray quotes are getting stuck into the event handlers...?
0
 

Author Comment

by:Bl248
ID: 9759895
Thanks Zontar,

The answer without the status line changes is probally best. I have received other feedback that changing the browser status line is bad style anyways.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9760787
> I have received other feedback that changing the browser status line is bad style anyways.

I'm inclined to agree. Status bar scrollers are the worst. ;^)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Obtaining data on ASP 8 36
Link Anchor Not working 9 49
Table doesn't show the lines! 3 24
output in HTML format powershell 6 23
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: blockā€¦
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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