O elemento IMG nos permite incorporar imagens em documentos HTML.
Para incorporar uma imagem, você precisa usar os atributos SRC e ALT, o código é o seguinte:
<img src = "../ img/exemplo/img-map.jpg"/>
Efeito de exibição:
1 Incorporar a imagem no hiperlink
Um uso comum do elemento IMG é criar um hiperlink baseado em imagem em combinação com o elemento A, o código é o seguinte:
<a href = "outrosPage.html"> <img src = "../ img/exemplo/img-map.jpg" ismap/> </a>
A maneira como o navegador exibe essa imagem não é diferente. Portanto, é importante fornecer aos usuários pistas visuais que uma imagem específica representa um hiperlink. A abordagem específica pode ser usar o CSS, o que é melhor expressá -lo no conteúdo da imagem.
Se você clicar nesta imagem, o navegador navegará para o URL especificado pelo atributo href do elemento pai a. A aplicação do atributo ISMAP ao elemento IMG cria um mapa de resposta de ramificação do lado do servidor, o que significa que os locais clicados na imagem serão anexados ao URL. Por exemplo, se o local de clique for de 8 pixels da parte superior da imagem e 10 pixels na borda esquerda, o navegador navegará para o seguinte endereço:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
O código a seguir mostra o conteúdo em outrosPage.html, que contém um script simples para exibir as coordenadas da posição de clique:
<body> <p> A coordenada x é <b> <span id = "xco"> ?? window.Location.href.split ('?') [1] .split (','); Document.getElementById ("XCO"). Innerhtml = coordenadas [0]; Document.getElementById ("YCO"). Innerhtml = coordenadas [1]; </script> </body>A maneira como o navegador exibe essa imagem não é diferente. Portanto, é importante fornecer aos usuários pistas visuais que uma imagem específica representa um hiperlink. A abordagem específica pode ser usar o CSS, o que é melhor expressá -lo no conteúdo da imagem.
Se você clicar nesta imagem, o navegador navegará para o URL especificado pelo atributo href do elemento pai a. A aplicação do atributo ISMAP ao elemento IMG cria um mapa de resposta de ramificação do lado do servidor, o que significa que os locais clicados na imagem serão anexados ao URL. Por exemplo, se o local de clique for de 8 pixels da parte superior da imagem e 10 pixels na borda esquerda, o navegador navegará para o seguinte endereço:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
O código a seguir mostra o conteúdo em outrosPage.html, que contém um script simples para exibir as coordenadas da posição de clique:
<body> <p> A coordenada x é <b> <span id = "xco"> ?? window.Location.href.split ('?') [1] .split (','); Document.getElementById ("XCO"). Innerhtml = coordenadas [0]; Document.getElementById ("YCO"). Innerhtml = coordenadas [1]; </script> </body>Você pode ver o efeito do clique do mouse:
O gráfico de resposta de partição no lado do servidor geralmente significa que o servidor responderá de maneira diferente de acordo com a área de cliques do usuário na imagem, como retornar diferentes informações de resposta. Se o atributo ISMAP no elemento IMG for omitido, as coordenadas do clique do mouse não serão incluídas no URL da solicitação.
2 Crie um diagrama de resposta de partição do cliente
Podemos criar um mapa de resposta de partição do cliente e deixar o navegador navegar para URLs diferentes clicando em diferentes áreas em uma imagem. Esse processo não requer inicialização através do servidor; portanto, os elementos são usados para definir as áreas individuais na imagem e o comportamento que eles representam. O elemento chave do gráfico de resposta de partição do cliente é um mapa, que contém um ou mais elementos de área, cada um representando uma área na imagem que pode ser clicada.
As propriedades do elemento de área podem ser divididas em duas categorias. A primeira categoria lida com o URL para o qual o navegador navegará após a área de imagem representada pela área ser clicada pelo usuário. A figura a seguir apresenta esse tipo de atributo, que é semelhante aos atributos correspondentes vistos em outros elementos.
A segunda categoria contém atributos mais interessantes: atributos de forma e coordenados. Essas propriedades podem ser usadas para indicar cada área de imagem em que o usuário pode clicar. As propriedades de forma e coordenação funcionam juntas. O significado do atributo Coords depende do valor do atributo de forma, conforme mostrado na figura abaixo:
Depois de apresentar esses elementos, dê um exemplo, o código é o seguinte:
<Body> <img src = "../ img/exemplo/img-map.jpg" ismap usemap = "#mymap"/> <mapa name = "mymap"> <área href = "javascript: show_page (1)" shape = "" records = "'34,60,196,230" shape = "rect" coords = "'210,60,370.230" /> <área href = "javascript: show_page (3)" shape = "ret" coords = "' '383,60,545,230" /> < /map> <script = "Aplicação /javascript"> function_page alerta de página ("Este é o produto"+num); } </script> </body>O efeito de exibição é o mesmo, exceto que, quando você clica na imagem do produto correspondente, o nome do produto correspondente será exibido, indicando a página do produto salto.
O artigo acima JavaScript Basics_simple de imagens incorporadas é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.