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
Preface Due to the needs of the company's bus...
By chance, I discovered that a SQL statement prod...
A few days ago, I watched a video of a foreign gu...
Anyone who has studied or used HTML should be fam...
Installation environment: CentOS7 64-bit, MySQL5....
Regular expressions are often used to search and ...
Preface In actual business, paging is a common bu...
In this article, we would like to share with you ...
The telnet in the Alpine image has been moved to ...
Here is a Vue single sign-on demo for your refere...
In order to download this database, it takes a lo...
1. Create a repository in the specified directory...
You can save this logo locally as a .rar file and...
There are some differences between filter and bac...
1. Browser rendering mode and doctype Some web pa...