Floating labels

[nhereveri]

Hi there I need two features over this map photo: http://goo.gl/xEDwn

First put labels around squares points, like this area: (203,181),(211,189). This labels must show always.

Second put other label when cursor is inside the same area as above. This labels must show hover event activated class.

Assume that we know the dimension of the map. 450×370 in this case.

Please just CSS. I know the JS and HTML.

Thanks in advance!

[Kitty Giraudel]

What do you mean by “inside the same area”?

[Paulie_D]

Firstly, if the initial labels (203,181),(211,189) will always show then just add them to the image with Photoshop or something.

There are a few ways to add the additional labels but it depends one whether or not these will need to be easily editable as to which is the best approach.

[Paulie_D]

Had a quick think and I think this will work: http://codepen.io/Paulie-D/pen/Lhtcm

[JoniGiuro]

is this what you want? http://codepen.io/anon/pen/lzydw

[JoniGiuro]

it’s pretty much the same thing as Pualie did, just how I understood the thing..

[Paulie_D]

As I said, there are a lot of way to do it.

I think you could do it with image maps.

I shied away from pseudo elements for deeper browser support and because the ‘content’ of the additional labels would actually be in the CSS and not the HTML and that’s sort of a no-no.

[nhereveri]

Exactly! That is OK. Just perfect.

Thanks to Paulie_D and JoniGiuro, you guys rock!

I’ll leave the query marked as solved.

Sorry for my poor English, not my native language.

I hope this help others.

[Author]

Posts