CAMBIAR IMAGEN EN MENÚ (O SERIE DE FOTOS)
Mediante jquery podemos cambiar la imagen por ej. a una en B/N.
para usar una sola funcion jquery la foto que cambia le agregamos
(en este caso "me-" por eso la pos va a 1+3), pero vale cualquier prefijo a la imagen
( entonces pos es 1+Nº de letras del prefijo) el resto es fácil,
this.src.lastIndexOf("/") nos da la posición del último / o
sea el comienzo del nombre de la imagen
Luego $(this).attr("src", .... le atribuye a src me- + el nombre
anterior.
<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(){
$(".foto").mouseover(function(cambiar){
var pos = this.src.lastIndexOf("/");
$(this).attr("src","img-menu/me-" + this.src.substr( pos + 1 ));
});
$(".foto").mouseout(function(cambiar){
var pos = this.src.lastIndexOf("/");
$(this).attr("src","img-menu/" + this.src.substr( pos + 4 ));
});
});
</script>
</head>
<body>
<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-prototipo01.jpg" width="120" height="106"/>
</div>
<div >
IMAGEN 1
</div>
</a>
</div>
Y así el número necesario de imágenes.