Curso JavaScript desde 0 JQuery XV. Eventos con JQuery II. Vídeo 43

En este vídeo seguimos viendo el manejo de eventos con la librería JQuery. Utilizamos una función muy útil de la librería: la función hover.

[angeldarco]

Por Si alguien quiere,
este código funciona para todas las imágenes:




<script
<script>
$(document).ready(function() {
$("#mensaje_img1").hide();
var
for(var i=0;i<imagenes.length;i++){
$(imagenes).hover(function(){
$("#mensaje_img1").show();
}, function(){
$("#mensaje_img1").hide();
});
}
});

</script>

[miguelangelvasquezgarcia]

Muchas gracias por estas explicaciones, muy directas y practicas.

[caravatergandia]

yo lo he hecho de esta forma, según la imagen por la que pases el ratón te mostrará su propia descripción, una diferente por cada imagen.

<script>
$(document).ready(function(){

$("#mensaje_img1").hide();
$("#mensaje_img2").hide();
$("#mensaje_img3").hide();
$("#mensaje_img4").hide();

$("#imagenes img").hover(mensaje_on, mensaje_off);


function mensaje_on(img){
if(img.target==imagen1){
$("#mensaje_img1").show();
} else if(img.target==imagen2){
$("#mensaje_img2").show();
} else if(img.target==imagen3){
$("#mensaje_img3").show();
} else if(img.target==imagen4){
$("#mensaje_img4").show();
}
}
function mensaje_off(img){
if(img.target==imagen1){
$("#mensaje_img1").hide();
} else if(img.target==imagen2){
$("#mensaje_img2").hide();
} else if(img.target==imagen3){
$("#mensaje_img3").hide();
} else if(img.target==imagen4){
$("#mensaje_img4").hide();
}
}

});


</script>

[stodani]

Al fin me salió hacerlo con un texto distinto para cada imagen, me costo asi que escribo cual era mi error por si le sirve a alguien:

lo hice tal cual muestra en el video y lo repetia para cada imagen, pero tenia que cambiar el nombre de las funcions (mensaje_on y mensaje_off) para que cada imagen tuviera una diferente.
Osea que me quedaban "mensaje_on1", "mensaje_on2", etc

ya que el codigo se lee de arriba para abajo y al no cambiarlo, cuando lo volvia a llamar llamaba al texto de la imagen anterior y me quedaban todos con el mismo texto.

Cuando los elementos no se acomodan yo le aplico un boostrap y a continuar con el curso . Es cierto CSS aquí es lo de menos

[MarcosMartinez-frhb]

Buenas; La función Toggle a día de hoy ha sido sustituida en las nuevas versiones de jQuery, por si os da problemas, no os volváis locos. Saludos

[JaimieVega]

No me cansare de darte las gracias por tan magnificos videos, tengo una duda respecto a las imagenes como ya hoy dia todo es responsive, las imagenes tienen que tener una medida, por ejemplo las que estas usando en el video tutorial?..gracias

[MiguelReyesDeveloper]

Si a las etiquetas img les agregan a todas una clase que se llame igual, por ejemplo class="foto" y en el código JS usan $(".foto") eso mostrará el mismo mensaje para todas las fotos, es una manera de resolver el problema pero claro, si quieres mostrar un mensaje diferente la cosa cambiará.

[juanitoelchispa]

Has comentado lo de ahorrar código o escribir menos código, realmente da lo mismo siempre y cuando funcione ¿no? O tiene alguna importancia por aquello de los estándares, y buenas prácticas y demás.
Te comento esto porque tengo una pequeña obsesión con este tema de la validación de las páginas y demás, y cuando me pongo por mi cuenta a prácticar y escribir código me creo que lo estoy haciendo mal por escribir mucho código. Andaba ya detrás de comentártelo y al decirlo tu ahora otra vez he aprovechado.
Un saludo Juan

[chuchotech]

saludos profesor, disculpe que esta pregunta esta un poco fuera del tema pero desabilite el header css img para que las images no tuviean espacio entre ellas y ahora quisiera saber como puede distribuir el tamano de las imagenes a lo ancho de la pagina web? Para ser mas especifico, quisiera que la imagen uno comenzara en el border izquierdo de la pagina y la imagen 4 terminara en el extremo derecho de la pagina, asi mismo que las imagenes adaptaran su tamano segun la configuracion dell monitor o si a pantalla se minimiza .

[nanoaps]

Hola buenas noches, tengo una duda, evitar escribir $("#imagen1").hover(mensaje_on, mensaje_off);  para cada imagen las guarde en una variable, pero al leerlas en un bucle for la funcion hover no funciona.
Este es el codigo:

            $(document).ready(function(){

                $("#mensaje_img").hide();
               
                var imagenes = img");

                for(var x = 0; x < imagenes.length ; x ++){
                    imagenes[x].hover(mensaje_on, mensaje_off);

                 /*  imagenes[x].onmouseover = mensaje_on;
                    imagenes[x].onmouseout = mensaje_off;*/

                }

            });

            function mensaje_on(){
                $("#mensaje_img").show();

            }

            function mensaje_off(){
                $("#mensaje_img").hide();
            }

Lo resolvi cambiando imagenes[x].hover por las lineas que tengo comentado abajo y funciono perfecto. ¿hover no puede usarse en un bucle o array?

[diegoluj]

son magnificos tus videos muchas gracias !

el enlace no funciona correctamente amigo

[jaimemartin]

Yo tengo este código. Muestra un mensaje diferente para cada imagen también.

$(document).ready(function() {

//oculta el cuadro de mensajes
$("#mensaje_img1").hide();

$("img").hover(mensaje_on, mensaje_off);
});

function mensaje_on(e) {

if(e.target == imagen1) {

id='mensaje_img1'>Precioso mosaico de colorines el que estamos
}else if(e.target == imagen2) {

id='mensaje_img1'>Esto es una imagen 3D de
}else if(e.target == imagen3) {

id='mensaje_img1'>El dron volando por las frias montañas a gran
}else if(e.target == imagen4) {

id='mensaje_img1'>No sabemos que es exactamente, parece de
}

//muestra el cuadro de mensajes
$("#mensaje_img1").show();
}

function mensaje_off(e) {

$("#mensaje_img1").hide();
}