Bl248
asked on
Image MAP and getting Title to work.
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>
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
<area coords="12,0,29,20" href="http://localhost/admin/block.php?mode=move&bid=3&where=1" onMouseOver="window.status
<area coords="30,0,43,20" href="http://localhost/admin/block.php?mode=move&bid=3&where=dn" onMouseOver="window.status
</map>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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/a dmin/{bloc kcontrol_i mage}" 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}/blo ck.php?mod e=move& ;bid={bloc k_id}& where=up" onMouseOver="window.status ='{upTitle Msg}';retu rn true;" onmouseout="window.status= '';">
<area coords="13,0,29,20" TITLE = "{moveTitleMsg}" href="{site_admin_url}/blo ck.php?mod e=move& ;bid={bloc k_id}& where={swi tchside}" onMouseOver="window.status ='{moveTit leMsg}';re turn true;" onmouseout="window.status= '';">
<area coords="30,0,43,20" TITLE = "{dnTitleMsg}" href="{site_admin_url}/blo ck.php?mod e=move& ;bid={bloc k_id}& where=dn" onMouseOver="window.status ='{dnTitle Msg}';retu rn true;" onmouseout="window.status= '';">
</map>
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/a
<map name="arrow{block_id}">
<area coords="0,0,12,20" TITLE = "{upTitleMsg}" href="{site_admin_url}/blo
<area coords="13,0,29,20" TITLE = "{moveTitleMsg}" href="{site_admin_url}/blo
<area coords="30,0,43,20" TITLE = "{dnTitleMsg}" href="{site_admin_url}/blo
</map>
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...?
ASKER
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.
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.
> 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. ;^)
I'm inclined to agree. Status bar scrollers are the worst. ;^)
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&