CodingForums.com - Imagemapster tooltip opacity

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Imagemapster tooltip opacity (http://www.codingforums.com/showthread.php?t=284356)

Imagemapster tooltip opacity

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:

Code:

  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,

Try:

opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */

Quote:

Originally Posted by StevenHu (Post 1300900)

Try:

opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */

Yeah, I´ve tried these:

Code:

-moz-opacity: 0.50;

-khtml-opacity: 0.50;

opacity: 0.50;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

filter:alpha(opacity=50);

Not working in Chrome, FF, IE9 or Safari. I guess it must be something in imagemapster?