jump to navigation

Imagen con enlace en HTML Febrero 2, 2010

Publicado por lineadecodigo en : HTML , 5 comentarios

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:

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

  1. <a href="http://www.lostejos.com" title="Los Tejos"><img src="casarural.jpg" alt="Los Tejos"/></a>
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código

Ventanas de información con imágenes en Google Maps Septiembre 23, 2009

Publicado por lineadecodigo en : Google , Hasta ahora 1 comentario

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.

  3. title"><title>Ventana de información con imagen</title>
  4. <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=CLAVE" type="text/javascript"></script>
  5.  
  6. <script type="text/javascript">
  7.  
  8. //<![CDATA[
  9.  
  10. function load(){
  11.   if (GBrowserIsCompatible()) 
  12.      var map = new GMap2(document.getElementById("mapa"));    
  13.  }
  14. //]]>
  15. </script>
  16. </head>
  17. <body onload="load();" onunload="GUnload();">
  18. <h1>Ventana de información con imagen</h1>
  19. <div id="mapa" style="width: 800px;height: 600px;">
  20. </div>
  21.  
  22. </body>
  23. </html>

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

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:

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

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

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Google Maps

Cambiar dinámicamente una imagen con JavaScript Septiembre 9, 2009

Publicado por lineadecodigo en : JavaScript , Añadir un comenario

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.

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

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

  1. <script type="text/javascript">
  2.  
  3.  function cambiar () {
  4.   document.getElementById('matrix').src = "mt07.jpg";
  5.  }
  6.  
  7.  function volver () {
  8.   document.getElementById('matrix').src = "mt05.jpg";
  9.  }
  10.  
  11. </script>

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

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Javascript

Identificar unívocamente un elemento HTML Diciembre 29, 2008

Publicado por lineadecodigo en : HTML , Añadir un comenario

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:

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

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:

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

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

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre HTML

Bordes con puntos Marzo 31, 2008

Publicado por lineadecodigo en : CSS , 3 comentarios

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

(más...)

Definir el tamaño de una imagen con CSS Diciembre 9, 2007

Publicado por lineadecodigo en : CSS , 3 comentarios

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.

(más...)

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código

Alto y ancho de una imagen con HTML Diciembre 4, 2007

Publicado por lineadecodigo en : HTML , 3 comentarios

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:

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

  1. <IMG src="mifoto.jpg" width="100" height="100"/>
|- Visualizar el ejemplo
|- Descargar el código
|- Foro sobre HTML

Ocultar imagenes con CSS Octubre 18, 2007

Publicado por lineadecodigo en : CSS, JavaScript , 6 comentarios

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

(más...)

Botones con imagenes en XForms Enero 7, 2007

Publicado por lineadecodigo en : XForms , 8 comentarios

Si echamos la vista atrás podemos recordar que con los formularios HTML podíamos tener campos de texto de tipo "image". Estos campos de texto no eran más que una imagen sobre la que se podía pinchar. Luego aparecio la etiqueta button que ya permitía anidar otros elementos. Mediante CSS se daba un nuevo salto y las propiedades permitían jugar con el color e imagen de fondo del botón. Con XForms vamos un paso más allá y aquí se pueden construir botones con imágenes, mediante la etiqueta IMG de HTML. Algo parecido al elemento button de HTML. Y todo de una forma muy sencilla.

Lo primero que tenemos que ver es cómo construir un botón. Para ello nos valemos de la etiqueta trigger. La verdad es que esto ha sido un cambio bastante sustancial con respecto a los button del HTML

Anidada a la etiqueta trigger utilizaremos label para indicar el texto que va sobre el botón. Teniendo un código similar al siguiente:

  1.  
  2. <trigger>
  3.    <label>Mi boton</label>
  4. </trigger>

Incrustar una imagen como elemento del botón será un procedimiento muy sencillo, ya que bastará con utilizar la etiqueta IMG, referenciando a la imagen que queramos usar, como valor del label del botón

  1.  
  2. <trigger>
  3.    <label><h:img src="documento.gif"/></label>
  4. </trigger>

Como se puede observar, algo muy sencillo de codificar y muy útil en cuanto al diseño. Toda una novedad de XForms.

Veamos como sería el código completo:

  1. <h:html xmlns:h="http://www.w3.org/1999/xhtml"
  2.    xmlns="http://www.w3.org/2002/xforms">
  3. <h:head>
  4.  <h:title>Mi primer formulario XForms</h:title>
  5. </h:head>
  6. <h:body>
  7.  
  8.  <h:p>
  9. <trigger>
  10.    <label><h:img src="documento.gif"/></label>
  11.   </trigger>
  12. <trigger>
  13.    <label>Mi boton</label>
  14.   </trigger>
  15.  
  16.  </h:p>
  17. </h:body>
  18. </h:html>

FireFox ya da soporte a la especificación de XForms, aunque, que yo sepa incompleto. Puedes encontrar otros interpretes de XForms en http://www.w3.org/MarkUp/Forms/#implementations

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre XForms