2 Questions about Image Maping

I’m just using a standard image map HTML code for an operations guide for new hires to learn a system were developing so I’d like to keep it as simple as possible. I’ve tried a few different ways others have accomplished what I’m looking for, but I was unable to get the results I wanted.

I’d like to produce a better more readable tooltip (title) on mouseover of area’s within an image map.

I’d also like to highlight and place a border around areas on mouseover with href in the image map and not areas without href.

Here’s an example of one of the image maps.

<img src=”./images/SystemGUI.png” usemap=”#SystemGUI”><map name=”SystemGUI”>
<area name=”Stop” shape=”rect” coords=”20,253,102,333″ title=”Stop Command”>
<area name=”Go” shape=”rect” coords=”17,339,101,369″ title=”Start Command”>
<area name=”Server Status” shape=”rect” coords=”9,390,108,413″ title=”Status of 192.168.68.2″>
<area name=”In” shape=”rect” coords=”555,328,617,348″ title=”Cable In”>
<area name=”Out” shape=”rect” coords=”556,347,617,368″ title=”Cable Out”>
<area name=”Close” shape=”rect” coords=”291,392,366,415″ href=”./index.html” title=”Close GUI”>
<area name=”Initiate System” shape=”rect” coords=”21,217,101,243″ href=”./initiate.html” title=”Begin Operation”>
<area name=”Close” shape=”rect” coords=”632,160,657,185″ href=”./index.html” title=”Exit GUI”>
</map>

Thank you very much!

Also in #HTML _↴