Tema: Colocar descripción a imágenes de un slider
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 31/01/2015, 03:22
bathorz
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 10 años, 8 meses
Puntos: 29
Respuesta: Colocar descripción a imágenes de un slider
A ver si esto te puede ayudar, o darte una idea.
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title></title>
  5.       <meta charset="utf-8">
  6.       <style type="text/css">
  7.          .clase{display:inline-block ;border: solid 1px;}
  8.       </style>
  9.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
  10.       <script type="text/javascript">
  11.          $(document).ready(function () {
  12.             $('ul li img').on('mouseover', function (e) {
  13.                var html = $(this).attr('title');
  14.                var capa = $('<div/>', {
  15.                   'class': 'clase',
  16.                   'html': html
  17.                });
  18.                $('#test').html(capa);
  19.             });
  20.          });
  21.       </script>
  22.    </head>
  23.    <body>
  24.       <div id="content">
  25.          <div id="slider">
  26.             <ul class="bjqs">
  27.                <li>
  28.                   <img src="/slider/img/1.jpg" id="id1" alt="" title="Descripción<br /><a href='http://www.enlace.com/'>Enlace</a>" />
  29.                </li>
  30.                <li>
  31.                   <img src="/slider/img/2.jpg" alt="" title="El aspecto de este texto se modifica con CSS en la clase bjqs-caption" />
  32.                </li>
  33.                <li>
  34.                   <img src="/slider/img/3.jpg" alt="" title="Para eliminarlo, simplemente remover el tag title en la imagen" />
  35.                </li>
  36.             </ul>
  37.          </div>
  38.          <div id="test"></div>
  39.       </div>
  40.    </body></html>