este es el codigo
1.html
Código PHP:
<html>
<head>
<link href="css.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript" type="text/javascript" src="javas.js"></script>
<title>aaaaaaaaaaaaaaaa
</title>
</head>
<body>
ddddddddddddddddddddddd
<table width="100%" cellspacing="0" cellpadding="0" border="2" align="center">
<tr>
<td width=200 valign="top">ccccccccccccccccccccccc
<!--NAVEGADOR LATERAL IZQUIERDO-->
<div id="prueba1" onmouseover="visible()" onmouseout="ocultar()">opcion1</div>
<div id="prueba2" onmouseover="visible()" onmouseout="ocultar()" >opcion2</div>
<div id="prueba3">centro</div>
</td>
<td width=80% valign="top">hhhhhhhhhhhhhhhhhhhhhhh
<table align="center" width=100% height=100%>
<tr>
<td><div class="infront" id="fotin" onmouseover="visible2()" onmouseout="ocultar2()"><img src="a.jpg"></div><div class="behind" id="carrin" ><table><tr><td>nombre producto</td><td rowspan="2"><img src="cr.jpg"></td></tr><tr><td>precio</td></tr></table></div>
</td>
<td><div class="infront"><img src="a.jpg"></div><div class="behind"><table><tr><td>nombre producto</td><td rowspan="2"><img src="cr.jpg"></td></tr><tr><td>precio</td></tr></table></div>
</td>
</tr>
<tr>
<td><div class="infront"><img src="a.jpg"></div><div class="behind"><table><tr><td>nombre producto</td><td rowspan="2"><img src="cr.jpg"></td></tr><tr><td>precio</td></tr></table></div>
</td>
<td><div class="infront"><img src="a.jpg"></div><div class="behind"><table><tr><td>nombre producto</td><td rowspan="2"><img src="cr.jpg"></td></tr><tr><td>precio</td></tr></table></div>
</td>
</tr>
</table>
<!--CUERPO PRINCIPAL-->
</td>
<td width=200 align=center valign="top">hjjjjjjjjjjjjjjjjjjjj
<!--LATERAL DERECHO-->
</td>
</tr>
</table>
</body>
</html>
este es el js
javas.js
Código PHP:
function visible(){
obj = document.getElementById("prueba3");
obj.style.display = "block";
}
function ocultar(){
obj = document.getElementById("prueba3");
obj.style.display = "none";
}
function visible2(){
obj = document.getElementById("carrin");
obj.style.display = "block";
}
function ocultar2(){
obj = document.getElementById("carrin");
obj.style.display = "none";
}
este es el css
Código PHP:
/* div { border:1px solid black; } */
.infront {
background-color:#ff9900;
width:100px;
height: 100px;
position: relative;
z-index: 1;
}
.infront2 {
background-color:#ff9900;
width:100px;
height: 100px;
position: relative;
z-index: 3;
}
.behind {
background-color:#eeeeee;
width:200px;
height: 60px;
position: relative;
z-index: 2;
}
#prueba1
{
background:red;
width:100px;
height:100px;
}
#prueba2
{
background:blue;
width:100px;
height:100px;
}
#prueba3
{
background:green;
position:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
display:none;
}
