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 builds cluster MongoDB implementation steps

Preface Due to the needs of the company's bus...

Solution to the problem that order by is not effective in MySQL subquery

By chance, I discovered that a SQL statement prod...

HTML+Sass implements HambergurMenu (hamburger menu)

A few days ago, I watched a video of a foreign gu...

HTML hyperlink a tag_Powernode Java Academy

Anyone who has studied or used HTML should be fam...

MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)

Installation environment: CentOS7 64-bit, MySQL5....

How to use regular expression query in MySql

Regular expressions are often used to search and ...

Optimization analysis of Limit query in MySQL optimization techniques

Preface In actual business, paging is a common bu...

20 CSS coding tips to make you more efficient (sorted)

In this article, we would like to share with you ...

Telnet is moved to busybox-extras in Alpine image

The telnet in the Alpine image has been moved to ...

Vue complete code to implement single sign-on control

Here is a Vue single sign-on demo for your refere...

The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10

In order to download this database, it takes a lo...

How to hide rar files in pictures

You can save this logo locally as a .rar file and...

Detailed explanation of the function and usage of DOCTYPE declaration

1. Browser rendering mode and doctype Some web pa...