Home/ Questions/Q 6158225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T20:55:18+00:00

Here is the problem : I want to create reactive zones on a image

  • 0

Here is the problem : I want to create reactive zones on a image using transparent div, but the following code doesn’t work on IE (tested on Chrome) : the background-color of the div “hover_zone” doesn’t change at all.

The problem is due to the background-color set to transparent. Use any valid color like #FFF and it works (it seems IE thinks like: it’s transparent, it doesn’t contain anything, let’s not display it).

<html>
<body>

<style type='text/css'>

#hover_zone{
    background-color:transparent;
    visibility: visible;
    position:absolute;
    width:40px;
    height:40px;
    left:10px;
    top:10px;
    z-index:1000;
}

a:hover #hover_zone{
    background-color:#0C0;
    visibility: visible;
}

</style> 

<div id="container">
  <img src="http://ptaff.ca/blogue/wp-content/uploads/noir_black.png" />
  <a href="#"><div id="hover_zone"></div></a>
</div>

</body>
</html>

Thanks for your help!

Cheers!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I had this exact problem and fixed it with this style:

    div#hover-zone { background:transparent url('../images/spacer.gif') 0 0 repeat; }

    where spacer.gif is a 1px transparent gif.

    hope this helps.

    • 0