All geek questions in one place

So, if image cards and slices are missing, what happens?

Maps and fragments of images on Google Googling make it clear that they are no longer desirable tools to use. Given what is the best way to get closer to creating a complex form for clicks?

I did some work with multiple images and used z-index to change the look, but for a more complex image (which is more suitable for a polygon-shaped image map) is there a consistent best approach?

+4
source share
1 answer

I do not see anything wrong with image cards, as such. It is still in HTML5 . The biggest drawback is that you need an image, well, that’s not always what you want.

Svg

Using embedded SVG is apparently the only alternative way to create complex interactive elements. Browser support is decent , but not universal.

Here is an example of a clickable star shape, I created this SVG with Inkscape, saved it as a “simple SVG,” deleted the metadata stuff, and added the tag <a>.

<!DOCTYPE html>

<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

</svg>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="744.09448"
   height="1052.3622"
   id="svg2">
  <defs
     id="defs4" />
<!-- Added to inkscape file -->
<a xlink:href="http://example.com">

  <g
     id="layer1">
    <path
       d="m 214.28571,506.6479 -48.81229,-77.46894 -91.489505,-3.70793 58.593515,-70.36247 -24.74537,-88.1575 85.02508,33.98254 76.  +19603,-50.7764 -6.04513,91.36484 71.8371,56.77595 -88.76117,22.48403 z"
       id="path2985"
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:+4;stroke-opacity:1;stroke-dasharray:none" />
  </g>
</a>
</svg>

</body>

You can also run more complex scripts.

Useful libraries: svg.js , Raphaël (top search results, not endorsements).

CSS

CSS . " " , . , .

  • border-radius
  • (ab)
  • CSS3

, SVG , . CSS . CSS .

Canvas

<cancas>, , .

+1

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

More articles:


All Articles