HTML para cambiar de imágenes por clic en un encabezado

by admin

HTML para cambiar de imágenes por clic en un encabezado

diseño de sitios web se basa en las fotos para relacionar la estética visual que agradan y en cautiverio los ojos del espectador. fotos del sitio web dan una representación visual de sus productos, servicios, logotipo de la empresa, eventos, etcétera. Al añadir una serie de imágenes para hacer clic a través, se crea una codificación sencilla para ir a la "siguiente" o "anterior" de la imagen.

Instrucciones

1 Crear una carpeta en el área de presentación de FTP de su sitio web. Nombre de la carpeta algo como "verano" para indicar las imágenes de sus vacaciones de verano o de otro nombre de identificación correspondiente. Nombre de todas las imágenes de un corto fáciles de encontrar el nombre del archivo, como "river1.jpg", "solstice3.jpg", "festivalday5.jpg" y así sucesivamente. Escriba una lista de los nombres de archivo de fotos en un archivo de texto para una referencia rápida. Cargar todos los archivos de imágenes en la carpeta.

2 Escribe una plantilla de página HTML de sus páginas de fotos. Utilizando este código de contenido de una página principal, tales como la barra de navegación, pies de página y todo lo que aparece en todas las páginas de su sitio. La plantilla es sólo para ofrecer una imagen por página.

3 Guarde la plantilla con un nombre nuevo tantas veces como sea necesario, por lo que cada una de sus imágenes tiene su propia página. Por ejemplo, la plantilla <html> <body> de su menú, etc, a continuación, una cabecera principal y sub-cabecera. El sub-cabecera (h2) se podrá hacer clic. La página titulada river1.html tendrá la imagen river1.jpg codificado así:

<Center> <table width = "600">

<Tr> <td> <h1> vacaciones de verano Fotos </ h1> </ td> </ tr>

<Tr> <td> <h2> <a href="river2.html"> <Presione aquí para ver siguiente imagen </ a> </ h2> </ td> </ tr>

<Tr> <td> << IMG SRC = "images / verano / river1.jpg"> </ td> </ tr>

</ Table>

</ Center>

</ Body> </ html>

4 Cambiar los nombres de la página html en el vínculo y el SRC (fuente) información de archivo para cada imagen, y guardar la plantilla con el nuevo nombre. Si usted tiene 12 imágenes de río, tendrá 12 páginas denominadas river1, river2, río 3 a través de la última one.For cada página, sólo es necesario cambiar las dos líneas de enlace y el código de la imagen. Por ejemplo, cambiar las líneas del paso 2 a:

<Tr> <td> <h2> <a href="river3.html"> <Presione aquí para ver siguiente imagen </ a> </ h2> </ td> </ tr>

<Tr> <td> << IMG SRC = "images / verano / river2.jpg"> </ td> </ tr>

y guardar la página como river2.html

Continúe hasta que tenga un archivo HTML para cada imagen, a continuación, subir a todos.

5 Probar el código. Comience con su página de vacaciones de verano river1.html. Tu foto debe aparecer centrado en la página, con el enlace de arriba se puede hacer clic. Haga clic en el encabezado vinculado. Debe ir a river2.html que tendrá la segunda imagen Río en él. Compruebe todas las páginas. Si ha introducido una página de enlace incorrecto, simplemente cambiarlo a la correcta.

Consejos y advertencias

  • Guardar cada archivo también como una miniatura, por ejemplo, el rivertrip.jpg más grande puede llegar a ser rivertrip_thumb.jpg en caso de que los necesite. Puede crear una página de destino para sus imágenes, llamado summervacation.html y tienen varias filas de miniaturas para hacer clic. Cada uno debe enlazar a la página de la imagen exacta de su versión más grande. Por ejemplo, haciendo clic en la imagen en miniatura river1_thumb.jpg enviará a los espectadores a river1.html. También puede añadir a cada página un enlace "anterior" y "siguiente" para cada lado de la imagen o como enlaces de cabecera de acercarse a la visualización de fotos de una manera diferente.
ETIQUETA: