- Aparecer e invisibilizar(acciones)
- Cambiar aspecto con css
- Menu con cambio a B/N.)
- Menú con cambio opacidad
- Animaciones de propiedades
- Ventana seudomodal autocenter
- Rotulos dentro de los input
- Galeria slider con N fotos
- Menú desplegable horizontal
- Menú con ventana transparente
- Contador regresivo de tiempo
- Reloj formato digital
- Pasa imagen repartido brusco
- Pasa imagen repartido fade
- Pasa img fade(clásico)
- Alerta antes de enviar form
- Validar pre enviar form/AJAX
- Calendario ui en input
- Ejecutar formulario bloqueando
- Tildar todos los checkbox-list
- Leer los checkbox-list tildados
- Seleccionar palabra y rae.es
- Deshabilitar/detectar tecla
- Recuperar datos de input, etiquetas y listas
- Resaltar palabra
- Funciones de usuario
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 la L4 le atribuye a src me- + el nombre anterior.
this.src.lastIndexOf("/") nos da la posición del último / o sea el comienzo del nombre de la imagen
Luego la L4 le atribuye a src me- + el nombre anterior.
.fotomenu{
text-align:center;
margin-right:11px;
float:left;
width:120px;
height:120px;
border:#996600 solid 2px;
}
.fotomenu a{
text-decoration:none;
color:#666;
}
</style>
<script type="text/javascript" src="../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
01 $(document).ready(function(){
02 $(".foto").mouseover(function(cambiar){
03 var pos = this.src.lastIndexOf("/")
04 $(this).attr("src","img-menu/me-" + this.src.substr( pos + 1 ));
05 });
06 $(".foto").mouseout(function(cambiar){
07 var pos = this.src.lastIndexOf("/")
08 $(this).attr("src","img-menu/" + this.src.substr( pos + 4 ));
09 });
10 });
</script>
<body>
div class="fotomenu">
<a href="#"><div><img class="foto" src="img-menu/menu-carteras.jpg" width="120" height="106" border="0" /></div>
<div >TITULO 1</div></a>
</div>
<div class="fotomenu">
<a href="#"><div><img class="foto" src="img-menu/menu-prendas.jpg" width="120" height="106" border="0" /></div>
<div >TITULO 2</div></a>
</div>
</body>
text-align:center;
margin-right:11px;
float:left;
width:120px;
height:120px;
border:#996600 solid 2px;
}
.fotomenu a{
text-decoration:none;
color:#666;
}
</style>
<script type="text/javascript" src="../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
01 $(document).ready(function(){
02 $(".foto").mouseover(function(cambiar){
03 var pos = this.src.lastIndexOf("/")
04 $(this).attr("src","img-menu/me-" + this.src.substr( pos + 1 ));
05 });
06 $(".foto").mouseout(function(cambiar){
07 var pos = this.src.lastIndexOf("/")
08 $(this).attr("src","img-menu/" + this.src.substr( pos + 4 ));
09 });
10 });
</script>
<body>
div class="fotomenu">
<a href="#"><div><img class="foto" src="img-menu/menu-carteras.jpg" width="120" height="106" border="0" /></div>
<div >TITULO 1</div></a>
</div>
<div class="fotomenu">
<a href="#"><div><img class="foto" src="img-menu/menu-prendas.jpg" width="120" height="106" border="0" /></div>
<div >TITULO 2</div></a>
</div>
</body>
copyright 2014