imagemapster opacity

Question

I am working on a project where the user will be able to hover over different apartments and see price, etc in tooltip boxes next to every area.

I am using jquery+imagemapster for this, where every apartment is an area on the map, and so far it works great. The problem is that the client wants the tooltips to be transparent, and when I set "opacity" in the div style nothing happens, I tried all the major browsers. The rest of the CSS works great, and the opacity works on a regular div, but not inside the tooltip. How do I set the opacity on the tooltip?

My javascript looks like this:

var image = $('#apartments1');
            image.mapster({
            toolTipClose: ["area-mouseout"],
            toolTipContainer: '<div style="border: 1px solid #ee6622; background: #FFFFFF; 
font-family:Arial; position:absolute; width:160px; padding:4px; margin: 4px;
 -moz-box-shadow: 0px 0px 7px #cc5511; ' + ' -webkit-box-shadow: 0px 0px 7px #cc5511; 
box-shadow: 0px 0px 7px #cc5511; -moz-border-radius: 6px 6px 6px 6px; 
-webkit-border-radius: 6px; ' +'border-radius: 6px 6px 6px 6px; opacity: 0.1;"></div>',
            clickNavigate: true,

score 1 · Answer 1 · answered Dec 19 '12 at 21:12

I build a little demo for you (jsFiddle). I just copied you html and css of the container. In this case the opacity works, but you can also see the problem of setting the opacity of the tooltip to 10%: All of it will be 10% also the text. To change this use a png as a background or use two divs independent from each other to get the effect.

BTW: I would insert a div with an id and then style the div in the css file. And opacity: 0.1; is every low, possible that you couldn't see it.

imagemapster opacity

1 Answers1