Image Cards and HTML5

Question

This question is more philosophical than technical.

I trained as a web developer when web developers were called webmasters and my tool of choice was FrontPage, moving to Evrsoft 1st Page 2000.

This was the last time I used an HTML image map.

Now it's HTML5, AJAX, vector canvases, CSS 3D, jQuery, local storage, the Safari touchscreen, you name it. The image map has disappeared into obscurity, where even Google does not have too many relevant results; Mandatory entry at W3C schools and some forum posts since 2004.

Obviously, creating a site navigation or similar triviality using an image map was a bad idea, and today it is certainly unforgivable.

But now I have a task to create a polygonal area with a click on top of a div with a background image.

I would have no problem doing this on the image map, as it seems that it was designed to be used in this form, and although I did not conduct any tests, I could not imagine any browser support for the item which is fine have been working for years. But I cannot help but think that today should be the best way to do this.

My website design philosophy is for development for IE5.5 and then for Chrome. This means that the site must first work at a basic level even with the oldest browser, and then start adding JS and CSS to make it more beautiful, more convenient, faster, simple, friendly and better.

As such, although I know that I could make a canvas in Raphaël and add all kinds of spectacular effects and things, I think that creating a simple function like this should not require a 89 kb JS library (or X kb). Or even JS at all.

I don’t know if CSS3 has the ability to define polygonal areas, but, recognizing the great features presented in CSS3, I prefer to keep something defined here as an immaterial flair that will degrade gracefully.

So, in today's world of webdev, whatever cross-browser way to determine the area of ​​a polygonal click (preferably in such a way as to capture jQuery .hover() or at least CSS :hover )), i.e. t depends on JavaScript or CSS attributes available in fewer browsers? Is an image map the only way to do this? What are mobile devices?

Answer 1

Why is using image maps for navigation unforgivable? It is a tool like any other; he has time and place. Using imagemaps with javascript enhancement is backward compatible, degrades gracefully and supports a 100% browser. They don’t need a plugin such as flash, they are supported almost from the very beginning of the web browser. Just because something old does not mean that it is not useful; quite the contrary, it means that it is well maintained.

I wrote a jquery plugin called ImageMapster to add effects to imagemaps so you can create interactive images without using flash. It would be easy to implement a tool that would have the same functionality without Javascript support, replacing the list in these cases. Personally, I think trying to write for the web without javascript is like trying to drive a car without tires. 99% of the Internet does not work without it. This is not 1995. But if you're really worried, the nice thing about imagemaps is the basic navigation functionality. It is not possible to achieve this only with CSS - even CSS3 if you have irregular shapes.