Foros del Web - Ver Mensaje Individual - Colocar descripción a imágenes de un slider

DiegoEscobar · #3 (**permalink**) 31/01/2015, 17:13

Cita:

Iniciado por bathorz

A ver si esto te puede ayudar, o darte una idea.

Código HTML:

Ver original<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta charset="utf-8">
      <style type="text/css">
         .clase{display:inline-block ;border: solid 1px;}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         $(document).ready(function () {
            $('ul li img').on('mouseover', function (e) {
               var html = $(this).attr('title');
               var capa = $('<div/>', {
                  'class': 'clase',
                  'html': html
               });
               $('#test').html(capa);
            });
         });
      </script>
   </head>
   <body>
      <div id="content">
         <div id="slider">
            <ul class="bjqs">
               <li>
                  <img src="/slider/img/1.jpg" id="id1" alt="" title="Descripción<br /><a href='http://www.enlace.com/'>Enlace</a>" />
               </li>
               <li>
                  <img src="/slider/img/2.jpg" alt="" title="El aspecto de este texto se modifica con CSS en la clase bjqs-caption" />
               </li>
               <li>
                  <img src="/slider/img/3.jpg" alt="" title="Para eliminarlo, simplemente remover el tag title en la imagen" />
               </li>
            </ul>
         </div>
         <div id="test"></div>
      </div>
   </body></html>

Muchas gracias amigo, esto me soluciono el problema.