Cómo crear imágenes con secciones seleccionables como la de la captura de pantalla

Se llama un mapa de imagen. tomaría la imagen original en ilustrador y crearía las líneas discontinuas alrededor de cada objeto. luego seleccionaría cada sección cuidadosamente adhiriéndose a los cuadros que creó y ‘cortó’ y copiará cada sección. después de colocar la imagen original en la página, ‘pegaría’ cada sección en el primer plano de la imagen original. asegúrese de guardar la imagen original porque, como puede ver, también la cortará. en este punto tienes la imagen original con las secciones perfectamente colocadas encima. cada sección se puede asignar a través de html para que se pueda hacer clic en ella. esa sección del mapa de imagen, cuando se hace clic creará una ventana emergente. normalmente y con frecuencia, se puede hacer clic en un mapa de imagen para hacer algo simple como crear un correo electrónico o ir a una url diferente. pero en este ejemplo hay un código / html que describe cada sección que es lo suficientemente sofisticada como para crear el enlace de desplazamiento que muestra una miniatura y allí está la URL para obtener más información sobre el producto y comprarlo.

si está utilizando un editor html y, a menudo, incluso en creadores de sitios web de tipo plantilla en línea, puede insertar el html en la ubicación adecuada. puede obtener la codificación, que en realidad es el ‘texto’ html de los sitios web, puede ser libre de copiar y usar o quizás en este caso tenga que pagar un poco por una licencia para usarlo. un editor html profesional que sea una persona, lo haría desde su conocimiento sobre cómo codificar. pero la mayoría de nosotros insertaríamos información en el código existente para lograr esto. Una vez más, en este ejemplo, al pasar el cursor por encima, también aparecen líneas de texto justo debajo de la imagen principal de todos los productos. es una capacidad de aspecto profesional para hacer que una página web haga lo que necesitaría al menos habilidades medias en editores html y creación de sitios web para hacerlo, no es tan difícil. pero toma en cuenta los detalles y algunos experimentos con el código una vez que lo pega. tienes que probarlo mucho a medida que construyes el mapeo de la imagen. una vez que una de las secciones funcione correctamente, las secciones restantes serán mucho más fáciles de agregar correctamente.

una vez que se familiarice con el html en sí mismo, lo que debe hacer para colocar cosas en los sitios web que los clientes desean, comenzará a ver las características de dónde puede adaptar el html a sus necesidades haciendo cambios cuidadosos en las restricciones y dimensionamiento y tal descrito por el lenguaje html. de esa manera, puede copiar el html que ha obtenido que puede crear muy cerca de la ventana emergente que desea, pero que necesitará ser reparado para hacer lo que desea. esto se aprende examinando el texto / texto / código como quiera llamarlo, en el html y haciendo cambios, por ejemplo, en cuanto al tamaño de la ventana y luego cambiando el número del tamaño y luego mirando para ver qué hace cuando Cargue rápidamente y pruebe la página.

hmm claro como el barro eh. crea el ‘mapa’ y cada sección sobre él para que se vea bien. codifique cada sección con html que crea un enlace de desplazamiento. las secciones del mapa de imágenes pueden tener instrucciones simples a través de html, o más bien complejas, como en este ejemplo. Incluso los creadores de sitios web para principiantes pueden pedir, pedir prestado, robar o comprar html para lograrlo. Esta es el área donde comienzas a perfeccionar tus habilidades de construcción web. necesitas aprender qué hace html y ver por qué. tal vez no pueda crearlo en bruto, pero puede usar editores html para experimentar con el ‘texto’ o ‘código’ subyacente. francamente, la mayoría de las personas lo hacen de esta manera. Son raras las personas que pueden crear un sitio web sofisticado completo estrictamente creando HTML sin formato.

Creo que puedes hacer este tipo de cosas con un mapa.

Etiqueta de mapa HTML

Tendría que diseñar las etiquetas del mapa para agregar el borde punteado blanco. Después de eso, tendría que agregar algo de JavaScript que detecte el desplazamiento o haga clic en cada punto de acceso para que pueda mostrar el cuadro de compra y seleccionar el elemento en la lista a continuación.

Tendría que probarlo con una imagen simple primero con un mapa para asegurarse de que todo funciona como era de esperar y luego pasar a una imagen más compleja.