All geek questions in one place

Not Rectangular CSS Image Links

I have the following requirement:

The large image contains several “hot spots” that need to be linked to other pages. That sounds easy. I created a simple html page, div with background image and absolute positioned links using CSS with image sprite rollovers.

However, now I was presented with a different image, and the hot spots are not square, but incorrect. In one example, they look like surfboards. Any ideas how I can make links only respond to the actual bounding box of the image. There are also cases where the "hot spots" are parallelograms and are adjacent to each other.

Creating rectangular images in this instance simply does not provide the desired results.

I think imagery can be a solution, but first I want to explore all the alternatives.

Hope this makes sense.

+3
source share
2 answers

An alternative to HTML image images is the CSS sprites described in this article list . Read the section under "irregularly shaped."

Some work is required, but the final HTML will be semantically more attractive (i.e., search engines) than with standard image maps.

+1
source

HTML- - - ..

, - SVG , IE6.

+9

Source: https://habr.com/ru/post/1723589/

More articles:


All Articles