Crear cuenta<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var id=0;$("img").hover(function(){
id=$(this).attr("id");
$("."+id).addClass("selected");
informacion(id);
},function(){
$("."+id).removeClass("selected");
$("#informacion").html("");
});
function informacion(id)
{var imagenes="";
$("."+id).each(function() {
imagenes+="<br>"+$(this).attr("id");
});
$("#informacion").html("Las imagenes que se marcan son:"+imagenes);
}});
</script>
<style>
img {border:2px solid #ccc;
padding:1px; }.selected {
border:2px solid red; }</style>
</head>
<body>
<p>Definimos cada una de las imagenes con las clases que queremos que se remarque.
<br>Cada clase, equivale a un id de imagen.</p>
<p>Por ejemplo, si la primera imagen tiene el id=c1, y queremos que al pasar por
encima se remarque la imagen 1, 3 y 5, hay que poner c1 en la clase css de las
imágenes 1, 3 y 5.</p>
<div>
<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">
</div>
<div id="informacion"></div>
</body>
</html>
No hay comentarios