Can I Use Opacity On Imagemap?

Andrewgosu

The Silent Pandaren Helper
Reaction score
715
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?
 

Andrewgosu

The Silent Pandaren Helper
Reaction score
715
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?
 

monoVertex

I'm back!
Reaction score
460
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...
 

phyrex1an

Staff Member and irregular helper
Reaction score
446
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.
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Staff online

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top