Sin embargo, puede preparar la imagen y definir áreas haciendo clic en En Illustrator que luego puede usar en su código web:
1. Prepare su imagen en Illustrator:
* Abra su imagen en Illustrator.
* Asegúrese de que esté en el tamaño y la resolución deseados para su sitio web.
* Vectorice la imagen: Esto lo hace escalable sin perder calidad. Puede hacerlo utilizando la función de traza de imagen (ventana> traza de imagen).
* Grupe todos los elementos: Seleccione todos los elementos de su imagen y agrupe (objeto> grupo) para mantenerlos juntos.
2. Defina las áreas que se pueden hacer clic:
* Use la herramienta de lápiz (P) o las herramientas de forma: Para crear formas precisas para sus áreas en clic.
* Crear una nueva capa: Esto ayuda a organizar los elementos del mapa de imágenes.
* Dibuja las formas encima de tu imagen: Asegúrese de que las formas estén claramente definidas y corresponden a las áreas que desea hacer.
* Nombra tus formas: Esto será útil cuando escriba su código HTML. Use nombres significativos que describan el área, por ejemplo, "Product-1", "About-Us", "Forma de contacto", etc.
3. Exportar la imagen y las formas:
* Exportar la imagen como PNG o JPG: Esta será su imagen principal en su sitio web.
* Exportar las formas como un archivo SVG: Esto contendrá la información sobre sus áreas en clic.
4. Cree el código HTML y JavaScript:
* En su archivo HTML, agregue la etiqueta de imagen para su imagen exportada.
* Use las etiquetas `MAP` y` Área 'para definir las áreas en clic. El atributo `Shape` define el tipo de forma (RECT, Circle, Poly) y el atributo` Coords` define las coordenadas de su forma (consulte el archivo SVG para ver estos valores). El atributo `href` vincula el área a una URL específica.
* Para interacciones más complejas, es posible que deba usar JavaScript para manejar los clics en el mapa de la imagen.
Ejemplo html:
`` `HTML
`` `` ``
recuerda: El código exacto dependerá de sus necesidades específicas y del marco web que esté utilizando. También hay varias herramientas de mapa de imágenes en línea que pueden simplificar el proceso.
Este proceso le permite crear un mapa de imágenes en Illustrator que luego puede usar en su código web, haciendo que sus imágenes interactuaran para los visitantes de su sitio web.