Añadir etiqueta nueva – Ideas Fugaces

HTML

<div id="menu"> <ul> <li><a href="#" class="nudge">home</a></li> <li><a href="#" class="nudge">acerca de nosotros </a></li> <li><a href="#" class="nudge">servicios</a></li> <li><a href="#" class="nudge">productos</a></li> <li><a href="#" class="nudge">contacta con nosotros</a></li> </ul> </div>

Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetaré en inglés porque es una palabra muy específica que significa –dar suavemente con el codo-, y no está de más agregarla a nuestro vocabulario técnico.

JQuery

Localizamos el elemento al que se la ha aplicado la regla de estilo «nudge». La clase .hover permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando «entra» y otro cuando «sale». En ambos estados se aplica .animate, a la que se le pasa como primer parámetro la regla» padding» y como segundo el tiempo en milisegundos que esta animación debe durar.

CSS

#menu_nudging{ width:235px; background-color: #fff; } #menu_nudging ul{ list-style:none; } #menu_nudging li{ list-style:none; margin:1px 0; } #menu_nudging li a{ list-style:none; background: url(../imagenes/efecto_nudging/fdo_normal.gif) no-repeat; color:#fff; text-transform:uppercase; font-size:14px; text-decoration:none; display:block; height:30px; line-height:30px; padding:0 0 0 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #menu_nudging li a:hover{ background: url(../imagenes/efecto_nudging/fdo_sobre.gif) no-repeat; color:#fff; text-decoration:none; }

Cuando sitúe el puntero del ratón sobre , aparecerá un pequeño texto de información. Al mover el puntero, la caja de texto se moverá también mientras nos encontremos dentro de los límites del enlace, y desaparecerá cuando nos alejemos. Para conseguir este resultado necesitamos:

Problemas y Soluciones

A continuación relaciono los problemas con los que me encontré llevando a la práctica los ejemplos de este artículo y la forma en que pude solucionarlos. Me parece una buena idea incluir este apartado, pues la mayoría de las veces cometemos errores que suelen ser comunes y a pesar de ser pequeños generan auténticos dolores de cabeza.

ENLACES RELACIONADOS

En cssglobe puedes ver el artículo original en inglés y descargar los archivos de ejemplo. Espero que hayas disfrutado y que este artículo haya resultado de utilidad.

Mostrar / Ocultar el Código

Estilos CSS

Nota. En el ejemplo original están incluídos en el propio archivo html. Los que incluyo tienen algunas modificaciones necesarias para wordpress.

/* ESTILOS PARA TOOLTIP

Ejemplo 1 */

#emergente1 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente1 a{
text-decoration:none;
color:#f30;
}

#emergente1 a:hover {
background-color: transparent;
}

#emergente1 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente1 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#tooltip{
position:absolute;
border:1px solid #CCCCCC;
padding:2px 5px;
color:#FFFFFF;
display:none;
background-color: #2d83d5;
font-weight: bold;
}

#emergente a:hover {
background-color: transparent;
}

/* Ejemplo 2 */

#emergente2 {
display:block;
overflow:hidden;
}

#emergente2 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente2 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente2 a{
text-decoration:none;
color:#f30;
}

#emergente2 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente2 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente2 img {
border: 1px solid #CCCCCC;
margin-bottom:7px;
}

#emergente2 ul,li{
margin:0!important;
padding:0;
}

#emergente2 li{
list-style:none;
float:left;
display:inline;
margin-right:0px;
}

#preview{
position:absolute;
border:1px solid #ccc;
padding:5px;
display:none;
color:#666666;
background-color: #fff;
text-align: center;
line-height: 2em;
}

#emergente2 a:hover {
background-color: transparent;
}

/* Ejemplo 3 */

#emergente3 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente3 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente3 a{
text-decoration:none;
color:#f30;
}

#emergente3 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente3 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente3 img{border:none;}

#emergente3 ul,li{
margin:0;
padding:0;
}

#emergente3 li {
list-style:none;
float:left;
display:inline;
margin-right:10px;
}

#screenshot {
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
line-height:2em;
text-align:center;
}

#emergente3 a:hover {
background-color: transparent;
}

Arvhivo JavaScript

tooltips.js

/*
* Tooltip script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.tooltip = function(){
/* CONFIG */
xOffset = -18;
yOffset = 0;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(«a.tooltip»).hover(function(e){
this.t = this.title;
this.title = «»;
$(«body»).append(«<p id=’tooltip’>»+ this.t +»</p>»);
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#tooltip»).remove();
});
$(«a.tooltip»).mousemove(function(e){
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
tooltip();
});

/*
* Image preview script
*/

this.imagePreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG NOTAS:
hover es un gestor de evento para cuando se pasa el ratón sobre un objeto
hover( over, out )
*/
$(«a.preview»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’preview’><img src='»+ this.href +»‘ alt=’Image preview’ />»+ c +»</p>»);
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#preview»).remove();
});
$(«a.preview»).mousemove(function(e){
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
imagePreview();
});

/*
* Url preview script
*/

this.screenshotPreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$(«a.screenshot»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’screenshot’><img src='»+ this.rel +»‘ alt=’url preview’ />»+ c +»</p>»);
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#screenshot»).remove();
});
$(«a.screenshot»).mousemove(function(e){
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});

Ejemplo 1

Paso 1: hacer una lista desordenada con los elementos del menú

Paso 2: definimos los estilos CSS a la lista de menú

Paso 3: aplicamos una función que permitirá los cambios de estilo

Ver Código (+/-)

HTML

JQuery

CSS

Ej. 1 : Tooltip de Texto

Ej. 2: Tooltip con Imágenes

Galería (sin Leyenda)

Galería (con Leyenda)

Ejemplo 3: Tooltip con Imágenes y texto

Problemas y Soluciones

ENLACES RELACIONADOS

Mostrar / Ocultar el Código

Estilos CSS

Arvhivo JavaScript