Highlighted

mouseover text on a image map hotspot

Explorer ,
Jul 13, 2020

Copy link to clipboard

Copied

I have an image map with a hot spot that when clicked goes to a link. I want text to appear when the mouse is rolled over the hotspot. Surely this can be done simply in DW? 

INSERT > HTML > ROLLOVER IMAGE doesn't do me any good as it wants me to specify an original image which can't be done with a hotspot. I looked at mouseover events but where would I put the code. I guess what I really want to do is insert a tooltip. HELP! 

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

The simplest way would be to add title attributes to your <area> tags. For example...

<area shape="rect" coords="306,239,367,303" href="page.html" title="Well, hello there" alt="something descriptive">

Keep in mind, standard image maps are not responsive and the hotspots will drift if the image resizes on smaller/larger devices than what was used to design them. Also, mobile devices lack a mouse, so rollovers rarely ever do anything.


Views

57

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

mouseover text on a image map hotspot

Explorer ,
Jul 13, 2020

Copy link to clipboard

Copied

I have an image map with a hot spot that when clicked goes to a link. I want text to appear when the mouse is rolled over the hotspot. Surely this can be done simply in DW? 

INSERT > HTML > ROLLOVER IMAGE doesn't do me any good as it wants me to specify an original image which can't be done with a hotspot. I looked at mouseover events but where would I put the code. I guess what I really want to do is insert a tooltip. HELP! 

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

The simplest way would be to add title attributes to your <area> tags. For example...

<area shape="rect" coords="306,239,367,303" href="page.html" title="Well, hello there" alt="something descriptive">

Keep in mind, standard image maps are not responsive and the hotspots will drift if the image resizes on smaller/larger devices than what was used to design them. Also, mobile devices lack a mouse, so rollovers rarely ever do anything.


Views

58

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 13, 2020 0
Adobe Community Professional ,
Jul 13, 2020

Copy link to clipboard

Copied

The simplest way would be to add title attributes to your <area> tags. For example...

<area shape="rect" coords="306,239,367,303" href="page.html" title="Well, hello there" alt="something descriptive">

Keep in mind, standard image maps are not responsive and the hotspots will drift if the image resizes on smaller/larger devices than what was used to design them. Also, mobile devices lack a mouse, so rollovers rarely ever do anything.


Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 1
Explorer ,
Jul 13, 2020

Copy link to clipboard

Copied

Thank you John, your post got me the answer to exactly what I spent hours searching for!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 0