Example code for setting hot links and coordinate values ​​for web images

Example code for setting hot links and coordinate values ​​for web images

Sometimes you need to set several areas on a picture. You can enter different pages by clicking on different areas of the picture with the mouse, or you can enter a certain page by clicking on a certain area of ​​the picture. This is the hot link of the web page.

Copy code
The code is as follows:

<img src="test.jpg" usemap="#testmap" alt="test" />
<map name="testmap" id="testmap">
<area shape="circle" coords="180,139,14" href ="test1.html" alt="test1" />
<area shape="circle" coords="129,161,10" href ="test2.html" alt="test2" />
<area shape="rect" coords="0,0,110,260" href ="test3.html" alt="test3" />
</map>

Note: The usemap attribute in <img> can reference either the id or name attribute in <map> (determined by the browser), so we need to add both id and name attributes to <map>

So, how to get this coordinate value?

Method 1: Create a new HTML page and insert the following code in the body:

Copy code
The code is as follows:

<a href="#"><img src="test.jpg" ismap="ismap"></a>

Note this " ismap='ismap '". With this attribute, open this HTML page and move the cursor to any position on the image. The status bar in the lower left corner of the webpage will display the current coordinate value.

This way you can get the coordinate value.

Method 2:

Open Dreamwever, create a new page, insert a picture,

Click the "Rectangle" or other hotspot tools, and then drag the position on the image.

Open the code area again

This has already been generated.

<<:  CSS selects the first child element under the parent element (:first-child)

>>:  The difference and choice between datetime and timestamp in MySQL

Recommend

Docker volumes file mapping method

background When working on the blockchain log mod...

Detailed explanation of slots in Vue

The reuse of code in vue provides us with mixnis....

Detailed explanation of the use of Vue.js render function

Vue recommends using templates to create your HTM...

How to improve Idea startup speed and solve Tomcat log garbled characters

Table of contents Preface Idea startup speed Tomc...

How to use Element in React project

This is my first time using the element framework...

Website design should pay attention to the sense of color hierarchy

Recently I have been saying that design needs to h...

Instructions for using the meta viewport tag (mobile browsing zoom control)

When OP opens a web page with the current firmwar...

Summary of Spring Boot Docker packaging tools

Table of contents Spring Boot Docker spring-boot-...

Implementing timed page refresh or redirect based on meta

Use meta to implement timed refresh or jump of th...

SQL IDENTITY_INSERT case study

Generally speaking, once a column in a data table...

SSM implements the mysql database account password ciphertext login function

introduction Our company is engaged in the resear...

Detailed tutorial on VMware installation of Linux CentOS 7.7 system

How to install Linux CentOS 7.7 system in Vmware,...