Hello!
When I run the code below in chrome, safari, firefox and opera it works well and shows the box and arrow onmouseover, but when I open it in IE then it dose not show the arrow only the box.
Please Guide me, Thanx.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>onMouseOver Change Div Background Image Example</title>
<script type="text/javascript">
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
function show() {
toggleDiv('div1',1);
}
function hide() {
toggleDiv('div1',0);
}
</script>
<style type="text/css">
.div1 {
visibility:hidden;
position:absolute;
background-color:#000;
margin:25px;
padding:3px;
width:auto;
height:auto;
color:#FFF;
border: 1px solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
-moz-box-shadow:3px 3px 3px #ADADAD;
-webkit-box-shadow:3px 3px 3px #ADADAD;
box-shadow:3px 3px 3px #ADADAD;
}
.div1.top:after {
position:absolute;
display: block;
content:"";
border-width:0 15px 15px 15px;
border-color: #000 transparent;
border-style: solid;
height:auto;
width:auto;
bottom:auto;
right: auto;
top:-15px;
left:3px;
}
</style>
</head>
<body>
<br>
<br>
<div onMouseOver="show();" onMouseOut="hide();">
<img src="http://www.mrfix.co.cc/pngimg.php" align="middle" class="security" />
</div>
<span class="div1 top" id="div1" onMouseOver="show();" onMouseOut="hide();">Bla bla bla Bla bla bla Bla bla bla </span>
</body>
</head>
