Search code examples
csscss-selectorsimagemap

How to use pseudo-class :target within an image map

I have a <div> classed as class="tooltip" which is normally hidden with display:none.

I would like the <div> to show with display:block when an area of my image-map is clicked. I am planning on using the :target pseudo-class.

Here is the simplified version of my code :

<img id="slot" class="single" src="slot.png" usemap="#slot"/>

<map name="slot">
    <area
         shape="poly"
         coords="30,0,61,15,31,31,0,16"
         alt="Slot"
         href="#trigger-happy">
</map>

<div class="fixed-container">
    <div class="tooltip">
            Slot
    </div>
</div>

As you can see, the trick is that the href is hidden away within the <area> tag. From what I understand, it is currently impossible to select a parent with pure CSS.

Would you have any suggestions on how to perform this task ? I'm not familiar with JavaScript, so a pure CSS answer would be ideal. I know I'll have to get down to JS eventually however, so a JS fix would also be acceptable if there is no other way.

It should be noted that I can already achieve similar results with the :hover pseudo-class, by applying it to the map tag. When using map:hover, the browser reacts perfectly. However, for actual clicking rather than hovering, I'm not sure I can just use <a> with <map>, it doesn't seem to work.

Solution

  • You are targeting #trigger-happy via href, therefore you would add id="trigger-happy" to the element .tooltip.

    Here is a working example.

    Updated HTML:

    <div class="fixed-container">
    <div id="trigger-happy" class="tooltip">
        ...
    </div>
</div>

    Use the :target pseudo class to style the targeted element, #trigger-happy.

    The base CSS would look like this:

    #trigger-happy {
    display:none;
}

#trigger-happy:target {
    display:block;
}

    The downside to the :target approach is that once something is clicked, it is clicked. There isn't any toggling available with this option. I imagine you could use the checkbox hack if you wanted it to be toggleable, otherwise JS would be needed.