Can I Use Opacity On Imagemap?

Discussion in 'General Webmaster Support' started by Andrewgosu, Aug 29, 2007.

  1. Andrewgosu

    Andrewgosu The Silent Pandaren Helper Staff Member

    Ratings:
    +711 / 0 / -0
    Lets say I have a image and an imagemap on it.

    HTML:
    <map id="example" name="example">
    	<area shape="rect" coords="0,0,50,100" href="#" alt="example" />
    </map>
    Is it possible to use the -moz-opacity/alpha:eek:pacity for the image map?

    If not, are there any alternatives to change the opacity for a single part of an image, rather than the whole image?
     
  2. phyrex1an

    phyrex1an Staff Member and irregular helper Staff Member

    Ratings:
    +446 / 0 / -0
    Use a png image?
     
  3. Andrewgosu

    Andrewgosu The Silent Pandaren Helper Staff Member

    Ratings:
    +711 / 0 / -0
    HTML:
    <img border="0" src="example.png" width="200" height="300" usemap="#example" />
    
    <map id="example" name="example">
    	<area shape="rect" coords="0,0,50,100" href="#" target="_blank" alt="example" style="-moz-opacity:0.4;filter:alpha(opacity=40)" />
    </map>
    Like this?
     
  4. phyrex1an

    phyrex1an Staff Member and irregular helper Staff Member

    Ratings:
    +446 / 0 / -0
    I mean that you use the png to create the opacity. PNG, in difference to GIF, do support variable opacity. It isn't cross browser but the same thing goes for css opacity, and that isn't even standard (yet).
     
  5. monoVertex

    monoVertex I'm back!

    Ratings:
    +459 / 0 / -0
    I found a piece of CSS code that would make an image transparent in IE, Opera and FF. I think it's better than PNG, that don't appear in IE :p.

    And btw, it shouldn't be a problem to change the opacity, you can virtually change the opacity of everything...
     
  6. phyrex1an

    phyrex1an Staff Member and irregular helper Staff Member

    Ratings:
    +446 / 0 / -0
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    </head>
    <body>
    <div>
    <img src="http://www.google.se/intl/en_com/images/logo_plain.png" alt="">
    <img style="opacity:0.5" src="http://www.google.se/intl/en_com/images/logo_plain.png" alt="">
    <img style="border:0;" src="http://www.google.se/intl/en_com/images/logo_plain.png" alt="" usemap="#example">
    <map id="example" name="example">
    	<area shape="rect" alt="" coords="0,0,50,100" style="opacity:0.5;">
    </map>
    
    <img src="http://www.google.se/intl/en_com/images/logo_plain.png" alt="" usemap="#example">
    <div style="opacity:0.5;position:relative;bottom:90px;width:200px;height:60px;background-color:#FFF;"></div>
    </div>
    
    </body>
    </html>
    Only the last attempt gives the correct result, and only if the div background color is the same as the one behind the image. So it isn't true opacity, for example it is impossible to get the correct result if the background is an image. Besides, using position probably makes this less cross browser than the pgn alternative.
    Note: I did only add the opacity css property, for better cross browser you need filter and -moz-opacity too.
     

Share This Page