El elemento IMG nos permite incrustar imágenes en documentos HTML.
Para incrustar una imagen, debe usar los atributos SRC y ALT, el código es el siguiente:
<img src = "../ img/ejemplo/img-map.jpg"/>
Efecto de visualización:
1 Incrustar la imagen en el hipervínculo
Un uso común del elemento IMG es crear un hipervínculo basado en imágenes en combinación con el elemento A, el código es el siguiente:
<a href = "otherpage.html"> <img src = "../ img/ejemplo/img-map.jpg" ismap/> </a>
La forma en que muestra el navegador esta imagen no es diferente. Por lo tanto, es importante proporcionar a los usuarios señales visuales que una imagen particular representa un hipervínculo. El enfoque específico puede ser usar CSS, que es mejor expresarlo en el contenido de la imagen.
Si hace clic en esta imagen, el navegador navegará a la URL especificada por el atributo HREF del elemento principal a. La aplicación del atributo ISMAP al elemento IMG crea un mapa de respuesta a la rama del lado del servidor, lo que significa que las ubicaciones en la imagen se conectarán a la URL. Por ejemplo, si la ubicación de clic es de 8 píxeles desde la parte superior de la imagen y 10 píxeles en el borde izquierdo, el navegador navegará a la siguiente dirección:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
El siguiente código muestra el contenido en OtherPage.html, que contiene un script simple para mostrar las coordenadas de la posición de clic:
<body> <p> La coordenada x es <b> <span id = "xco"> ?? </span> </b> </p> <p> La coordenada y-coordinada es <b> <span id = "yco"> ?? </span> </b> </p> <script type = "aplicación/javaScript"> var coords = window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerhtml = coordinates [0]; document.getElementById ("yco"). innerhtml = coordinates [1]; </script> </body>La forma en que muestra el navegador esta imagen no es diferente. Por lo tanto, es importante proporcionar a los usuarios señales visuales que una imagen particular representa un hipervínculo. El enfoque específico puede ser usar CSS, que es mejor expresarlo en el contenido de la imagen.
Si hace clic en esta imagen, el navegador navegará a la URL especificada por el atributo HREF del elemento principal a. La aplicación del atributo ISMAP al elemento IMG crea un mapa de respuesta a la rama del lado del servidor, lo que significa que las ubicaciones en la imagen se conectarán a la URL. Por ejemplo, si la ubicación de clic es de 8 píxeles desde la parte superior de la imagen y 10 píxeles en el borde izquierdo, el navegador navegará a la siguiente dirección:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
El siguiente código muestra el contenido en OtherPage.html, que contiene un script simple para mostrar las coordenadas de la posición de clic:
<body> <p> La coordenada x es <b> <span id = "xco"> ?? </span> </b> </p> <p> La coordenada y-coordinada es <b> <span id = "yco"> ?? </span> </b> </p> <script type = "aplicación/javaScript"> var coords = window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerhtml = coordinates [0]; document.getElementById ("yco"). innerhtml = coordinates [1]; </script> </body>Puede ver el efecto del clic del mouse:
El gráfico de respuesta de partición del lado del servidor generalmente significa que el servidor responderá de manera diferente de acuerdo con el área de clic del usuario en la imagen, como devolver la información de respuesta diferente. Si se omite el atributo ISMAP en el elemento IMG, las coordenadas del clic del mouse no se incluirán en la URL de solicitud.
2 Crear un diagrama de respuesta a la partición del cliente
Podemos crear un mapa de respuesta de partición del cliente y dejar que el navegador navegue a diferentes URL haciendo clic en diferentes áreas en una imagen. Este proceso no requiere arranque a través del servidor, por lo que se utilizan elementos para definir las áreas individuales en la imagen y el comportamiento que representan. El elemento clave del gráfico de respuesta de la partición del cliente es un mapa, que contiene uno o más elementos de área, cada uno que representa un área en la imagen en la que se puede hacer clic.
Las propiedades del elemento de área se pueden dividir en dos categorías. La primera categoría trata de la URL a la que navegará el navegador después de que el usuario haga clic en el área representada por el área. La siguiente figura introduce este tipo de atributo, que es similar a los atributos correspondientes que se ven en otros elementos.
La segunda categoría contiene atributos más interesantes: atributos de forma y coordinación. Estas propiedades se pueden usar para indicar cada área de imagen en la que el usuario puede hacer clic. La forma y las propiedades de las coordinas funcionan juntas. El significado del atributo Coords depende del valor del atributo de forma, como se muestra en la figura a continuación:
Después de introducir estos elementos, da un ejemplo, el código es el siguiente:
<body> <img src = "../ img/ejemplo/img-map.jpg" ismap useMap = "#mymap"/> <map name = "mymap"> <área href = "javascript: show_page (1)" shape = "rect" coords = "'34,60,196,230"/> <seuse href = "javaScript: show_page (2)" shape = "rect" coords = "'' 210,60,370,230" /> <área href = "javascript: show_page (3)" shape = "rect" coords = "'383,60,545,230" /> < /map> show_page (num) {// Mostrar el producto a través del cuadro de diálogo para indicar la alerta de página de salto correspondiente ("Esto es producto"+num); } </script> </body>El efecto de visualización es el mismo, excepto que cuando hace clic en la imagen del producto correspondiente, el nombre del producto correspondiente aparecerá, lo que indica la página del producto saltado.
El artículo anterior JavaScript Basics_Simple Implementación de imágenes integradas es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.