JMiur [E]

Este script llamado dock nos permite crear un menú con imágenes y un efecto de animación simple.

Debemos agregar el código antes de </head> como hacemos habitualmente y luego, el CSS:


<script type='text/javascript'>
//<![CDATA[
// ================================================================
// ------ dock menu -------
// script by Gerard Ferrandez - Ge-1-doot - February 2006
// http://www.dhteumeuleu.com
// ================================================================
var dock = function (dock, sMin, sMax) {
/* ---- private vars ---- */
var xm = xmb = ov = 0;
var M = true;
var icons = document.getElementById(dock).getElementsByTagName('img');
var N = icons.length;
var s = sMin;
var ovk = 0;
var addEvent = function (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
var pxLeft = function(o) {
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
}
for(var i=0;i<N;i++) {
var o = icons[i];
o.style.width = sMin+"px";
o.style.height = sMin+"px";
o.className = "dockicon";
}
var run = function() {
for(var i=0;i<N;i++) {
var o = icons[i];
var W = parseInt(o.style.width);
if(ov && ov.className=="dockicon") {
if(ov!=ovk){
ovk=ov;
document.getElementById("legend").innerHTML = ov.lang;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+.5);
} else {
s = Math.max(s-.5,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+"px";
o.style.height = W+"px";
}
if(s >= sMax) M = false;
}
addEvent(document, 'mousemove', function (e) {
if(window.event) e=window.event;
xm = (e.x || e.clientX);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
});
setInterval(run, 16);
};

window.onload = function() {
dock("dock", 48, 128);
}
//]]>
</script>

<style type='text/css'>
#dock { /* el rectángulo contenedor */
position: relative;
text-align: center;
width: 100%;
}
#dock a, #dock a:visited { text-decoration: none; }
#dock img { border: none; width: 0px; }
#legend { /* el texto inferior */
color: #FFF;
font-size: 24px;
text-align: center;
width: 100%;
}
</style>
En el script, el único dato importante a definir son los tamaños de las imágenes; en este caso 48 y 128 que corresponden al estado mínimo inicial y al máximo que se muestra al expandirse.




El HTML lo ubicamos donde nos guste:
<div id="dock">
<a href="URL_enlace1" target="_blank"><img src="URL_imagen1" lang="el texto 1"></a>
<a href="URL_enlace2" target="_blank"><img src="URL_imagen2" lang="el texto 2"></a>
<a href="URL_enlace3" target="_blank"><img src="URL_imagen3" lang="el texto 3"></a>
</div>
<div id="legend"></div>
En resumen, son enlaces simples donde el atributo lang de la etiqueta IMG contiene el texto a mostrar en la parte inferior.

60 comentarios:

Garabato  

Oh, mi vida es un erial, flor que toco se deshoja….

Hasta la fecha, cada uno de los menús parecidos a este terminó en rotundo fracaso… y hasta hoy, me he venido aguantando las ganas de pedirte que me ayudes. Pruebo una vez más y si no me sale ¡¡mandaré una carta documento al mismísimo Universo!!!

24 horas… ;)

Responder
Vku  

yo hace tiempo lo tengo en mi blog y lo unico que encontre de malo es que al achicar las imágenes en lugar de 48, 128 y poner 24. 48 ejemplo en internet explorer 7 no funciona muy bien (que raro).
y le pondo un texto para que aparesca desde un principio en el div legend.
<div id="legend">TEXTO 0 A MOSTRAR</div> el cual cambia por texto 1, 2, 3 o el que se pase el cursor

Responder
El Chueco  

Crees que se pueda poner en vertical.
Saludos:)

Responder
MundoActualizado  

voy a probarlo a ver que tal ya que mi plantilla no quiere agarrar ningun menu

Responder
SpamLoco  

Muy buena, dan ganas de usarla :D

Responder
Oloman  

Precisamente ayer, lo vi en un sitio y hoy iba a investigar. Me has ahorrado el trabajo :D

Responder
Graciela  

Bonitillo Bonitillo, he jugado un rato con las imagenes :)

Responder
La hormiguita  

Que bonito!!!!
No se donde ponerlo pero ya voy a encontrar un lugar...
eternamente agradecida....jajajaja
De paso le comento algo... que no se en que entrada ponerlo, quise hacer un correo en gmail, y no pude , han puesto que para verificar la cuenta hay que poner el celular y google te manda un sms, bueno imposible... llame a Movistar para preguntar como tenía que poner el número ,con código de país? de area? con 15 sin 15? Y el muchacho que me respondió, me dijo no es problema de movistar, y le comentó en forma privada, yo intente hacerlo y no pude de ninguna. chin pum!!!!!

Responder
Anahí  

Ahhhhh, está genial! Pero esos dibujitos no son serios... :)

Responder
Ariane  

adoro estes menus com o qual podemos 'brincar' :) gostei muito de um outro que vi hoje: http://css-tricks.com/examples/GarageDoorMenu/ adorei o efeito.

abraços!

Responder
JMiur  

Garabato: Un poco dramático lo suyo pero se entiende :D

El Chueco: Para eso habría que rehacer el script.

SpamLoco: Use, nomás :D

Oloman: Cuañquier cosa, haz de cuenta que no lo has visto :D

La hormiguita: ¿Cómo es eso de verificar la cuenta de GMail? Mucho cuidado, explícame un poco más porque eso no parece ser real.

Anahí: Es que yo no soy serio :D

Ariane: Veamos de que se trata ese otro :D

Responder
Oliver  

Muy bonito menu señor JMiur, sobre todo por el efecto que tiene...hasta me dan ganas de probarlo...:D Saludos!

Responder
egoloco  

JMiur cambiaste el menú? estás remodelando tu casa? El ejemplo que puso Ariane me gustó... en esa página hay un ejemplo de un gadget de twitter muy interesante también... con JQuery :-|

Responder
5T4L1  

esta padre este dock... a los que no les funciona... seguramente este script no es sociable con otros scripts que tienen en sus paginas.. a mi me pasa... ningun script de dock quierefuncionar en mi pagina... ni modos... me quedare sin dock... saludos a todos... JMiur.. excelente pagina... gracias por proveer tanta informacion pa los newbloggers

Responder
Whisper  

¿Se podría utilizar en una entrada?

Responder
JMiur  

Este ejempl oestá en una entrada así que sí, es posible.

Responder
Whisper  

@JMiur: Muy evidente no jajaja, gracias por la respuesta..., lo ocuparé en algunos menús ;).

Responder
JMiur  

:D

Para usarlo en una entrada, lo lógico sería alojar el archivo del script en un servidor externo. Puede estar en la plantilla pero se cargará siempre ... no hara daño pero será un desperdicio de espacio.

El resto, es igual.

Responder
Whisper  

@JMiur:

Quisé probar el menú en un blog, pero no me resulto..., situe el script y el css antes de "head" y después de "]]>".

Ahora, no se si será error del scrpit o que debo alojarlo en un servidor externo, pero no carga :(.

Lo pusé en esta entrada:
http://pruebaevtod.blogspot.com/2010/04/prueba-galeria-lightbox.html

Ah!, el div que aparece vació "legend" para que sirve?.

Saludos!.

Responder
JMiur  

No, en la plantilla puede ser colocado perfectamente pero, el script debe ser agregado usando CDATA:

<script type='text/javascript'>
//<![CDATA[
......... aqui el script

//]]>
</script>

El DIV legend es el rectángulo inferior donde se muestran los textos.

Digo todo esto en el aire porque no puedo ver el ejemploe, seguramente, tu blog de pruebas es privado. Hazlo público temporalmente y me fijo.

Responder
Whisper  

el CDATA se descomenta?..., por que lo pusé tal cual como aparece en la entrada, pero sigue sin aparecer.

Ahora si debes poder ver la entrada ;)
http://pruebaevtod.blogspot.com/2010/04/prueba-galeria-lightbox.html

Responder
JMiur  

Al parecer hay un error en la transcripción del sript. Para no hacer lio y que sea más simple, lo he colocado en un archivo de texto para que descargues y puedas copiar y reemplazar lo que tienes. este es el enlace

Tal como está ahora está ok, sólo tienes qe reemplazar el contenido.

Responder
La hormiguita  

Hola, bueno el tema es que antes para verificar estaban las letras o letras y números, ahora en vez de eso te dice que pongas tu celular y que va ser con mensajes de texto, para ver si sos una persona real. El tema es que no admite, el celular de Argentina.
:)
Tardé porque me olvidé de suscribirme a este post.:(

Responder
TitoDolores  

.. NO ntnder xq no me sale! .¬¬..xq??.. me sale vacio
:(

Responder
JMiur  

Si es el que está debajo del header de tu blog, lo veo normalmente.

Responder
Horacio  

Waw! Muy weno! Ya lo puse en mi blog con exito. Te quería preguntar, hay forma de cambiar la letra: a mí me aparece en Times New Roman, preferiría algo más como Arial. Después el resto, sin problemas!

Responder
JMiur  

Sí; no debería haber problemas, busca esta parte y agrega el tipo de fuente a usar, por ejemplo:

#legend { /* el texto inferior */
.......
font-family: Arial;
}

Responder
Rainner  

hola mi pregunta es , como se puede hacer para que se alineen en la parte superior y no inferior , es que quiero poner arriba mismo y que se desplac hacia abajo

Responder
JMiur  

Podrías probar con CSS, colocando esto y ver si funciona:

#dock img {
vertical-align:top;
}

Responder
JUVENTUDES MIRA PASTO  

Hola Jmiur....por favor ayudame
quiero insertar el menu, pero quisiera saber si es posible que los iconos tengan una base fija, y al agrandarse no se muevan todos hacia abajo, si me hago entender?.....mira a lo que me refiero

"http://safalra.com/web-design/javascript/mac-style-dock/demonstration.html"

Quisiera que fuera así, ME PODRIAS AYUDAR??....

Responder
JUVENTUDES MIRA PASTO  

Potro una preguntica....como hago para que el texto salga arriba de cada icono y no abajo y centrado??? y otra pregunta...como hago para que al poner muchos iconos no se agrande el 1 y el icono 10; el 2 y el icono 11;
y asi susesivamente, TENGO 17 iconos, pero me pasa ese problema, que se me agranda el icono que señalo y otro de mas lejos....

Responder
JMiur  

PAra cambair el texto de posición debes mover el DIV legend. El resto no sé que responderte.

Responder
Sweet Muse  

Hola Jmiur, me encanta tu blog, me fue de mucha utilidad ya que muy recientemente me acabo de crear uno.Y el menu me ha quedado muy bueno. Quería preguntarte de como creaste la BIOGRAFIA APÓCRIFA en la parte superior derecha. Me gusto el efecto de despliegue. Desde ya gracias...

Responder
JMiur  

Hay muchas formas de expandir y contraer elementos. Fíjate en esta entrada y en esta otra.

Responder
Claudia  

Hola, muchas gracias por tu ejemplo, muy interesante. La cuestion es que ya lo adpate a una web cambiandole las dimensiones para que queden un poco mas grandes. funciona los enlaces, pero en Internet explorer no funciona el efecto de movimiento. Que se puede hacer en ese caso

Responder
Claudia  

Hola el ejemplo me funciono bien, salvo al verlo en internet explorer.
Funciona con firefox, safari, crome

que puedo ahcer para que reconozca el efecto?

Responder
JMiur  

Claudia. No veo que haya ningún problema con este ejemplo, ni en IE7 ni en IE8.

Responder
Claudia  

Gracias por responder, mira el ejemplo que tengo, lo veo bien en fireforz, en explorer no se activa el movimiento solo los enlaza

http://www.planosyplanos.com/planosyplanos_inicio5.html

Gracias

Responder
JMiur  

Me da la impresión que debes agregarle el DIV legend a ún cuando no lo utilices
<div id="legend"></div>
caso contrario, habría que modificar el script para quitar la parte que escribe ese texto.
Parece mas sencillo poner el DIV y a lo sumo, agregarle un display:none para que no se vea.

Responder
ESNAPRI  

Hola JMiur: Soy, a partir de ahora, una seguidora más de tus publicaciones.
Gracias a EL POTRO, otro bloger A LO GRANDE, pude acceder a esta, tu publicación y añadir el menú en mi blog. Funciona de maravilla y, lo mejor de todo, gracias a tu clara explicación, a la primera.
Gracias sinceras por compartir tantos conocimientos.
Saludos.

Responder
JMiur  

Gracias por el comentario, ESNAPRI :-D

Responder
DJ TUE  

Me ha encantado perfecto, he añadido algunos más al mio y todo perfectamente explicado, si lo quieres ver funcionando está aqui.

http://tue86.blogspot.com/

Muchas gracias por tu ayuda Saludos.

Responder
América  

Muchas gracias JMiur es un gusto visitar tu blog siempre me funcionan a la perfección tus trucos.

Responder
JMiur  

Me alegra que te sean útiles, América :-D

Responder
EpideMia  

buenas!!
Jmiur! te felicito por tu trabajo, la verdad que me gusta mucho lo haces.
no solo nos das herramientas y complementos para nuestros blogs, sino que nos explicas como funcionan y porque se escriben como se escriben.

queria hacer una pregunta con respecto a este menu estilo dock. la verdad que me encanto. de hecho ya lo puse y me gusta mucho como se ve.
el tema es que yo tengo agregado un script para que los enlaces externos se habran en nueva ventana y los internos en la misma. el problema es que cuanto tengo instalado el dock, todos los enlaces (externos o internos) se abren en la misma ventana que estoy usando.
acaso es que los dos script no pueden estar juntos?? o estoy haciendo algo mal??
habra alguna forma de poder usar las dos cosas??
desde ya te agradezco por todo lo que me has enseñado.


si quieres ver como quedó solo tienes que buscar epidemia-mella

Responder
JMiur  

Efectivamente, ese script que abre todo en una ventana provocará eso con este script y con muchos otros. De ninguna manera es recomendable usar ese tipo de cosas y agregar el atributo target a mano.

Responder
Club_Ciclista_Grotesco  

pERFECRTO, HABIA INTENTADO CON OTROS PERO NO PODÍA, ahora, una pregunta, como se puede hacer para que el texto que aparece debajo salga en negrita?
se podría cambiar ese texto por una especie de botón?

Responder
JMiur  

Las propiedades del texto inferior, se establecen en esta regla:
#legend { .......... }

Para cambiar el texto por una imagen, deberías cambiar el script ... de alguna manera.

Responder
Liliana Fasciani M.  

Hola, JMiur, acabo de colocar el MENU DOCK en mi blog de viajes y fotografías y quedó muy bien, pero tengo que preguntarte si hay alguna forma de que no permanezca la leyenda del último icono sobre el cual se pasó el cursor.
Muchas gracias por mantenernos al tanto de tus acuciosas investigaciones acerca de recursos, herramientas y afines. Tu blog no es de ayuda, pero ¡cuánto nos ayudas!
Te invito a ver mi blog "Mapas en mi mochila" en http://fasciani-tripgallery.blogspot.com y extiendo la invitación a todos los blogueros que transitan por Vagabundia.

Responder
JMiur  

Imagino que debe haber una manera modificando el script pero no sabría decirte cual es el método exacto.

Gracias por la invitación :-D

Responder
Lepanto  

Hola, JMiur, es la primera vez que escribo, pero me fascina tu blog desde hace ya mucho tiempo. Tengo una dificultad con este menú, en tu ejemplo, los íconos se desplazan horizontalmente, pero con el escript y el css que pegué desde aquí, los íconos se desplazan verticalmente, ¿hay forma de que sea horizontal y no vertical el movimiento? Muchas gracias de antemano.

JMiur  

¿Dónde tienes colocado el ejemplo para poder verlo online?

Lepanto  

Es cierto, perdón. Este es el blog http://ebasic1.blogspot.mx/2012/05/blog-post.html
Verás que salen las imágenes pero en columna y otro detalle, realmente nos se mueven, sólo se hacen más grandes. El procedimientto que seguí fue pegar el código arriba de head y luego en la entrada puse la otra parte en donde se agregan los links. Otras vez muchas gracias.

JMiur  

Bien, ahora si. Lo que ocurre es que hay saltos de línea entre los distintos enlaces y por eso los ves así. Es un problema que se genera en el editor de Blogger que crea esos saltos de línea de modo automático.

Puedes eliminarlos del código, escribiendo todo en una sola línea o, más simple, para no "ensuciar" ese código, agregar una regla como esta:

#dock br {display: none;}

Lepanto  

Caray, que grande eres. Ya quedó muy bien. Con tanta ayuda que das deberías agregar un botón de donaciones.¡Mil gracias!

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Ayuda!!!!Se me han ido muchas de las imágenes publicadas.Sale la imagen en negro y como una señal de prohibido encima.Puede ser por haber puesto este menú? Y si no es así, a que puede ser debido? Gracias

JMiur  

No, no es por eso. Fíjate si has hecho cambios en tu cuenta de Picasa o si las imágenes siguen ahí.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Muchísimas gracias.Sí,sí el problema eran los cambios que hice con las imágenes.Ahora lo que sucede es que todas las pestañas abren bien menos la de contacto, al abrirla dice que esa página que busco no existe.También tengo página de contacto, como las otras.Serías tan amable de orientarme sobre el error? Muchísimas gracias por tu ayuda

JMiur  

Revisa el href del enlace, allí, algo está equivocado, una comilla o algún caracter simialr.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Eres genial!!!Muchísimas gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR