Skip to main content
C
craigp66009168
Participant
June 28, 2018
Answered

Rollover image on image map

  • June 28, 2018
  • 2 replies
  • 913 views

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!

    This topic has been closed for replies.
    Correct answer Jon Fritz

    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.

    2 replies

    WolfShade
    WolfShade
    Legend
    June 28, 2018

    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,

    ^ _ ^

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    June 28, 2018

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices