Ayuda ejercicios unidad 10: JavaScript

Solución al ejercicio 1:

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.

Copia los archivos nutria.jpg, buitre_leonado.jpg y gineta.jpg a la carpeta imagenes del sitio parquenatural.
Comienza colocando la imagen de la nutria, por ser el primer animal en la página, antes del pimer h3.

Asígnale el id animal para identificarla por JavaScript y la clase animal para aplicarle un estilo.

...
<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>
...

Añade el estilo correspondiente para la imagen a la Hoja de estilos:

img.animal {
    border: #70AF0A 2px solid;
    background-color: #BF823B;
    padding: 2px;
    margin: 50px 0 10px 10px;
    float: right;
}

Ahora vamos con el código JavaScript. Básicamente lo que haremos será cargar las posibles imágenes en variables JavaScript. Añade el siguiente código dentro del <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>

Para cambiar la imagen, nos referimos a ella por su id como 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>
```

Por supuesto, no olvides mencionar a los autores de las imágenes:

<div class="autores">
  La imagen del t&iacute;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&aacute;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>

Solución al ejercicio 2:

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&oacute;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>

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies