How to Create an Image Map Using CSS
Esistono vari modi per mappare un’immagine via CSS (aiutati qualche volta da JS), oggi ve ne segnalo alcuni… poi ognuno deciderà quale sia il migliore…
CSS Image Maps, Flickr-like Technique?
Tecnica proposta da Frank Manno basata sull’uso degli elementi DL, DT e DD via CSS e XHTML.
[...]a sample image map that’s built entirely using CSS and XHTML. While I’ve added support for Javascript (item titles are simply displayed beneath the image), I’ve disabled it in this example — I’ve run into a bit of a problem when JS is enabled and CSS is disabled (more details below).[...]
CSS Image Maps, Redux
Versione “redux” della precedente, sempre dello stesso autore e sempre CSS con XHTML.
[...]I went back to the drawing board, and came up with another solution that requires a single image, some CSS, and a little creativity! This second example makes use of transparent images (PNG images) to indicate an annotation on an image. Much of the same CSS from the first example was used, with a few minor alterations. Below is a sample of the old vs. [...]
CSS Image Map, by Moryson
Tecnica basata sull’uso delle liste non ordinale (UL) - CSS con XHTML. (sito e spiegazioni solo in tedesco)
Create a reactive zone (image map) with CSS
Tutorial che prende spunto da un vecchio articolo di A List Apart per poi proporre la propria soluzione via CSS e XHTML.
[...]It needs to be converted in block to go around that. There are only two possibilities to do that: display: block on the link (in this case, the image will need to be positionned) or float: left on the link, that will transform it in a block (that’s the solution I went with)[...]
A List Apart: Articles: A More Accessible Map
Questa invece è una soluzione che sfrutta anche il JS accompagnato sempre da CSS e XHTML.
As companies like Google and Yahoo! have simplified the process of placing information on a map by offering web services/APIs, the popularity and abundance of mapping applications on the web has increased dramatically. While these maps have had a positive effect on most users, what does it mean for people with accessibility needs?[...]
How to Create an Image Map Using CSS
Tutorial fatto molto bene, con un’interessante soluzione finale, tutto via CSS e XHTML.
Here, you will learn one styling step at a time, fully explaining the reason for each style and showing the results of each step, so that you can see what to expect and implement it for yourself.
CSS: Map Pop
L’ultima soluzione che vi segnalo è davvero valida.
Image maps are cool. So are pop-ups. Here I combine the two into a single “Map Pop” experiment. Combining the two could be very useful to some people. Especially if you want a nicely interactive solution that just happens to be accessible to a vast number of users. In addition to its accessibility, based not on conjecture but on actual testing, this solutions seems to be supported by a large number of user agents, even Internet Explorer 6.x [...]
Ora non vi resta che provare, provare e provare… finchà© non troverete la soluzione che fa al caso vostro… buon lavoro.
io ai tempi usai il primo di quelli che proponi.. probabilmente è superato, si parla di un anno e mezzo fa se non ricordo male (quando ho un attimo mi guardo gli altri).. però mi trovai bene, semplice e immediato.