laboratorio caffeina

This article of jakpsatweb about vertical alignment is really the only solution I found out about this issue.

I take the Structural solution without Hack as reference, most of all becouse when an hack is not strictly neccesary it's better to avoid it.

Yuhu's code is great.

but it's not working on ie7, that catches [id] selectors but behaves as ie6.

so what?

according to css selectors we should write those css line more

have fun :)

Condividi

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

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 Maps, Redux

CSS Image Map, by Moryson

Tecnica basata sull'uso delle liste non ordinale (UL) - CSS con XHTML. (sito e spiegazioni solo in tedesco)

• CSS Image Map, by Moryson

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)[...]

• Create a reactive zone (image map) with CSS

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?[...]

• A List Apart: Articles: A More Accessible Map

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.

• How to Create an Image Map Using CSS

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 [...]

• CSS: Map Pop

Ora non vi resta che provare, provare e provare... finchà© non troverete la soluzione che fa al caso vostro... buon lavoro.

Condividi