Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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,

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Try:


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

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by StevenHu View Post
    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?


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •