CAMBIAR OPACIDAD EN SERIE DE OBJETOS (MENU CON CLICK)
Podemos crear un menú que quede opaco al click, desopacando al cliquear otra imagen.
Cada imagen del menú tiene una clase única "foto" esta sirve de blanco al click,
que desopaca todas (mediante la primera linea de código) y luego con el parámetro this
opaca solo ella (según el valor global en op).
<head>
<style type="text/css">
.fotomenu{
text-align:center;
margin-right: 11px;
margin-bottom: 11px;
float:left;
width:120px;
height:120px;
border:#996600 solid 2px;
}
.fotomenu a{
text-decoration:none;
color:#666;
}
</style>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
var op=0.4;
$(".foto").click(function(cambiar){
$(".foto").css("opacity",1);
$(this).css("opacity",op);
});
});
</script>
</head>
<body>
<div class="cenefa" style="border:none;"> <!-- inicio cenefa -->
<div style="float:left; margin-left:40px;">
<img src="../imagenes/logo_cenefa.png" width="139" height="75" alt="Iqsystems-home" >
</div>
</div> <!-- fin cenefa -->
<div class="cierre"></div>
<div style="margin: 0 auto; text-align:center">
<div style=" padding-left:5px;">
<div>
PARA CAMBIAR LA OPACIDAD HACER CLICK SOBRE LA IMAGEN
</div>
<div style="margin-top:10px; margin-bottom:10px;">
<div class="fotomenu">
<a href="#">
<div>
<img class="foto" src="img-menu/tec-java-cambioimagen-prototipo01.jpg" width="120" height="106"/>
</div>
<div >
IMAGEN 1
</div>
</a>
</div>
<div class="fotomenu">
<a href="#">
<div>
<img class="foto" src="img-menu/tec-java-cambioimagen-prototipo02.jpg" width="120" height="106" />
</div>
<div >
IMAGEN 2
</div>
</a>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>