The purpose of this article is to explain how to jump to the link and function by clicking a certain area on the image through the hotspot tool in dreamweaver (I thought it was not possible to jump to the function, and later confirmed it was useful ), at the same time, how to insert text boxes (and other things you want) on the image without using the image as the background image ).
The technical points used are hotspot tools and absolute css positioning.
The Code is as follows:
<Style type = "text/css">
# Bjlsh {
Position: absolute; // absolute position of css. This style is used by ID: bjlsh.
Top: 238px; // note that there is no space between the number and "px"; otherwise, an error will occur.
Left: 338px;
}
</Style>
// Skipped
<Body>
<Map name = "Map" id = "Map">
<Area shape = "rect" coords = "866,659,972,704" href = "<% = path %>/cmp-page/bjcx/hallwork_bjcx.jsp"/>
// Use DW to create a hotspot region and link to href
<Area shape = "rect" coords = "633,278,696,345" onclick = "add (1)"/>
// Use DW to create a hotspot region and jump to the required function add ()
</Map>
<Input id = "bjlsh" type = "text" style = "width: 545px; height: 36px; font-size: 30px" value = <% = bjlsh %>/>
// Text box that uses css to locate a specific position on the Image
</Body>
With the combined use of the above technologies, you can easily display a virtual keyboard and dialog box.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
