Linea de Codigo

Algo demasiado habitual como los errores de codificación, dependencias acopladas a enlaces externos,... pueden dar al traste con el diseño de nuestras páginas web.

Y es que cualquiera de los puntos citados anteriormente pueden hacer que tengamos imágenes rotas en nuestra página, las cuales estropeen el contenido de las mismas.

Si bien, mediante sencillos scripts podemos eliminar imágenes rotas con jQuery. La idea es recorrer todas las imágenes que haya en la página y si la imagen tiene un error, eliminarla.

Lo primero es saber como acceder a las imágenes mediante jQuery. Para ello utilizamos el siguiente código:

$("img")

El selector pasado a la función $ es el del elemento IMG. Como queremos saber si se ha producido un error en la carga de la imagen pasaremos a tratar el evento .error().

$("img").error(...);

Dentro de la gestión del evento .error() tomaremos la decisión sobre qué hacer. En este caso, como vamos a eliminar las imágenes rotas, llamaremos al método .remove() de jQuery.

$('img').error(function() {
  $(this).remove();
}) 

Este código lo tendremos que ejecutar cuándo se haya cargado la página. Es decir, en el método .ready().

 $(document).ready(function(){
   $('img').error(function() {
     $(this).remove();
   })
 });

En este ejemplo vamos a ver como podemos crear una imagen la cual tenga diferentes partes (o áreas) con enlaces diferentes. Para ello nos vamos a apoyar en los elementos MAP y AREA de HTML.

Lo primero ver la imagen sobre la que vamos a crear las áreas...

La idea es que cada logo de la imagen redirija a un enlace diferente. Lo primero que hacemos es cargar la imagen en la página:

<img usemap="#navegadores" src="navegadores.png" border="0" alt="Navegadores" width="821" height="152" />

Como se puede apreciar hemos utilizado el atributo usemap para indicarle el nombre del mapa que contendrá la definición de las áreas enlazables. En este caso el mapa se llama navegadores.

Pasemos a definir el mapa. El mapa se define mediante el elemento MAP:

 
<map id="navegadores" name="navegadores">
...
</map>
 

Dentro del mapa es donde definiremos las áreas, mediante elementos AREA. Un elemento AREA tiene varios atributos, pero los más importantes son:

• href, es el enlace donde se irá al pinchar sobre ese área.
• shape, es el tipo de figura que queremos que represente el área: default|rect|circle|poly
• coords, los las coordenadas de la imagen que representan los vértices de la figura. O centro y rádio en el caso de que sea un círculo

En este caso, sobre la imagen definiríamos los siguientes áreas:

 
<area shape="rect" coords="0,0,157,147" href="/que-es-internet-explorer/" alt="Internet Explorer"  />
<area shape="rect" coords="164,0,321,147" href="/que-es-firefox/" alt="Firefox" />
<area shape="rect" coords="340,0,497,147" href="/que-es-google-chrome/" alt="Google Chrome" />
<area shape="rect" coords="507,0,664,147" href="/que-es-safari/" alt="Safari" />
<area shape="rect" coords="659,0,816,147" href="/que-es-opera/" alt="Opera" />

En nuestro caso hemos utilizado todo rectángulos.

Lo más complicado en estos casos es encontrar las coordenadas del área. Para ello te recomiendo que utilices herramientas como Image Map Creator la cual genera las coordenadas y el código HTML.

Aunque lo normal en la web es que los enlaces sean textos, también podemos extender la capacidad de hacer enlaces con imagenes. De esta forma, cuando pulsemos sobre una imagen, esta actuará como enlace y nos llevará al destino demarcado por el enlace.

Para poder hacer esto en HTML, lo primero será poner una imagen. Para ello nos basamos en la etiqueta IMG:

<img src="casarural.jpg" alt="Los Tejos" />

Acordaros, como buena práctica, el poner un texto alternativo a la imagen con el atributo alt.

Ahora tendremos que recubrir el código de la imagen con un código de enlace. Para los enlaces nos basamos en la etiqueta A o anchor. Y para indicar el enlace el atributo href. De esta manera el código quedaría de la siguiente forma:

<a title="Los Tejos" href="http://www.lostejos.com"><img src="casarural.jpg" alt="Los Tejos" /></a>

Ya hace tiempo que veíamos el ejemplo de cómo mostrar una ventana de información en Google Maps. Pero dicho ejemplo nos daba poco juego ya poniendo texto en la ventana de información no llegamos muy lejos.

Ahora vamos a ver como poner ventanas de información con imágenes. Bueno, con imágenes y con más cosas. La verdad que lo que hacemos es cargar una ventana de información que nos permita cargar HTML. Pero vamos por pasos... lo primero, siempre, crear un área para el mapa y cargar Google Maps.

<html>
<head>
<title>Ventana de información con imagen</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=CLAVE" type="text/javascript"></script>
 
<script type="text/javascript">
 
//<![CDATA[
 
function load(){
  if (GBrowserIsCompatible()) 
     var map = new GMap2(document.getElementById("mapa"));    
 }
//]]>
</script>
</head>
<body onload="load();" onunload="GUnload();">
<h1>Ventana de información con imagen</h1>
<div id="mapa" style="width: 800px;height: 600px;">
</div>
 
</body>
</html>

Los pasos, ya explicados en Cargando Google Maps, se pueden resumir en:

• Cargar el script de Google Maps
• Definir una capa donde irá el mapa
• Cargar el Mapa, vía función onLoad, en la capa
• Indicar la función GUnload en el onunload de la página, para liberar memoria

Cargar la ventana de información que lleve el HTML lo hacemos mediante el método .openInfoWindowHtml(). Este método recibe como parámetros la longitud-latitud, representado por una clase GLatLng, en la cual se abrirá la la ventana y el HTML que queremos cargar.

Así que incluir la imagen será tan sencillo como poner el siguiente código:

map.openInfoWindowHtml(new GLatLng(40.381351,-5.764591),"
<h3>Casa Rural Los Tejos</h1>
 
<img src='casarural.jpg' style='float:left;margin-right:40px;'> Distribución:
<ul>
<li>1 Habitación de matrimonio</li>
<li>2 habitaciones dobles</li>
<li>2 cuartos de baño completos</li>
<li>1 aseo</li>
<li>Cocina</li>
<li>...</li>
</ul>
 
");

Vemos que no solo cargamos la imagen mediante la etiqueta IMG, si no que hemos incluido un titular con H3 y una lista de elementos con UL. El resultado... pues compruébalo tu mismo.

En este ejemplo vamos a explicar como al pasar sobre un enlace cambie una imagen del documento. Para poder llevar a cabo este ejemplo debemos de tener en cuenta una serie de cosas.

La primera es que el código Javascript que se ejecute para cambiar la imagen empezará a ejecutarse cuando se produzca el evento onMouseOver sobre el enlace. Este evento llamará a una función que podemos llamar cambiar.

No se nos debe de olvidar que cuando el usuario abandone el enlace debemos de volver a poner la imagen original. Para ello debemos de capturar el evento onMouseOut que lanzará otra función que llamaremos volver.

<a href="#" onMouseOver="cambiar();" onMouseOut="volver();">Al pasar sobre mi cambiará la imagen</a>

Con respecto a las funciones Javascript debemos de tener en cuenta como se llama la imagen del documento. Para ello daremos un identificador a la imagen a través de su parámetro ID.

<img src="mt05.jpg" id="matrix"/>

Como conocemos el nombre de la imagen valdrá con modificar su parámetro src que indica el origen de la imagen.

<script type="text/javascript">
 
 function cambiar () {
  document.getElementById('matrix').src = "mt07.jpg";
 }
 
 function volver () {
  document.getElementById('matrix').src = "mt05.jpg";
 }
 
</script>

Cuando entremos en el enlace se cargará una foto y cuando salgamos, otra.

Cuando conformamos nuestra página HTML, esta se conforma de un conjunto de elementos HTML los cuales consiguen la representación gráfica de la página.

Por ejemplo, podemos insertar una imagen y una capa mediante el siguiente código:

 
<DIV><IMG src="imagen.gif" width="100" height="200"/></DIV>
 

Si, a posteriori, queremos utilizar algún lenguaje de script, como JavaScript y necesitamos modificar alguno de los elementos de la página, como la capa y la imagen de antes, debemos de identificarlos unívocamente.

Para identificar unívocamente un elemento HTML deberemos de utilizar el atributo id. El valor a asignar al atributo id tiene que ser un valor único.

Así nuestro código de antes nos quedaría de la siguiente forma:

 
<DIV id="micapa"><IMG id="imagen1" src="imagen.gif" width="100" height="200"/></DIV>
 

Como se puede ver en el código, el atributo id se ha asignado a los elementos DIV e IMG.

Mediante este sencillo ejemplo veremos como podemos crear bordes con puntos. Los cuales podremos aplicar a múltiples objetos de nuestra página HTML.

Los bordes se pueden configurar mediante el atributo border-style. Cuando queremos que el borde sea con puntos deberemos de utilizar el valor "dotted".

Continue reading Bordes con puntos...

Lo más normal es apoyarnos en el lenguaje HTML para definir el tamaño de una imagen. Si bien, otra alternativa es utilizar estilos CSS para definir el alto y ancho de una imagen.

En este caso podemos definir una clase CSS, la cual aplicaremos dependiendo de las necesidades.

Continue reading Definir el tamaño de una imagen con CSS...

Cuando aprendemos a escribir lenguaje HTML para crear nuestras páginas web aguantaremos poco creando páginas web con solo texto y estaremos deseosos de insertarle alguna imagen para darlas colorido.

La etiqueta HTML que nos permite poner imágenes en nuestra página web es IMG. La línea de código que necesitaríamos sería la siguiente:

<IMG src="mifoto.jpg"/>

Vemos que el atributo src permite indicar el nombre de la imagen que queramos cargar. Este nombre puede ser directamente el de la imagen o bien una ruta relativa o absoluta más el nombre de la imagen.

Por defecto, el tamaño de la imagen que carga es su tamaño original.

Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.

Así, si queremos poner la imagen a 100x100 pixels, la línea de código quedaría de la siguiente forma:

<IMG src="mifoto.jpg" width="100" height="100"/>

Gracias a CSS tenemos la posibilidad de ocultar/mostrar las imágenes de un documento. Las utilidades pueden ser diversas:

Continue reading Ocultar imagenes con CSS...