Iniciar sesión
Crear cuenta
Crear cuentaCrear cuenta
/*THUMBNAIL HOVERPOPUPS */.thumbpiramide{
position: relative;z-index: 0;
}.thumbpiramide:hover{
background-color: transparent;
z-index: 50;
}.thumbpiramide span{ /*CSS for enlarged image*/
position: absolute;background-color: #006e8b;
padding: 5px;left: -1000px;
border: 1px dashed #006e8b;
visibility: hidden;color: white;text-decoration: none;
}.thumbpiramide span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;}.thumbpiramide:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;/*top: 0;
left: 0; position where enlarged image should offset horizontally */left: 50%;
margin: -10px 0 0 -45px;
position: fixed;top: 60%;
width:180px; height:auto;}/*if same attribute for all 4 states, then declare here in
a.thumbnail2*/a.thumbpiramide img:link {
border: 2px solid #006e8b;
background: transparent;}a.thumbpiramide img:visited {
border: 2px solid #006e8b;
background : transparent;}a.thumbpiramide img:hover {
border: 2px solid #f00;
background : transparent;}a.thumbpiramide img:active {
border: 2px solid #006e8b;
background : transparent;}a.thumbpiramide img {
border: 2px solid #006e8b;
}/*end of hover popup links*/<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var id=0;$("img").hover(function(){
id=$(this).attr("id");
$("."+id).addClass("selected");
},function(){
$("."+id).removeClass("selected");
});
});
</script>
<style>
img {border:1px solid #ccc;
padding:1px; }.selected {
border:1px solid red; }</style>
</head>
<body>
<img class="c1 c2 c5" id="c1" src="img_1.jpg">
<img class="c1 c2" id="c2" src="img_2.jpg">
<img class="c1 c3 c4" id="c3" src="img_3.jpg">
<img class="c2 c3 c4 c5" id="c4" src="img_4.jpg">
<img class="c2 c4 c5" id="c5" src="img_5.jpg">
<img class="c3 c4 c6" id="c6" src="img_6.jpg">
</body>
</html>
<td><a class="thumbpiramide" href="web1.html"><img class="c1 c2 c5" id="c1" src="images/img1.jpg" alt=""/><span><img src="images/img1.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web2.html"><img class="c1 c2" id="c2" src="images/img1.jpg" alt=""/><span><img src="images/img2.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web3.html"><img class="c1 c3 c4" id="c3" src="images/img1.jpg" alt=""/><span><img src="images/img3.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web4.html"><img class="c2 c3 c4 c5" id="c4" src="images/img1.jpg" alt=""/><span><img src="images/img4.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web5.html"><img class="c2 c4 c5" id="c5" src="images/img1.jpg" alt=""/><span><img src="images/img5.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web6.html"><img class="c3 c4 c6" id="c6" src="images/img6.jpg" alt=""/><span><img src="images/img6.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<script>
$(document).ready(function(){
var id=0;$("img").hover(function(){
id=$(this).attr("id");
$("."+id).addClass("selected");
},function(){
$("."+id).removeClass("selected");
});
});
</script>
$("img").hover(function(){
a.thumbpiramide img<img class="c1 c2 c5" id="c1" src="img_1.jpg">
<img class="c1 c2" id="c2" src="img_2.jpg">
<img class="c1 c3 c4" id="c3" src="img_3.jpg">
<img class="c2 c3 c4 c5" id="c4" src="img_4.jpg">
<img class="c2 c4 c5" id="c5" src="img_5.jpg">
<img class="c3 c4 c6" id="c6" src="img_6.jpg">
<table><td><tbody>
<tr>lass="thumbpiramide" href="web1.html"><img class="c1 c2 c5" id="c1" src="images/img1.jpg" alt=""/><span><img src="images/img1.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web2.html"><img class="c1 c2" id="c2" src="images/img1.jpg" alt=""/><span><img src="images/img2.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web3.html"><img class="c1 c3 c4" id="c3" src="images/img1.jpg" alt=""/><span><img src="images/img3.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web4.html"><img class="c2 c3 c4 c5" id="c4" src="images/img1.jpg" alt=""/><span><img src="images/img4.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web5.html"><img class="c2 c4 c5" id="c5" src="images/img1.jpg" alt=""/><span><img src="images/img5.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>
<td><a class="thumbpiramide" href="web6.html"><img class="c3 c4 c6" id="c6" src="images/img6.jpg" alt=""/><span><img src="images/img6.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td></tr>
</tbody>
</table>
<script>
$(document).ready(function(){
var id=0;$("img").hover(function(){
id=$(this).attr("id");
$("."+id).addClass("selected");
},function(){
$("."+id).removeClass("selected");
});
});
</script>
<style>
img {border:1px solid #ccc;
padding:1px; }.selected {
border:1px solid red; }</style>
img {border:1px solid #ccc;
padding:1px; }<script src="jquery.min.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>
$a.thumbpiramide ("img").hover(function(){
$("img").hover(function(){
a.thumbpiramide img:hover {
border: 2px solid #f00;
background : transparent;