Galería de imágenes con título descriptivo más enlace.

<Librerías JavaScript>

Esta completa galería de imágenes en JavaScript muestra cada imagen con un título descriptivo que se transforma en enlace hacia el mismo archivo gráfico o hacia una página web alojada dentro o fuera de nuestro dominio. El título que sirvirá de enlace estará dentro de una capa (SPAN) con fondo transparente.

| Descripción de la Librería JavaScript

Podemos agregar todas las imágenes que queramos. Lo único que debemos hacer es colocar el atributo class con el valor miImagen a cada una de ellas, de esta manera el código JavaScript editará la imagen creando una nueva capa y posicionándola sobre ella con el título descriptivo. Las imágenes que no contengan este atributo y valor no serán editadas y se comportarán como imágenes comunes.

Snapshot de la librería (vista previa).

Galería imagenes con descripcion y enlace

Información relativa a la Librería JavaScript

Compatible con: Internet Explorer

Tamaño de la Librería: 6KB

Probar la Librería

Descargar Librería Completa

Temas relacionados a esta Librería JavaScript

Librería JavaScript. Galería de imágenes con título descriptivo 
más enlace hacia una página web dentro o fuera de nuestro dominio o hacia el 
mismo archivo gráfico.

Código fuente de la Librería (archivo HTML):

<LINK href="galeria-imagen-descripcion-enlace.css" rel="stylesheet" type="text/css" />
<script language="javascript">
// Definimos el alto de la capa DIV
var altoDiv = 40 // en px
// Definimos si vamos a utilizar las imágenes como thumbnails (miniatura de imagen)
var usarMini = true // Valores: true || false
/* Definimos el ancho de la imagen si es que vamos a 
mostrarla como thumbnails (miniatura de imagen) */
var miniWidth = 220 // en px
/* Definimos el alto de la imagen si es que vamos a 
mostrarla como thumbnails (miniatura de imagen) */
var miniHeight = 150 // en px
// Definimos en que ventana se van a abrir los enlaces
var nuevaVentana = '_blanck' // Valores: _blanck || _parent || _top || _self

/* JavaScript Galería de Imágenes con título descriptivo más enlace
creado por www.codigojavascript.com */
</script>
<script language="javascript" src="galeria-imagen-descripcion-enlace.js"></script>

</HEAD>

<H2 align="center">
	Galería de Imágenes con Título descriptivo más enlace
</H2>

<PRE>
<P align="center">
Podemos ver que las primeras 6 imágenes ingresadas fueron editadas 
por el JavaScript ya que tienen como <b>className</b> el valor <b>miImagen</b>. 
</P>
</PRE>

<PRE>
<P align="center">
Estas 6 imágenes son las mismas que las anteriores pero no fueron
editadas por el código JavaScript.
</P>
</PRE>

<CENTER>
<P>
<IMG src="img01.jpg">
<IMG src="img02.jpg">
<IMG src="img03.jpg">
</P>
<p>
<IMG src="img04.jpg">
<IMG src="img05.jpg">
<IMG src="img06.jpg">
</p>
</CENTER>

</BODY>
</HTML>

Código fuente del archivo JS:

/* JavaScript Galería de Imágenes con título descriptivo más enlace
creado por www.codigojavascript.com */
this.findLeftObj = function(obj) {
var curleft = 0;
if (obj.offsetParent) {
   while (obj.offsetParent) {
	curleft += obj.offsetLeft
	obj = obj.offsetParent;
	}
}
else {
 if(obj.x) {
   curleft += obj.x;
  }
}
return(curleft);
}
        
this.findTopObj = function(obj) {
var curtop = 0;
if (obj.offsetParent) {
	while (obj.offsetParent) {
		curtop += obj.offsetTop
		obj = obj.offsetParent;
	}
}
else {
  if (obj.y) {
	curtop += obj.y;
   }
}
return(curtop);
}

var i = 0
var l = 100

window.onresize = definirPosicion2

objetIMG.onmouseover = newSPAN.onmouseover = function opacarSi() {
	if (this.id) {
		numID = this.id.substring(6,7)
	}
	if (l>=50) {
		document.images[numID].style.filter = 'alpha(Opacity='+l+')' 
		document.images[numID].style.MozOpacity = l/100 
		l = l-10
		time = setTimeout(opacarSi,4)
	}

}
	
	objetIMG.onmouseout = newSPAN.onmouseout = function opacarNo() {
	clearTimeout(time)
	numID = this.id.substring(6,7)
	document.images[numID].style.filter = 'alpha(Opacity=100)'
	document.images[numID].style.MozOpacity = 100
	l = 100
	}

}

i++
	definirPosicion()
}

else {
	i = 0
}

} // Fin función definirPosicion()

function definirPosicion2() {

if (document.images[i]) {
	objetIMG = document.images[i]
	if (objetIMG.className == "miImagen") {
	altoIMG = document.images[i].height
	posXImagen = findLeftObj(objetIMG);
	posYImagen = findTopObj(objetIMG);
	
		document.getElementById('divsid'+i).style.left = posXImagen
		document.getElementById('spanid'+i).style.left = posXImagen
		document.getElementById('divsid'+i).style.top = posYImagen + altoIMG - altoDiv
		document.getElementById('spanid'+i).style.top = posYImagen + altoIMG - altoDiv
	}
i++
definirPosicion2()

}

else {
	i = 0
}

}

	Temas relacionados a la Librería JavaScript:
	Ningún tema relacionado.

Comentarios Recibidos sobre: Galería de imágenes con título descriptivo

Adrián M. de Urguay | Enviado: Julio 26, 2008

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.