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
background When working on the blockchain log mod...
The concept of relative path Use the current file...
123WORDPRESS.COM provides you with the FileZilla ...
The reuse of code in vue provides us with mixnis....
Vue recommends using templates to create your HTM...
Table of contents Preface Idea startup speed Tomc...
Introduction to MySQL logical architecture Overvi...
This is my first time using the element framework...
Recently I have been saying that design needs to h...
When OP opens a web page with the current firmwar...
Table of contents Spring Boot Docker spring-boot-...
Use meta to implement timed refresh or jump of th...
Generally speaking, once a column in a data table...
introduction Our company is engaged in the resear...
How to install Linux CentOS 7.7 system in Vmware,...