I am stuck very long on this.. hoping someone can help me with this as I am not proficient in Javascript.
The scenario is this:
I am using wordpress, and in a single page, I have a big picture(800px X 1200px) with cupcakes in it.
The effect I am hoping to achieve is this; When the user mouseover a particular cupcake(with a layer of transparent div), there will be an image that will appear(320px x 320px).
I tried using css :hover, it works for safari, chrome and firefox. But for IE, it does not work. Thus I am thinking of using javascript to manipulate the div class instead onmouseover and onmouseout events
PHP/HTML:
<div id="f1"></div>
CSS:
#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
}
So when the user mouseover the transparent div, I want an image(320px x 320px) to appear.
Many thanks!