-
Cómo cambiar un mapa de imagen en HTML a un código CSS
-
Cambio de un mapa de imágenes basada en HTML de código CSS le ofrece todos los beneficios de estilo CSS, como flotando y los efectos de varias capas. Un mapa de imagen CSS es una imagen dividida en secciones, siendo cada uno su propio punto de acceso puede hacer clic. Cada sección puede tener atributos CSS individualizados.
Instrucciones
1 Abra el archivo de código fuente HTML en un editor de texto, como el Bloc de notas de Windows, y eliminar cualquier código existente mapa de imagen HTML.
2 Añadir una división en la que desea que su mapa de imagen que aparezca y darle un ID añadiendo el código:
<Div id = "my_image_map">.
3 Crear una etiqueta "a href" para cada sección del mapa de imagen utilizando el código en el siguiente formato:
<a href="link_url1" id="link1"> </a>
Reemplazar "link_url1" con el enlace de la sección y "vínculo1" con un id de esa sección. Añadir "</ div>" después de que el último eslabón.
Por ejemplo:
<a href="www.myserver.com/page1.html" id="link1"> </a>
<a href="www.myserver.com/page2.html" id="link2"> </a>
<a href="www.myserver.com/page3.html" id="link3"> </a> </ div>
Esto creará tres secciones con enlaces dentro de la imagen, simulando un menú.
4 Añadir CSS para manejar la imagen principal añadiendo el siguiente código en el "<head>" sección del archivo HTML:
<Style type = "text / css">
my_image_map {width: 600px; altura: 600px; background: url (my_image_file.gif) no-repeat; position: relative; }
Vuelva a colocar la anchura y la altura con la de su imagen y reemplazar "my_image_file.gif" con el nombre del archivo de imagen.5 Añadir CSS para definir la visualización y posicionamiento de los enlaces añadiendo el código de estilo:
my_image_map a {display: block; position: absolute;
6} Añadir CSS adicional para manejar cada sección del mapa de imagen mediante la adición de código en el formato de:my_image_map un # vínculo1 {width: 150px; altura: 100px; top: 200px; izquierda: 10px; }
Vuelva a colocar la anchura y la altura con el área de cada sección y vuelva a colocar la parte superior ya la izquierda con la ubicación de la sección desde los bordes de la imagen. Añadir "</ style"> después del último estilo.Por ejemplo:
my_image_map un # vínculo1 {width: 150px; altura: 100px; top: 200px; izquierda: 50px; } #my_image_map Un # vínculo2 {width: 150px; altura: 100px; top: 200px; izquierda: 200px; } #my_image_map Un # link3 {width: 150px; altura: 100px; top: 200px; izquierda: 40px; } </ Style>
7 Guarde el archivo HTML y cargarla en el servidor.
