User interaction hotspot calculation method and system
Through HTML image mapping and JavaScript event processing, hot zones are defined and expanded, the problem of not being able to achieve complex interaction effects in the existing technology is solved, user experience and website interactivity are improved, and diverse needs of web design are met.
Patent Information
- Application Number
- CN202510355910.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-03-25
- Publication Date
- 2025-07-18
AI Technical Summary
The existing technology is difficult to achieve complex interactive effects and cannot meet various web design needs.
Through HTML image mapping and JavaScript event processing, define hot zones on the image, set attribute binding click event handling functions, and expand hot zones of multiple shapes, combining JavaScript libraries or frameworks to provide interactive effects.
It achieves complex interaction effects, improves user experience, enhances marketing effects, improves website interactivity, and meets various web design needs.
Smart Images
Figure CN120336657A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of web development, and more specifically, to a method and system for calculating user interaction hotspots. Background Art
[0002] Current interaction design supports interactive products for people's daily work and life. Specifically, interaction design is about creating new user experiences, aiming to enhance and expand the ways people work, communicate, and interact. Since interaction design emphasizes all-round experiences such as vision, touch, and hearing, how to achieve complex interaction effects and meet various web design requirements is a technical problem that needs to be solved. Summary of the Invention
[0003] The technical task of the present invention is to address the above deficiencies by providing a method and system for calculating user interaction hotspots to solve the technical problem of how to achieve complex interaction effects and meet various web design requirements.
[0004] In a first aspect, a method for calculating user interaction hotspots according to the present invention calculates user interaction hotspots based on HTML image mapping and JavaScript event handling, including the following steps:
[0005] Define image mapping: Define hotspots on an image through HTML tags, set attributes to define the shape and coordinates of the hotspots, and set attributes to bind a click event handling function JavaScript;
[0006] Write a click event handling function: Write a click event handling function JavaScript, and in the click event handling function JavaScript, obtain the coordinates of the hotspot and perform related operations;
[0007] Hotspot expansion: Dynamically create and modify hotspots, expand hotspots of various shapes based on the attributes defining the shape and coordinates of the hotspots, and combine image mapping, click event handling with a JavaScript library or framework to provide interaction effects.
[0008] Preferably, defining image mapping includes the following steps:
[0009] Set the usemap attribute of the image to the same value as the name attribute of the tag;
[0010] Inside the tag, define a hotspot through the tag, the shape attribute specifies the shape of the hotspot, the coords attribute specifies the coordinates of the hotspot, and the onclick attribute specifies the click event handling function JavaScript to be executed when the user clicks on the hotspot.
[0011] Preferably, the click event handling function JavaScript is used to receive an event object as a parameter through the handleClick function, obtain the clicked element by accessing the event.target property, split the value of the coords property into an array by using the split method, convert the strings in the array to integers by using the parseInt method, and use the corresponding coordinate values in the array to perform the required operations.
[0012] Preferably, when expanding the hot zone, the click event handling function JavaScript is used to dynamically add or remove elements to the label, thereby creating or modifying the hot zone as needed.
[0013] Preferably, when expanding the hot zone, various shapes of hot zones are implemented by setting the shape property and the corresponding coords property. The shapes of the hot zones include rectangles, circles, and polygons.
[0014] In a second aspect, a user interaction hot zone calculation system according to the present invention is used to implement user interaction hot zone calculation through a user interaction hot zone calculation method as described in any one of the first aspects. The system includes an image map definition module, a click event handling function writing module, and a hot zone expansion module;
[0015] The image map definition module is used to perform the following: define a hot zone on the image through an HTML label, set attributes to define the shape and coordinates of the hot zone, and set attributes to bind the click event handling function JavaScript;
[0016] The click event handling function writing module is used to perform the following: write the click event handling function JavaScript, and obtain the coordinates of the hot zone and perform related operations in the click event handling function JavaScript;
[0017] The hot zone expansion module is used to perform the following: dynamically create and modify hot zones, expand various shapes of hot zones based on the attributes defining the shape and coordinates of the hot zones, and combine the image map, click event handling, and JavaScript libraries or frameworks to provide an interactive effect.
[0018] Preferably, the image map definition module is used to perform the following operations:
[0019] Set the usemap attribute of the image to the same value as the name attribute of the label;
[0020] Inside the label, define a hot zone through the label. The shape property specifies the shape of the hot zone, the coords property specifies the coordinates of the hot zone, and the onclick property specifies the click event handling function JavaScript to be executed when the user clicks on the hot zone.
[0021] Preferably, the click event handling function JavaScript is used to receive an event object as a parameter through the handleClick function, obtain the clicked element by accessing the event.target property, split the value of the coords property into an array by using the split method, convert the strings in the array to integers by using the parseInt method, and use the corresponding coordinate values in the array to perform the required operations.
[0022] Preferably, the hot zone expansion module is used to dynamically add or delete elements to / from the label by using the click event handling function JavaScript, thereby creating or modifying the hot zone as needed.
[0023] Preferably, the hot zone expansion module is used to implement hot zones of various shapes by setting the shape property and the corresponding coords property. The shapes of the hot zones include rectangles, circles, and polygons.
[0024] The user interaction hot zone calculation method and system of the present invention have the following advantages: Through HTML <map>and <area> The label defines an image map and combines JavaScript to handle the user's click event, implementing an interactive image mapping function. By dynamically creating and modifying hotspots, supporting hotspots of various shapes, and combining with other JavaScript libraries or frameworks, more complex interaction effects can be achieved to meet various web design requirements. BRIEF DESCRIPTION OF THE DRAWINGS
[0025] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following-described drawings are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.
[0026] The present invention will be further described below in conjunction with the drawings.
[0027] Figure 1 It is a flowchart of a user interaction hotspot calculation method for Embodiment 1. DETAILED DESCRIPTION OF THE EMBODIMENTS
[0028] The present invention will be further described below in conjunction with the drawings and specific embodiments, so that those skilled in the art can better understand the present invention and be able to implement it. However, the described embodiments are not intended to limit the present invention. Without conflict, the embodiments of the present invention and the technical features in the embodiments can be combined with each other.
[0029] The embodiments of the present invention provide a user interaction hotspot calculation method and system for solving the technical problem of how to achieve complex interaction effects and meet various web design requirements.
[0030] Embodiment 1:
[0031] A user interaction hotspot calculation method of the present invention calculates user interaction hotspots based on HTML image mapping and JavaScript event handling, including three steps: defining an image map, writing a click event handling function, and hotspot expansion.
[0032] Step S100 defines an image map: defines hotspots on the image through the <map> tag of HTML, sets attributes to define the shape and coordinates of the hotspots, and sets attributes to bind the click event handling function JavaScript.
[0033] As a specific implementation of defining an image map, this step includes the following operations:
[0034] (1) Set the usemap attribute of the image to the same value as the name attribute of the <map> tag;
[0035] (2) Inside the label, define a hot area through the label. The shape attribute specifies the shape of the hot area, the coords attribute specifies the coordinates of the hot area, and the onclick attribute specifies the click event handling function JavaScript to be executed when the user clicks on the hot area.
[0036] Step S200 Write a click event handling function: Write a JavaScript click event handling function. In the JavaScript click event handling function, obtain the coordinates of the hot area and perform related operations.
[0037] The JavaScript click event handling function is used to receive an event object as a parameter through the handleClick function, obtain the clicked element by accessing the event.target property, split the value of the coords attribute into an array by using the split method, convert the strings in the array to integers by using the parseInt method, and use the corresponding coordinate values in the array to perform the required operations.
[0038] Example code:
[0039] function handleClick(event){
[0040] var target = event.target; / / Obtain the clicked target element
[0041] var coords = target.coords.split(','); / / Obtain the coordinates of the hot area and split them into an array
[0042] var x1 = parseInt(coords[0], 10);
[0043] var y1 = parseInt(coords[1], 10);
[0044] var x2 = parseInt(coords[2], 10);
[0045] var y2 = parseInt(coords[3], 10);
[0046] / / Write the code to handle the click event here
[0047] / / For example, the coordinates of the hot area can be displayed or other operations can be performed
[0048] alert('You clicked on the hot area, coordinates: (' + x1 + ',' + y1 + ') to (' + x2 + ',' + y2 + ')');
[0049] }
[0050] In the above code, the handleClick function receives an event object as a parameter. By accessing the event.target property, the element that was clicked can be obtained. Then, the split method is used to split the value of the coords property into an array, and the parseInt method is used to convert the strings in the array to integers. Finally, these coordinate values can be used to perform the required operations.
[0051] Step S300 Hot Zone Expansion: Dynamically create and modify hot zones, expand hot zones of various shapes based on attributes defining the hot zone shape and coordinates, and combine image mapping, click event handling with a JavaScript library or framework to provide an interactive effect.
[0052] When expanding the hot zone, use the click event handling function in JavaScript to dynamically add or remove elements from the label, thereby creating or modifying the hot zone as needed.
[0053] Implement hot zones of various shapes by setting the shape attribute and the corresponding coords attribute. The shapes of the hot zones include rectangles, circles, and polygons.
[0054] In addition to basic click event handling, this embodiment can also implement more advanced functions. Dynamically create and modify hot zones: Use JavaScript to dynamically add or remove elements from the label, thereby creating or modifying the hot zone as needed. Support hot zones of various shapes: In addition to rectangles, hot zones of circle and poly shapes can also be used. This needs to be achieved by setting the shape attribute and the corresponding coords attribute. Combine with other JavaScript libraries or frameworks: Combine image mapping and event handling with popular JavaScript libraries (such as jQuery) or frameworks (such as React, Vue, etc.) to achieve more complex interactive effects.
[0055] The method of this embodiment can be used to create an interactive image map on a web page. By combining the functions of HTML and JavaScript, various complex interactive effects can be easily achieved. The method provides the following values:
[0056] (1) Improve user experience: By setting hot zones on the image, the company can provide users with a more intuitive and interactive web experience. Users only need to click on a specific area of the image to trigger the corresponding operation or obtain the required information, thereby increasing user participation and satisfaction.
[0057] (2) Enhance marketing effectiveness: Using hotspot interaction in product displays, advertisements, or promotional posters can guide users to focus on important information or promotional content. Through data analysis, the company can understand the frequency and preferences of users clicking on hotspots, and then optimize marketing strategies to increase conversion rates.
[0058] (3) Improve website interactivity: Hotspot interaction adds more interactive elements to the website, making the website more vivid and interesting. This helps to attract users' attention, extend the time users stay on the website, and thus increase website traffic and stickiness.
[0059] Example 2:
[0060] A user interaction hotspot calculation system of the present invention includes an image map definition module, a click event handling function writing module, and a hotspot extension module.
[0061] The image map definition module is used to perform the following: Define hotspots on the image through HTML tags, set attributes to define the shape and coordinates of the hotspots, and set attributes to bind the click event handling function JavaScript.
[0062] As a specific implementation of the image map definition module, this module is used to perform the following operations:
[0063] (1) Set the usemap attribute of the image to the same value as the name attribute of the tag;
[0064] (2) Inside the tag, define hotspots through the tag, the shape attribute specifies the shape of the hotspot, the coords attribute specifies the coordinates of the hotspot, and the onclick attribute specifies the click event handling function JavaScript to be executed when the user clicks on the hotspot.
[0065] The click event handling function writing module is used to perform the following: Write the click event handling function JavaScript, and in the click event handling function JavaScript, obtain the coordinates of the hotspot and perform related operations.
[0066] The click event handling function JavaScript is used to receive an event object as a parameter through the handleClick function, obtain the element clicked by accessing the event.target property, split the value of the coords attribute into an array by using the split method, convert the strings in the array to integers by using the parseInt method, and use the corresponding coordinate values in the array to perform the required operations.
[0067] Example code:
[0068] function handleClick(event){
[0069] var target = event.target; / / Get the target element that was clicked
[0070] var coords = target.coords.split(','); / / Get the coordinates of the hot zone and split them into an array
[0071] var x1 = parseInt(coords[0], 10);
[0072] var y1 = parseInt(coords[1], 10);
[0073] var x2 = parseInt(coords[2], 10);
[0074] var y2 = parseInt(coords[3], 10);
[0075] / / Write the code to handle the click event here
[0076] / / For example, you can display the coordinates of the hot zone or perform other operations
[0077] alert('You clicked on the hot zone, coordinates from: (' + x1 + ',' + y1 + ') to (' + x2 + ',' + y2 + ')');
[0078] }
[0079] In the above code, the handleClick function receives an event object as a parameter. By accessing the event.target property, the element that was clicked can be obtained. Then, the split method is used to split the value of the coords property into an array, and the parseInt method is used to convert the strings in the array to integers. Finally, these coordinate values can be used to perform the required operations.
[0080] The hot zone extension module is used to perform the following: dynamically create and modify hot zones, extend hot zones of multiple shapes based on attributes that define the shape and coordinates of the hot zones, and combine image mapping, click event handling with a JavaScript library or framework to provide an interactive effect.
[0081] In this embodiment, the hot zone extension module is used to dynamically add or remove elements to / from a label using a click event handling function in JavaScript, thereby creating or modifying hot zones as needed. It is used to implement hot zones of multiple shapes by setting the shape attribute and the corresponding coords attribute. The shapes of the hot zones include rectangles, circles, and polygons.
[0082] The system of this embodiment can execute the method disclosed in Embodiment 1 to implement user interaction hot zone calculation.
[0083] The method and system for calculating user interaction hot zones provided by the present invention have been introduced in detail above. Specific examples are used in this article to elaborate on the principle and implementation manner of the present invention. The description of the above embodiments is only used to help understand the method and its core idea of the present invention; at the same time, for those of ordinary skill in the art, according to the idea of the present invention, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation of the present invention.< / map>
Claims
1. A method for calculating user interaction hot zones, characterized in that Calculating user interaction hotspots based on HTML image maps and JavaScript event handling, including the following steps: Defining an image map: Defining hotspots on an image through HTML tags, setting attributes to define the shape and coordinates of the hotspots, and setting attributes to bind a click event handling function JavaScript; Writing a click event handling function: Writing a click event handling function JavaScript, and in the click event handling function JavaScript, obtaining the coordinates of the hotspots and performing related operations; Hotspot expansion: Dynamically creating and modifying hotspots, expanding hotspots of various shapes based on the attributes defining the shape and coordinates of the hotspots, and combining the image map, click event handling with a JavaScript library or framework to provide an interactive effect.
2. The user interaction hot zone calculation method according to claim 1, characterized in that Defining an image map includes the following steps: Setting the usemap attribute of the image to the same value as the name attribute of the tag; Inside the tag, defining a hotspot through the tag, with the shape attribute specifying the shape of the hotspot, the coords attribute specifying the coordinates of the hotspot, and the onclick attribute specifying the click event handling function JavaScript to be executed when the user clicks on the hotspot.
3. The user interaction hot zone calculation method according to claim 2, wherein The click event handling function JavaScript is used to receive an event object as a parameter through the handleClick function, obtain the element that was clicked by accessing the event.target property, split the value of the coords attribute into an array using the split method, convert the strings in the array to integers using the parseInt method, and use the corresponding coordinate values in the array to perform the required operations.
4. The user interaction hot zone calculation method according to claim 2 or 3, characterized in that When expanding hotspots, use the click event handling function JavaScript to dynamically add or delete elements from the tag, thereby creating or modifying hotspots as needed.
5. The user interaction hot zone calculation method according to claim 2 or 3, characterized in that, When expanding hotspots, various shapes of hotspots are implemented by setting the shape attribute and the corresponding coords attribute. The shapes of the hotspots include rectangles, circles, and polygons.
6. A user interaction hot zone calculation system, characterized in that, For implementing user interaction hotspot calculation through a user interaction hotspot calculation method as described in any one of claims 1-5, the system includes an image map definition module, a click event handling function writing module, and a hotspot expansion module; The image map definition module is used to perform the following: Defining hotspots on an image through HTML tags, setting attributes to define the shape and coordinates of the hotspots, and setting attributes to bind a click event handling function JavaScript; The click event handling function writing module is used to perform the following: Writing a click event handling function JavaScript, and in the click event handling function JavaScript, obtaining the coordinates of the hotspots and performing related operations; The hotspot expansion module is used to perform the following: Dynamically creating and modifying hotspots, expanding hotspots of various shapes based on the attributes defining the shape and coordinates of the hotspots, and combining the image map, click event handling with a JavaScript library or framework to provide an interactive effect.
7. The user interaction hot zone calculation system according to claim 6, characterized in that The image map definition module is used to perform the following operations: Set the usemap attribute of the image to the same value as the name attribute of the label; Inside the label, define a hot area through the label. The shape attribute specifies the shape of the hot area, the coords attribute specifies the coordinates of the hot area, and the onclick attribute specifies the click event handling function JavaScript to be executed when the user clicks on the hot area.
8. The user interaction hot zone calculation system according to claim 7, characterized in that, The click event handling function JavaScript is used to receive an event object as a parameter through the handleClick function, obtain the clicked element by accessing the event.target property, split the value of the coords attribute into an array by using the split method, convert the strings in the array to integers by using the parseInt method, and use the corresponding coordinate values in the array to perform the required operations.
9. The user interaction hot zone calculation system according to claim 7 or 8 or as described above, wherein The hot area extension module is used to dynamically add or remove elements to the label using the click event handling function JavaScript, thereby creating or modifying hot areas as needed.
10. The user interaction hot zone calculation system according to claim 7 or 8 or as described above, characterized in that, The hot area extension module is used to implement hot areas of various shapes by setting the shape attribute and the corresponding coords attribute. The shapes of the hot areas include rectangles, circles, and polygons.