Highlighted

Rollover image on image map

New Here ,
Jun 28, 2018

Copy link to clipboard

Copied

Hi,

I have made an image map whereby when a user clicks on a certain section, they are taken to a certain website. There are seven sections in total.

I want to change my map, so when a user hovers over asection, it highlights that section and displays text, almost like a rollover image?

If anyone could intruct me on how to do this, it would be greatly appreciated!

Thanks!

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

There are a lot of ways to do what you want, however image maps have fallen out of favor in most web design because they're totally unresponsive to a user's screen size, and since there's no mouse pointer to hover over your <area> tags on mobile devices, there's no rollover effect on anything mobile (over half of all online interactions are now on mobile).

You can make the image responsive, but the coordinates of the image map <area> don't change. On devices similar to your design environment, it will work. On larger or smaller devices, the links will be hidden or out of position.

If you absolutely must use an image map, it depends on the images being used as to how best to approach it. For example, if you're doing rollover regions on a vector map with links to individual pages, and you just want the background color to change, an SVG would be the way to go. If you have actual jpg or gif images, using a "responsive javascript image map" along with javascript rollovers attached to the <area> tags would work.

Views

176

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

Rollover image on image map

New Here ,
Jun 28, 2018

Copy link to clipboard

Copied

Hi,

I have made an image map whereby when a user clicks on a certain section, they are taken to a certain website. There are seven sections in total.

I want to change my map, so when a user hovers over asection, it highlights that section and displays text, almost like a rollover image?

If anyone could intruct me on how to do this, it would be greatly appreciated!

Thanks!

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

There are a lot of ways to do what you want, however image maps have fallen out of favor in most web design because they're totally unresponsive to a user's screen size, and since there's no mouse pointer to hover over your <area> tags on mobile devices, there's no rollover effect on anything mobile (over half of all online interactions are now on mobile).

You can make the image responsive, but the coordinates of the image map <area> don't change. On devices similar to your design environment, it will work. On larger or smaller devices, the links will be hidden or out of position.

If you absolutely must use an image map, it depends on the images being used as to how best to approach it. For example, if you're doing rollover regions on a vector map with links to individual pages, and you just want the background color to change, an SVG would be the way to go. If you have actual jpg or gif images, using a "responsive javascript image map" along with javascript rollovers attached to the <area> tags would work.

Views

177

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
Jun 28, 2018 0
Adobe Community Professional ,
Jun 28, 2018

Copy link to clipboard

Copied

There are a lot of ways to do what you want, however image maps have fallen out of favor in most web design because they're totally unresponsive to a user's screen size, and since there's no mouse pointer to hover over your <area> tags on mobile devices, there's no rollover effect on anything mobile (over half of all online interactions are now on mobile).

You can make the image responsive, but the coordinates of the image map <area> don't change. On devices similar to your design environment, it will work. On larger or smaller devices, the links will be hidden or out of position.

If you absolutely must use an image map, it depends on the images being used as to how best to approach it. For example, if you're doing rollover regions on a vector map with links to individual pages, and you just want the background color to change, an SVG would be the way to go. If you have actual jpg or gif images, using a "responsive javascript image map" along with javascript rollovers attached to the <area> tags would work.

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...
Jun 28, 2018 1
LEGEND ,
Jun 28, 2018

Copy link to clipboard

Copied

Use image sprites for the rollover effect, and you can place text inside the title attribute of the element containing the images which will display a tooltip on hover.

HTH,

^ _ ^

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...
Jun 28, 2018 1