How are these hyperlinked hover effects created?

HTML & CSS
1

Hi from York UK :slight_smile:

Love the above, but how do they create the hover over hyperlinks, is it a JavaScript thing or good old HTML. I just cant get m,y head around how they’ve created the hyperlinks!

Thanks in advance,
David

2

Hi David. It looks like an image map to me. https://en.wikipedia.org/wiki/Image_map

3

If you look at the source you will see a <map> element with <area>s for children.
The hover box is done via javascript. You can have boxes appear on hover with just css, but they won’t follow the cursor like that.

4

Try viewing with a mobile…

5

Yes they use maphighlight.js. It turns an image map into areas that can be hovered.

1 Like
7

You know…
Alternatively, you could use an image, and list (for your hover content, and AP to achieve this w/o j/s and semantically correct. w/o going into specific code, one of several ways of doing this might be:

  1. you would have a container element (the UL) with relative position , sized to the size of your map image. set the map image as the bg for this element.
  2. Each location would then be a LI , we could, arbitrarily, size each LI to be 1em x 1em, and absolutely positioned at the appropriate coordinates.
  3. the info would then go in an arbiltrarilly sized DIV inside the LI that would be absolutely positioned off screen ( to hide it until hover)
    4.on LI:hover > DIV , we would change the position so that it is visible where you wanted to go.

just an option. :slight_smile:

3 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.