The Many Ways to Link Up Shapes and Images with HTML and CSS

Many website designs require non-square or rectangular shapes to respond to click events. Maybe your website has some slanted or curved banners, and if you use a right-angle rectangle, the click area will appear clumsy and over-large. Or you have a large logo with a unique shape that you just want to make that unique shape clickable. Or you have an interactive image that produces different responses when clicking on different areas.

You can use unstyled<a></a> Tags surround these resources to obtain clickable rectangles of approximately the right size. However, you can also use different techniques to control the shape of the area, ensuring that the target of the click area exactly matches what is displayed on the screen.

SVG shape

If your click target is an image or part of an image and you can choose SVG as its format, you already have a lot of control over how that element behaves on the page. The easiest way to make a part of an SVG clickable is to add an SVG hyperlink element to the tag. It's like using<a></a> Tag wrapping goals is as simple as wrapping nested HTML elements. Yours<a></a> Tags can surround simple shapes or more complex paths. It can surround a group of SVG elements or just one. In this example, the link to the bullseye wraps a separate circular element, but the more complex arrow shape consists of two polygons and a path element.

Note that I used the deprecated xlink:href property in this demo to ensure the link runs on Safari. Use only href to run in Internet Explorer, Chrome, and Firefox.

The only trick here is to ensure<a></a> The tag is located within the SVG tag and the tag wraps the shape you want to clickable. The viewport of this SVG is still rectangular, so wrapping the entire SVG element does not produce the same effect.

Picture map

Assume that you have no control over the SVG markup, or you need to add a clickable area to the raster image. You can use the image map to apply a clickable target to a portion of img tag.

Image map is defined separately from image source. The map will actually cover the entire image element, but it is defined by you to clickable areas. Unlike the hyperlink elements in the SVG example, the coordinates in the image map have nothing to do with the definition of the source image. Image maps have been around since HTML 3, which means they have excellent browser support. However, they cannot be styled with CSS alone to provide interactive prompts, like we do when hovering with SVG – the cursor is the only visual indicator that the image target area can click. However, you can use JavaScript to style the region.

W3Schools has an excellent example of image maps using solar system images, where the sun and planets link to close-up images of these targets—nowhere else in the image can be clicked. This is because the coordinates of the region defined in the image map match the positions of the sun and planets in the basic image.

Here is another example of Derek Fogge, which uses maps to create more interesting click targets. It does use jQuery to style the area when clicked, but be aware of how the map overwrites the image and how the target is created using coordinates.

You can also implement image maps on more complex shapes. In fact, let's go back to the same target shape in the SVG example, but this time using a raster image. We still want to link the arrows and bullseyes, but this time there is no SVG element to help us. For bullseye, we know the X and Y coordinates and their radii in the underlying image, so it is very easy to define the circle of the region. The arrow shape is more complex. I use https://www.image-map.net to draw the shape and generate the area of ​​the image map - it consists of a polygon and a circle for the edge of the top circular shape.

Clip path

What if you want to use CSS to define the shape of a custom click area without using JavaScript for style? The CSS clip-path attribute provides considerable flexibility in defining and setting the style of target regions on any HTML element.

Here we have a click area with a five-pointed star shape. The star is technically a polygon, so we can use the star base image and the image map with corresponding coordinates as in the previous image map example. But let's use clip-path . The following example shows the same clip-path applied to the JPG image and the hyperlink element that is absolutely positioned.

The browser support for clip-path is much better, but it may still be inconsistent for some values. Be sure to check the support and vendor prefixes before relying on it.

We can also mix and match different methods based on the method that best suits the shape of a particular click target. Here I used a combination of the "close" shape created by Bennet Freely's clippy and the SVG hyperlink element to build a clickable tic-toe game. SVG is useful here, ensuring that the "hole" in the middle of the "O" shape is not clickable. However, for "X" (which is a polygon), a single clip-path can style it.

Again, be aware of browser support, especially when mixing and matching technologies. The above demonstration is not supported everywhere.

CSS shape without transparent borders

clip-path attribute allows us to apply predefined shapes to HTML elements of our choice, including hyperlink elements. There are many other options to create HTML and CSS elements that are not squares and rectangles – some of which you can see in CSS Shapes. However, not all technologies will affect the shape of the click area as you would expect. Most examples in CSS shapes rely on transparent borders, and even if your users cannot see them, the DOM will still recognize them as part of the click target. Other tips such as positioning, transformations, and pseudo-elements such as ::before and ::after ) will keep your styling hyperlink consistent with its visible shape.

This is a CSS heart shape that does not rely on transparent borders. You can see that the red heart is the only clickable area in the element.

Here is another example of creating a CSS triangle shape using transparent borders. You can see that the click area ends up outside the actual shape. Hover over the element and you will be able to see the true size of the click area.

Hopefully this gives you a good idea of ​​the many ways to create clickable areas on images and shapes using HTML and CSS. You may find that you need to use JavaScript for a more advanced interactive experience. However, the combined functionality of HTML, CSS, and SVG provides quite a few options for controlling the exact shape of the click target.

The above is the detailed content of The Many Ways to Link Up Shapes and Images with HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!