![]() Responsive image map demo by Derek Fogge ( CodePen. It does use jQuery to style the areas on click, but notice the way a map overlays the image and coordinates are used to create the targets. Here’s another example from Derek Fogge that uses uses maps to create more interesting click targets. That’s because the coordinates of the areas defined in their image map match the locations of the sun and planets in the base image. W3 Schools has an excellent example of an image map using a picture of the solar system where the sun and planets are linked to close-up images of those targets - everywhere else in the image is un-clickable. There are, however, options for styling the areas with JavaScript. However, they can’t be styled with CSS alone to provide interactive cues, like we were able to do with SVG on hover - the cursor is the only visual indicator that the target area of the image can be clicked. Image maps have been around since HTML 3, meaning they have excellent browser support. Unlike the hyperlink element in the SVG example, the coordinates in the image map don’t have anything to do with the definition of the source image. The map will effectively overlay the entire image element, but it’s up to you to define the clickable area. Image maps are defined separately from the image source. It’s possible to apply a clickable target to a portion of an tag using an image map. Let’s say you don’t have control over the SVG markup, or that you need to add a clickable area to a raster image instead. The viewbox for this SVG is still a rectangle, so wrapping the entire SVG element wouldn’t have the same effect. The only trick here is to make sure the tag is inside the SVG markup and that the tag wraps the shape you want to be clickable. The href alone would have worked in Internet Explorer, Chrome, and Firefox. Note that I’ve used the deprecated xlink:href property in this demo to ensure that the link will work on Safari. In this example the link for the bullseye wraps a single circle element, but the more complex arrow shape is made up of two polygons and a path element. It can surround a group of SVG elements or just one. Your tag can surround a simple shape or more complex paths. This is as easy as wrapping the target with an tag, just as you would a nested html element. The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. If your click target is an image or a portion of an image, and you have the ability to choose SVG as its format, you already have a great deal of control over how that element will behave on your page. However, you can also control the shape of that region with different techniques, making sure the target for your click area exactly matches what’s visible on the screen. You can surround those assets with an un-styled tag to get a clickable rectangle that’s approximately the right size. Or you have an interactive image that responds differently when different regions of it are clicked. Or you have a large uniquely shaped logo where you only want that unique shape to be clickable. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Different website designs often call for a shape other than a square or rectangle to respond to a click event. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |