SummArg | Cursos y recursos para webmasters

10/01/2011

Hacer una visita guiada en un website usando jQuery

La idea de este script es realizar una visita guiada explicando funcionalidades de un website utilizando tooltips en los lugares adecuados. Un recuadro nos irá guiando por los pasos del tour, permitiendonos avanzar, retroceder, reiniciar o finalizar los pasos de un tour, a la par que los tooltips aparecen en ubicaciones a indicar con las instrucciones de uso. Mientras el tour esté en curso, oscureceremos el sitio web levemente para lograr centrar la atención en los elementos de la visita guiada.

Demo del tour | Descarga

Como pueden ver en el ejemplo, cada paso está detallado en el HTML de la siguiente manera:

<div> <h2>Create a tour</h2> <p>Far far away, behind the word mountains, ...</p> </div>

Esto imprime meramente una sección de texto pero con la salvedad de que en la clase del <h2> ya estamos indicando el número de paso en nuestro tour que mas adelante llenaremos de texto y otras instrucciones.

Antes de la etiqueta de cierre abrimos nuestro objeto:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { var config = [ { "name" : "tour_1", "bgcolor" : "black", "color" : "white", "position" : "TL", "text" : "You can create a tour to explain the functioning of your app", "time" : 5000 },

En esta instancia tenemos el paso del tour (name), color de fondo (bgcolor), color del texto (color), posición del tooltip en relación al objeto  (position), texto (text) y tiempo a mostrar el paso en caso de que hayamos activado el autoplay (time) .

La variable position admite los siquientes valores:

  • TL: top left
  • TR: top right
  • BL: bottom left
  • BR: bottom right
  • LT: left top
  • LB: left bottom
  • RT: right top
  • RB: right bottom
  • T: top
  • R: right
  • B: bottom
  • L: left

Esperamos les sea de utilidad

Dejar un comentario