Foros del Web » Programando para Internet » Jquery »

Como agregar una descripcion a una imagen con jQuery

Estas en el tema de Como agregar una descripcion a una imagen con jQuery en el foro de Jquery en Foros del Web. Hola buenas estoy en un dilema pues veran que quiero agregar una descripcion a una imagen de lo que venga en el title de la ...
  #1 (permalink)  
Antiguo 03/11/2012, 17:45
 
Fecha de Ingreso: marzo-2012
Mensajes: 20
Antigüedad: 11 años, 11 meses
Puntos: 1
Como agregar una descripcion a una imagen con jQuery

Hola buenas estoy en un dilema pues veran que quiero agregar una descripcion a una imagen de lo que venga en el title de la imagen al hacer hover.

Ejemplo:

Código HTML:
Ver original
  1. <div class="wrapper">
  2.         <img src="image/capture.jpg" alt="Alt aqui" title="Esta es la descripcion que se debe mostrar en la imagen">
  3.         <!-- Es decir que cuando se pase el mouse sobre la imagen esta debe mostrar en un Caption el title -->
  4.     </div>

Tengo la idea de masomenos como hacerlo en jQuery pero todavia no doy en el blanco.

Puedo capturar el title con .attr("title") pero para crear el elemento y agregarlo en en un efecto no tengo la minima idea.

lo que pude hacer es capturar como ya dije el title y crear un nuevo div con clase caption a la cual le agrego entre parrafos "<p>" el contenido del title y cuando pase sobre la imagen se muestre y cuando me quite sobre la imagen se elimine pero no logro ajustar el caption a la imagen y sobre de ella.... :(

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.                 var titleImg = $('img').attr('title');
  3.                 $('img').hover(
  4.                 function(){
  5.                     $('.wrapper').append('<div class="caption"></div>');
  6.                     $('.caption').append("<p>" + titleImg + "</p>" );
  7.                 },
  8.                 function(){
  9.                     $('.caption').remove();
  10.                 });
  11. });


Alguna de manera de hacer esto sin plugins??
  #2 (permalink)  
Antiguo 03/11/2012, 19:51
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 8 meses
Puntos: 1567
Respuesta: Como agregar una descripcion a una imagen con jQuery

Hay muchas variantes, más que nada se parece a que quisieras hacer un tooltip.
Y no me queda muy claro que solo sea simplemente para repetir el título

Podés hacer esto
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. .wrapper{
  10. text-align: center;
  11. }
  12. .wrapper div{
  13. height: 18px;
  14. padding: 0 0 5px 0;
  15. }
  16. /*]]>*/
  17. </head>
  18. <div class="wrapper">
  19. <div id="uno"><!-- desc --></div>
  20. <img src="capture.jpg" alt="Alt aqui" title="Esta es la descripcion que se debe mostrar en la imagen" width="200" height="200"
  21. onmouseover="document.getElementById('uno').innerHTML=this.title" class="uno" onmouseout="document.getElementById('uno').innerHTML='';"/>
  22. <!-- Es decir que cuando se pase el mouse sobre la imagen esta debe mostrar en un Caption el title -->
  23. </div>
  24. </body>
  25. </html>

Pero repito, hay muchas variantes
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 03/11/2012, 20:08
 
Fecha de Ingreso: marzo-2012
Mensajes: 20
Antigüedad: 11 años, 11 meses
Puntos: 1
Respuesta: Como agregar una descripcion a una imagen con jQuery

Cita:
Iniciado por emprear Ver Mensaje
Hay muchas variantes, más que nada se parece a que quisieras hacer un tooltip.
Y no me queda muy claro que solo sea simplemente para repetir el título

Podés hacer esto
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. .wrapper{
  10. text-align: center;
  11. }
  12. .wrapper div{
  13. height: 18px;
  14. padding: 0 0 5px 0;
  15. }
  16. /*]]>*/
  17. </head>
  18. <div class="wrapper">
  19. <div id="uno"><!-- desc --></div>
  20. <img src="capture.jpg" alt="Alt aqui" title="Esta es la descripcion que se debe mostrar en la imagen" width="200" height="200"
  21. onmouseover="document.getElementById('uno').innerHTML=this.title" class="uno" onmouseout="document.getElementById('uno').innerHTML='';"/>
  22. <!-- Es decir que cuando se pase el mouse sobre la imagen esta debe mostrar en un Caption el title -->
  23. </div>
  24. </body>
  25. </html>

Pero repito, hay muchas variantes





Gracias por responder, y quizas no me explique bien. Bueno por si las dudas ya tenia echo el diseño en Photoshop es este esta es la idea.

http://k39.kn3.net/B1B5D3B55.jpg

Última edición por DiifoOtz; 03/11/2012 a las 20:40
  #4 (permalink)  
Antiguo 03/11/2012, 21:05
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 8 meses
Puntos: 1567
Respuesta: Como agregar una descripcion a una imagen con jQuery

Cita:
Iniciado por DiifoOtz Ver Mensaje





Gracias por responder, y quizas no me explique bien. Bueno por si las dudas ya tenia echo el diseño en Photoshop es este esta es la idea.

http://k39.kn3.net/B1B5D3B55.jpg
Si, muy bien no se entiende, si decís
Cita:
Alguna de manera de hacer esto sin plugins??
supongo que te referís a no usar jQuery
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: caption, htmlycss, imagenes, javascript, mouseout, mouseover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:16.