¿Cómo mostrar el texto del título de la imagen al pasar el mouse?

2 minutos de lectura

Estoy construyendo un sitio web básico de WordPress. Esta es la página de demostración con la que necesito ayuda:

http://irontemplates.com/wp-themes/ironband/photos/

Cuando se pasa el mouse sobre la imagen, quiero que muestre el título de la imagen antes de que diga “Ver imagen”.

¿Esto es javascript o jQuery, supongo? ¿Alguien puede darme un código de muestra de cómo haría esto?

  • ¡Muéstranos lo que has probado primero! 🙂

    – adamjc

    15/10/2013 a las 16:26

  • ¿No es lo que title atributo está haciendo?

    – Frederik.L

    15/10/2013 a las 16:26


  • title="<?php the_title(); ?>" agrega esto en tu etiqueta img

    – Príncipe Singh

    15/10/2013 a las 16:27

  • No he probado nada porque no tengo ni idea de qué hacer. Los títulos de estas imágenes son como “imagen_1” “imagen_2”, así que no estoy seguro si ese es el caso.

    -George McKenzie

    15/10/2013 a las 16:30

  • luego deberá ingresar y cambiar el título de las imágenes dentro de la biblioteca de medios 🙂

    – danio

    15/10/2013 a las 16:30

los View-Image es un nuevo enlace a la imagen real, o la imagen de tamaño completo. Que puede tener el título de la imagen Así:

<a href="#" title="title to show">
  <img src="source/to/file.ng" alt="photo" />
</a>

De esta forma, mostrarás el título de la imagen en el enlace.

<a href="http://irontemplates.com/wp-themes/ironband/content/uploads/2013/08/photo_2112.jpg" rel="lightbox" class="lightbox hoverZoomLink">
    <img src="http://irontemplates.com/wp-themes/ironband/content/uploads/2013/08/photo_2112-300x230.jpg" width="352" height="347" alt="">
        <span class="hover-text"><span>VIEW IMAGE</span></span>
    </a>

Esto se encuentra dentro de un elemento de lista que existe dentro de una lista desordenada que contiene todas las imágenes de esa página.

Debe cambiar lo que hay entre las etiquetas de intervalo más internas. En este caso dice “VER IMAGEN”, cámbialo a “Imagen 1” o lo que quieras.

Puede usar Javascript para nombrarlos dinámicamente, ¡pero esa no era exactamente su pregunta!

avatar de usuario
el_boogy

Puedes hacer eso con JS:

var ls_input_section_header = document.createElement("img");   
ls_input_section_header.title="info to display on hover of info";
ls_input_section_header.className="ls_input_section_header_gs";
ls_input_section_header.setAttribute("src","style/img/info.gif");
ls_input_section.appendChild(ls_input_section_header);   

O puedes usar solo CSS

.ls_input_section_header_gs
{   
 position: absolute;
    top: 15px;    
}
    .ls_input_section_header_gs a:hover:after {
  content: attr(title);
}

avatar de usuario
Pablo Rohit

var title= $("#imageid").attr("title");

Luego, al pasar el mouse:

$("#imageid").on("hover",function(){
    alert(title);
});

Prueba esto.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad