¡Menu de imágenes desplazable!, Lo que estabas buscando.

A pesar de que en el título de la entrada ponga "Menu", no se trata de esto exactamente, aunque hace una función muy parecida.

En realidad se trata de un "Slide", una galeria de imagenes, que ademas se desplaza lateralmente.

Como habréis notado, soy bastante aficionado de este tipo de menus. Se trata de una forma fácil y rápida de llamar la atención antes que un simple título como "Cosas" o "Tecnologías". Son del tipo que podéis ver en marca:

Y como podéis ver mi blog cuenta con algo parecido arriba, pero eso en verdad es un banner con enlaces de entradas destacadas creado en Banner Snack (muy recomendable, y que acaba de renovar y mejorar su interfaz totalmente on-line), y del que ya hablamos en una de nuestras entradas sobre banners hace ya tiempo.

Pues bien, vamos a lo que interasa, lo que os traigo, para que nadie se confunda es esto que veis aquí debajo:

Es parecido a esto, lo que pasa es que es un Gadget o widget (como queráis llamarlo), y en las entradas no suele funcionar, por eso no os lo pongo en su máximo esplendor, podéis verlo en esta página para la que lo he creado.

Su funcionamiento es muy sencillo, se desplaza lateralmente (desde el principio de la página, no desde 0, que muchas veces queda una franja en blanca y queda feo), y cuando sitúas el cursor sobre una de las imágenes se detiene, sale el nombre de la sección (saliendo la manita, que nos dice que ahí hay algo) y al pulsar nos redirecciona al sitio que tengamos puesto.

Lo bueno sobretodo, es que es un solo código, y sin tocar nada de la "Edición Html" ni nada de la página o blog. El código es el siguiente:

<script type="text/javascript"> //Ancho (en pixeles) var sliderwidth="650px" //Alto var sliderheight="150px" //Velocidad 1-10 var slidespeed=2 //Color de fondo: slidebgcolor="#000000" //Vínculos y enlaces de las imágenes var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>' leftrightslide[1]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>' leftrightslide[2]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>' leftrightslide[3]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>' leftrightslide[4]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>' var imagegap="" var slideshowgap=5 var copyspeed=slidespeed leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') var actualwidth='' var cross_slide, ns_slide function fillup(){ if (iedom){ cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth cross_slide2.style.left=actualwidth+slideshowgap+"px" } else if (document.layers){ ns_slide=document.ns_slidemenu.document.ns_slidemenu2 ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 ns_slide.document.write(leftrightslide) ns_slide.document.close() actualwidth=ns_slide.document.width ns_slide2.left=actualwidth+slideshowgap ns_slide2.document.write(leftrightslide) ns_slide2.document.close() } lefttime=setInterval("slideleft()",30) } window.onload=fillup function slideleft(){ if (iedom){ if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">') write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>') write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">') write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>') write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>') write('</ilayer>') } document.write('</td></table>') } } </script>

De acuerdo, se que el HTML da mucho miedo, a mi el primero, pero con pequeñas cosas de estas podemos ir aprendiendo poco a poco y sin prisas. Es muy sencillo.

Lo escrito en AZUL son orientaciones que debes eliminar cuando completes las demás partes de tu menú.

De las partes en rojo, el número del pirncipio, 650, será el ancho del menú o slide, no importa la suma de las imágenes, será el ancho desde el punto de donde empieza a salir hasta donde acaba (el ancho de tu web o blog lo más normal). Y el 150, el alto del menú o slide, este no debe ser mayor del alto de las imágenes que incluyas (pues se agrandaran y deformaran). Y la X es el alto de las imágenes, que debe corresponder con el 150, o el número que pongáis en su lugar según como lo queráis de alto, para que no salgan "cosas raras".

Si queréis personalizar el color de fondo ( #000000 ) y no sabéis mucho de colores en html, lo más sencillo (y lo que yo hago) es ir al diseñador de plantillas, poner el color que quiera a algo, y como te sale el código, lo copio y lo pego, así de fácil. 

Después lo que veis a partir de "leftrightslide[0]" es cada imagen, con su enlace y demás, solo es rellenar una por una, un poco pesado si quieres poner muchas, pero satisfactorio cuando ves el resultado.

Para añadir más imágenes es poner lo que sigue de "leftrightslide[siguiente número]".

Recomenaciones: Las imágenes que incluyáis en este menú o slide lo mejor es que sean del mismo tamaño todas, es decir, vais a poner 5 imágenes, pues ponlas del mismo tamaño al menos de alto, de ancho da un poco igual.

Si queréis que se parezca lo más posible a un menu, como el que os he enseñado aquí, pues lo que yo os recomiendo es que hagáis el menú con un programa de diseño gráfico, photoshop, gimp, power point (como sabéis muy aprovechable), paint o el que queráis, y que cuando lo tengáis como os gustaría que saliera, lo cortéis en varias imágenes hasta tenerlas todas y poderlo montar. 

Ejemplo de como hice ese que os he enseñado. Imagen completa: 

Imágenes recortadas:

ETC.

De esta forma, podréis mostrar vuestras fotos de la manera más original y dinámica posible, o hacer un menú también muy dinámico e interactivo.

Por otro lado, ya que estamos con este tema, si no te apetece montar tanto lio, y no quieres estar rellenando enlaces, tienes otra opción, que es usar esta clave Html:

<marquee>Hola</marquee>

Y veriaís una cosa como esta:

Hola

Pero si queréis que en lugar de una palabra, sea una imagen, solo tenéis que poner entre marquee y marquee el codigo de una imagen (lo más facil, es subir una imagen, ponerle el tamaño que queréir, y darle a "Edición Html", copiais ese código, y lo ponéis).

<marquee><div class="separator" style="clear: both; text-align: center;"> <a href="http://www.colorear.info/Dibujos-infantiles/house-mouse/images/goofi-en-coche.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="http://www.colorear.info/Dibujos-infantiles/house-mouse/images/goofi-en-coche.gif" width="200" /></a></div></marquee>

Y lo que veréis será algo como esto (esperad un poco a que aparezca):

Jajaja, ¡grande Goofi! (mucho a tardado en aparecer).

Igualmente, si cogéis varias imagenes, las "pegáis" y formáis una sola, podéis hacer una especie de galería con este último método, eso ya a gusto del consumidor.

Hasta aquí todo por hoy, un poquito más de Html.

Se que quizás es demasiado explicado par algo que puede parecer sencillo, pero como el blog es mio, y me gusta escribir, lo explico como me gustaría que me lo explicaran a mi, y de una manera que se entienda, al que le guste bien, y al que no también (jaja).

Un abrazo a todos, y a disfrutar del nuevo curso.