La forma en la que lo vamos a hacer es colocar una imagen al principio. Luego, al pasar el ratón, cambiaremos el origen de esa imagen por la del animal correspondiente.
... <p>Estos son algunos de los habitantes de parque:</p> <img src="imagenes/nutria.jpg" width="290" height="350" class="animal" id="animal" alt="Especies del parque" /> <h3>Nutria</h3> ...
img.animal { border: #70AF0A 2px solid; background-color: #BF823B; padding: 2px; margin: 50px 0 10px 10px; float: right; }
<head>
de la página:
<script type="text/javascript"> <!-- var nutria = new Image(); nutria.src = "imagenes/nutria.jpg"; var buitre = new Image(); buitre.src = "imagenes/buitre_leonado.jpg"; var gineta = new Image(); gineta.src = "imagenes/gineta.jpg"; //--> </script>
document.images['animal']
. Lo aremos al pasar el cursor, es decir, en el evento onmouseover
. Como tenemos un encabezado y un párrafo por cada animal, por no ponerlo en los dos sitios, lo vamos a meter todo en un div, en elq ue colocaremos el evento. La página te ha de quedar así:
<div onmouseover="document.images['animal'].src=nutria.src;"> <h3>Nutria</h3> <p>La nutria...</p> </div> <div onmouseover="document.images['animal'].src=buitre.src;"> <h3>Buitre leonado</h3> <p>El buitre...</p> </div> <div onmouseover="document.images['animal'].src=gineta.src;"> <h3>Gineta</h3> <p>La gineta...</p> </div>
<div class="autores"> La imagen del título pertenece <a href="http://www.flickr.com/photos/amagill/2740376079/">AMagill</a>. La imagen de la nutria pertenece a <a href="http://www.flickr.com/photos/59683764@N00/4056875654/">sky#walker</a>, y las imágenes de la gineta y el buitre son de <a href="http://www.flickr.com/photos/edans/sets/72157615316339402/">edans</a>.<br /> Todas se distribuyen bajo licencia <a href="http://creativecommons.org/licenses/by/2.0/deed.es">CreativeCommons</a>. </div>
Tras descargarnos los archivos y ver el menú y sus explicaciones, vemos que tenemos que crear dos archivos. Una hoja con el estilo del menú, y el archivo domMenu_items.js con los elementos del menú.
Elementos:
Hemos creado el archivo domMenu_items.js con las opciones mínimas, es decir, lo que muestra cada elemento (contents) y la URL del enlace (uri), sin texto de la barra de estado, ni cambiar el texto cuando cuando el cursor está encima, etc. Nos ha quedado así:
domMenu_data.set('domMenu_main', new Hash(
1, new Hash(
'contents', 'Inicio',
'uri', 'index.html'
),
2, new Hash(
'contents', 'Flores',
'uri', 'flores/index.html',
1, new Hash(
'contents', 'Exóticas',
'uri', 'flores/exoticas.html'
),
2, new Hash(
'contents', 'Ornamentales',
'uri', 'flores/ornamentales.html'
),
3, new Hash(
'contents', 'Plantas',
'uri', 'flores/plantas.html'
),
4, new Hash(
'contents', 'Silvestres',
'uri', 'flores/silvestres.html'
)),
3, new Hash(
'contents', 'Nosotros',
'uri', 'nosotros.html'
),
4, new Hash(
'contents', 'Contacto',
'uri', 'contacto.html'
),
5, new Hash(
'contents', 'Noticias',
'uri', 'noticias.html'
)
));
Estilo:
Después, hemos creado la hoja de estilo menus.css, en la que hemos copiado los estilos que ya teníamos para el menú, y lo hemos adaptado utilizando los selectores de DOM Menu, y cambiando algunas propiedades, aunque pocas. Por ejemplo, las propias de las listas. El resultado es el siguiente:
div.domMenu_menuBar { margin: 0 40px 0 0; padding: 0; font-size: 105%; float: right; } div.domMenu_menuElement { margin: 0 2px; float: left; height: 40px; line-height: 40px; width: 90px; text-align: center; background-image: url(imagenes/pest_normal.png); background-position: center top; background-repeat: no-repeat; color: #f5e4cc; } div.domMenu_menuElementHover { background-image: url(imagenes/pest_hover.png); color: #ff7600; } div.domMenu_subMenuElement { margin: 0 0 0 -7px; background-image: url(imagenes/submenu_normal.png); background-position: center center; background-repeat: no-repeat; height: 32px; line-height: 32px; width: 108px; position: relative; font-size: 90%; color: #f5e4cc; text-align: center; } div.domMenu_subMenuElementHover { color: #ff7600; background-image: url(imagenes/submenu_hover.png); }
Utilizar el menú.
A parte de los archivos menu.css y domMenu_items.js, también hemos copiado a la carpeta del sitio el archivo domMenu_min.js que contienen las funciones JavaScript que muestran y controlan el menú, en su versión reducida. En el head
de nuestra página, llamamos a los tres archivos:
<link rel="stylesheet" href="menu.css" type="text/css" />
<script type="text/javascript" src="domMenu_min.js"></script>
<script type="text/javascript" src="domMenu_items.js"></script>
Tal y como se explica en la documentación del menú, para poder utilizarlo, hay que crear una división con el id="domMenu_main"
(aunque se puede cambiar), y para activarlo, hay que llamar a la función domMenu_activate. Por lo tanto, en la página cambia la llamada al menú creado por nosotros (<script type="text/javascript">cargarMenu('index');</script>
) por el siguiente código:
<div id="domMenu_main"></div> <script type="text/javascript">domMenu_activate('domMenu_main');</script>
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.