Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como imagen

Código jQuery para ver una imagen al pasar el ratón sobre un enlace.

   Voy a explicar un código en jQuery , para que, al pasar el puntero del mouse sobre un enlace o, en este caso, sobre un texto cualquiera (sin necesidad de ser un enlace), se nos muestre una imagen cerca del enlace y que esta desaparezca al retirar el puntero del mouse (sin necesidad de hacer click sobre él). Podéis pensar que me estoy repitiendo con un anterior post. Casi que si. Pero la diferencia es que, en este caso, no sabemos donde estará situada la imagen. Es decir que, dependiendo de la situación de la pantalla donde esté el enlace o texto, allí se mostrará la imagen.    Vamos al grano. Primero el código en HTML:       <span class="enlace" title="hyneria.png">Hyneria</span>    Podéis ver que, en este caso, no se trata de un enlace. Le pongo el nombre de 'enlace' a la clase porque en el CSS le doy apariencia de enlace. Aquí lo importante es 'title' el cual contiene el nombre de la imagen que queremos most...

Imagen de fondo adaptable a todas las resoluciones

   Continuando con la página Las Edades de la Tierra , en este post voy a explicar cómo incluir las imágenes de fondo y que estas queden fijas y se adapten a cualquier resolución y tamaño de la ventana.    En primer lugar el código HTML5 : <body> <img id="imgback" src="images/fondolatierra.jpg" alt="la tierra"> <header id="cabecera"> <h1> <a title="Las edades de la tierra en millones de años,cenozoico, paleozoico, mesozoico, jurasico, precambrico" href="#"> <img id="imgcabecera" alt="las edades de la tierra" src="images/lasedadesdelatierra.png"></a> </h1> </header>    El HTML es sencillo (y el CSS también lo será). Inmediatamente después de la etiqueta 'body' insertamos la imagen de fondo con un 'id'. Después, dentro de la etiqueta 'header' incluimos la imagen (también con un 'id') que nos servirá de ...