CN112507268A - Method, device and equipment for configuring hot zone of webpage picture and readable storage medium - Google Patents
Method, device and equipment for configuring hot zone of webpage picture and readable storage medium Download PDFInfo
- Publication number
- CN112507268A CN112507268A CN202011423805.9A CN202011423805A CN112507268A CN 112507268 A CN112507268 A CN 112507268A CN 202011423805 A CN202011423805 A CN 202011423805A CN 112507268 A CN112507268 A CN 112507268A
- Authority
- CN
- China
- Prior art keywords
- hot zone
- hot
- area
- data
- picture
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 46
- 238000003860 storage Methods 0.000 title claims abstract description 14
- 230000000007 visual effect Effects 0.000 claims description 31
- 238000004590 computer program Methods 0.000 claims description 11
- 238000003825 pressing Methods 0.000 claims description 11
- 238000012217 deletion Methods 0.000 claims description 10
- 230000037430 deletion Effects 0.000 claims description 10
- 230000009191 jumping Effects 0.000 claims description 6
- 230000000694 effects Effects 0.000 abstract description 7
- 238000005520 cutting process Methods 0.000 abstract description 3
- 238000004364 calculation method Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 238000012800 visualization Methods 0.000 description 3
- 230000006872 improvement Effects 0.000 description 2
- 230000002040 relaxant effect Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004883 computer application Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000006073 displacement reaction Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000000977 initiatory effect Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9558—Details of hyperlinks; Management of linked annotations
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
Abstract
The invention discloses a webpage picture hot area configuration method, which takes a webpage picture of a hot area to be configured as a background picture so that a user can visually and freely designate a hot area range, and further can configure a plurality of jump links at different positions in the designated hot area range, thereby meeting the requirements of realizing multi-address jump and multi-branch shunt on the premise of keeping the integrity of pictures without cutting and splicing the pictures, eliminating the technical limitation that the jump links for configuring the webpage picture can only correspond to one jump link, and achieving better popularization effect. The invention also discloses a device and equipment for configuring the hot zone of the webpage picture and a readable storage medium, and the device and the equipment have corresponding technical effects.
Description
Technical Field
The invention relates to the technical field of networks, in particular to a method, a device and equipment for configuring a hot zone of a webpage picture and a readable storage medium.
Background
In internet web pages, some pictures, such as advertisement pictures, are often configured for the needs of page splitting, web page benefit improvement, and the like, and some skip links are often configured on the pictures for forwarding the browsing volume.
At present, the web page picture in an area is usually configured into a plurality of pictures, for example, a line 2 or a line multiple, and a jump link is configured on each web page picture, so as to achieve the purpose that a web page picture area can be configured with multiple addresses.
However, according to the technical scheme, integrity of the page is damaged, for example, the page looks incomplete (the pictures need to be cut and then spliced), the range of the click area is single, for example, the pictures are multiple in a line, and each link is also in the size range of a single picture, so that the drainage effect is further reduced; for a picture needing multi-address jumping, the picture needs to be cut and then spliced, the picture looks incomplete, and user experience is poor.
In summary, how to optimize the configuration of the webpage image jump link is a technical problem that needs to be solved urgently by those skilled in the art at present.
Disclosure of Invention
The invention aims to provide a method, a device and equipment for configuring a webpage picture hot zone and a readable storage medium, which can visually configure a plurality of different jump links in the same picture range so as to achieve the purpose of better popularization or use.
In order to solve the technical problems, the invention provides the following technical scheme:
a webpage picture hot zone configuration method comprises the following steps:
after receiving a hot zone configuration request, determining a webpage picture of a hot zone to be configured;
taking the webpage picture as a background picture, and performing visual editing on the webpage picture to obtain a visual editing area;
receiving a hot zone designated by a user in the visual editing zone, and determining hot zone range data corresponding to the hot zone;
receiving at least two jump positions and corresponding jump links designated in the hot zone range data as jump link data;
saving the hot area range data and the jump link data;
and after the webpage corresponding to the webpage picture is started, performing hotspot user service according to the hotspot range data and the jump link data.
Optionally, in the visual editing area, receiving a hot zone specified by a user, and determining hot zone range data corresponding to the hot zone, the method includes:
recording coordinate values of first pressing and first releasing of a mouse button in the visual editing area to obtain coordinate values of a pressed point and coordinate values of a released point;
and determining hotspot range data according to the coordinate value of the pressed point and the coordinate value of the relaxation point.
Optionally, determining the hot zone range data according to the coordinate values of the pressed point and the coordinate values of the relaxed point includes:
and determining the coordinates of the starting point of the hot zone and the width and the height of the hot zone according to the coordinate values of the pressed point and the coordinate values of the relaxed point to serve as the range data of the hot zone.
Optionally, in the visual editing area, coordinate values of first pressing and first releasing of a mouse button are recorded, including:
recording a coordinate value pressed for the first time when the mouse is detected to be pressed for the first time;
when the mouse is detected to move after being pressed for the first time, the real-time position of the mouse is obtained;
and generating a hot area preview graph which changes along with the movement of the mouse according to the position difference between the real-time position and the coordinate value pressed for the first time.
Optionally, before the saving the hotspot range data and the jump link data, the method further includes:
after receiving a hot zone or hot zone link deletion request, determining hot zone data to be deleted; the hot zone data comprises the hot zone range data and the jump link data;
and executing deletion operation on the hot area data to be deleted.
Optionally, after receiving the jump click address and the corresponding jump link specified in the hot zone range data, the method further includes:
if a hot zone adding request is received, recording coordinate values of first pressing and releasing of a mouse button in the visual editing area to obtain coordinate values of a pressing point and coordinate values of a releasing point;
accordingly, the uploading the hot zone range data and the jump link data comprises: and uploading the hot zone range data and the jump link data corresponding to each hot zone.
Optionally, after the web page corresponding to the web page picture is started, performing hotspot user service according to the hotspot range data and the jump link data, including:
generating a corresponding hot area in the webpage picture according to the hot area range data, and generating a corresponding jump link in the hot area according to the jump link data;
when the mouse of the user is detected to move to the hot area, the mouse of the user is converted into a clickable state;
and if the condition that the user clicks the jump link is detected, jumping to a webpage corresponding to the jump link clicked by the user.
A web page picture hot zone configuration device, comprising:
the request receiving unit is used for determining the webpage pictures of the hot area to be configured after receiving the hot area configuration request;
the visual setting unit is used for carrying out visual editing on the webpage picture by taking the webpage picture as a background picture to obtain a visual editing area;
the hot area specifying unit is used for receiving a hot area specified by a user in the visual editing area and determining hot area range data corresponding to the hot area;
a connection determining unit, configured to receive at least two jump positions and corresponding jump links specified in the hot zone range data as jump link data;
the data uploading unit is used for storing the hot area range data and the jump link data;
and the hot zone service unit is used for carrying out hot zone user service according to the hot zone range data and the jump link data after the webpage corresponding to the webpage picture is started.
A web page picture hotspot configuration device, comprising:
a memory for storing a computer program;
and the processor is used for realizing the steps of the webpage picture hot area configuration method when the computer program is executed.
A readable storage medium, on which a computer program is stored, which, when executed by a processor, implements the steps of the above-mentioned web page picture hot area configuration method.
By applying the method provided by the embodiment of the invention, the webpage picture of the hot area to be configured is taken as the background picture, so that a user can visually and freely designate the hot area range, and then a plurality of jump links can be configured at different positions in the designated hot area range, thereby meeting the requirements of realizing multi-address jump and multi-branch flow on the premise of keeping the integrity of the pictures without cutting and splicing the pictures, eliminating the technical limitation that the jump links are configured by the webpage picture and can only correspond to one jump link, and achieving better popularization effect.
Accordingly, embodiments of the present invention further provide a device, an apparatus, and a readable storage medium for configuring a web page picture hot zone corresponding to the method for configuring a web page picture hot zone, which have the above technical effects and are not described herein again.
Drawings
In order to more clearly illustrate the embodiments of the present invention or technical solutions in related arts, the drawings used in the description of the embodiments or related arts will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a flowchart illustrating an embodiment of a method for configuring a hot zone of a web page image according to the present invention;
fig. 2 is a schematic structural diagram of a device for configuring a hot zone of a web page picture according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a device for configuring a hot zone of a web page picture according to an embodiment of the present invention.
Detailed Description
The core of the invention is to provide a method for configuring the hot zone of the webpage picture, which can visually configure a plurality of different jump links in the same picture range, thereby achieving the purpose of better popularization or use.
In order that those skilled in the art will better understand the disclosure, the invention will be described in further detail with reference to the accompanying drawings and specific embodiments. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1, fig. 1 is a flowchart illustrating a method for configuring a hot zone of a web page picture according to an embodiment of the present invention, the method including the following steps:
s101, determining a webpage picture of a hot area to be configured after receiving a hot area configuration request;
the method includes initiating a hot zone configuration request, uploading a web page picture, and taking the currently uploaded picture as the web page picture of the hot zone to be configured; the method includes uploading a webpage picture (which may be an advertisement picture or a publicity picture, and is not limited herein) of a hot zone to be configured, then triggering a hot zone configuration request for the uploaded picture, directly taking the uploaded specified webpage picture as the webpage picture of the hot zone to be configured, for example, a merchant or a website operates in a background management page (for example, website banner management) of the merchant or the website, clicking banner (a picture name) to upload, and after the picture is uploaded, clicking a hot zone configuration operation by a user to trigger the hot zone configuration request. In this embodiment, only the above implementation manner is described as an example, and other implementation manners can refer to the description of this embodiment and are not described herein again.
S102, taking the webpage picture as a background picture, and performing visual editing on the webpage picture to obtain a visual editing area;
after the hot area configuration is triggered, a visual editing popup window is opened on the webpage, an area drawn by the hot area is arranged in the popup window, and a background picture of the area is a webpage picture of the hot area to be configured, so that the hot area configuration and picture preview can be carried out based on the background picture.
S103, receiving a hot area designated by a user in the visual editing area, and determining hot area range data corresponding to the hot area;
in this embodiment, the determining method of the hot area range is not limited, and the hot area range may be determined in an automatically specified manner, for example, by predetermining several drawing manners of the hot area range, in a drawing manner of the hot area range specified by a user, specifically, for example, setting a drawing manner of equally scored nine-grid hot area ranges, configuring different jumps in each nine-grid range, and achieving a mode of configuring and connecting multiple positions of one picture by fixing the hot area range; in addition, the hot zone range can also be set by user self-defining, for example, the user moves a mouse in the hot zone drawing area, and the selected area is pressed and relaxed for the first time in the hot zone drawing area by a mouse button as the hot zone range. In this embodiment, only the two implementation manners are described as an example, and other implementation manners can refer to the description of this embodiment and are not described herein again.
S104, receiving at least two jump positions and corresponding jump links designated in the hot zone range data as jump link data;
after the hot area drawing is finished, a new hot area corresponding address input box is automatically generated, the user can fill the jump position and the jump link (any number of the jump links can be set) corresponding to the drawn hot area, and after the input is finished, the jump position and the jump link are used as jump link data and stored in the corresponding hot area data. The hot zone link addition part of the page can be generated in real time according to the data cycle of the hot zone to ensure that the hot zone corresponds to the corresponding hot zone data one to one.
The above is an implementation manner for setting one hot zone, in addition, multiple hot zones may be set in one picture according to actual use requirements, after setting one hot zone is completed, a hot zone adding option may be set, and if a user clicks the option, and the system receives a hot zone adding request, the adding of the second, third, and even nth hot zones may be implemented according to the above steps, and the adding step of each hot zone may refer to the description of the above steps, and is not described herein again.
It should be noted that, in order to facilitate management of the hot zones, corresponding hot zone IDs may be set (in sequence) for each hot zone, so as to distinguish between different hot zone data through the hot zone IDs, and improve management efficiency of the hot zone data. After all hot areas are drawn, hot area data of the page cache can be submitted, wherein the hot area data comprises range data corresponding to each hot area and corresponding jump link data, so that response calling of subsequent user services can be facilitated.
S105, storing hot area range data and jump link data;
data generated in the process of editing the picture hot zone configuration of the web page is generally cached in the web page, and in order to ensure normal calling of subsequent user services, the data needs to be fixedly stored in a memory space that can be called by the web page.
Further, before saving the hot-zone range data and the jump link data, the following steps may be further performed:
(1) after receiving a hot zone or hot zone link deletion request, determining hot zone data to be deleted; the hot area data comprises hot area range data and jump link data;
(2) and executing deletion operation on the hot zone data to be deleted.
No matter the hot area part or the hot area link part can be further provided with a deleting function, the deletion of the whole hot area can be directly initiated, the deletion of range data and jump link data in the hot area can also be initiated, the deleting button of each hot area is associated with own data, after the deleting button is detected to be clicked by a user, the hot area data corresponding to the deletion is searched and deleted in the cached hot area data according to the specified data item, the deletion of the associated data can be carried out when the hot area data is deleted, for example, after the position data of the hot area link is deleted, the link corresponding to the position can be deleted, and for example, after the whole hot area is deleted, all the data corresponding to the hot area can be deleted.
And S106, after the webpage corresponding to the webpage picture is started, performing hotspot user service according to the hotspot range data and the jump link data.
The hot area range data indicates the number and the position of hot areas in the webpage picture, the jump link data indicates the number and the position of jump links in the hot areas, corresponding output setting is carried out in the webpage picture according to the hot area range data and the jump link data, corresponding hot area and non-hot area ranges are distinguished and displayed in the webpage picture, clickable jump links and non-clickable areas are distinguished and displayed, and corresponding operation is executed after user operation is received. Specifically, in this embodiment, a specific implementation process of performing the hotspot user service based on the determined hotspot range and the jump link data is not limited, and reference may be made to the description of related implementation technologies.
In order to facilitate the user to distinguish the hot zone from the non-hot zone, an implementation manner of performing the hot zone user service according to the hot zone range data and the jump link data is as follows:
(1) generating a corresponding hot area region in the webpage picture according to the hot area range data, and generating a corresponding jump link in the hot area region according to the jump link data;
(2) when the mouse of the user is detected to move to the hot area, the mouse of the user is converted into a clickable state;
(3) and if the condition that the user clicks the jump link is detected, jumping to a webpage corresponding to the jump link clicked by the user.
After the user opens the configured advertisement page, the page acquires hot area data stored in the background, generates a hot area of a corresponding position according to the coordinate data of the hot area relative to the hot area graph, and adds a jump link configured correspondingly to the hot area.
After the user moves to the hot area position by using the mouse, the mouse becomes a clickable state, the user knows that the hyperlink is available for jumping, and the user can jump to the jump link address configured by the merchant after clicking. The user experience can be improved under the configuration. In this embodiment, only the implementation of the hot zone user service is described as an example, and other implementation of the user service based on the hot zone data (hot zone range data and jump link data) can refer to the description of this embodiment, which is not described herein again.
By applying the technical scheme provided by the embodiment of the invention, the webpage picture of the hot area to be configured is taken as the background picture, so that a user can visually and freely designate the hot area range, and then a plurality of jump links can be configured at different positions in the designated hot area range, thereby realizing multi-address jump and multi-branch flow distribution on the premise of keeping the integrity of the pictures without cutting and splicing the pictures, eliminating the technical limitation that the jump links for configuring the webpage picture can only correspond to one jump link, and achieving better popularization effect.
It should be noted that, based on the above embodiments, the embodiments of the present invention also provide corresponding improvements. In the preferred/improved embodiment, the same steps as those in the above embodiment or corresponding steps may be referred to each other, and corresponding advantageous effects may also be referred to each other, which are not described in detail in the preferred/improved embodiment herein.
In the foregoing embodiment, a specific implementation manner of receiving a hot zone specified by a user in a visual editing area and determining hot zone range data corresponding to the hot zone is not limited, but an implementation manner is described in this embodiment, which is specifically as follows:
(1) recording coordinate values of first pressing and first releasing of a mouse button in the visual editing area to obtain coordinate values of a pressed point and coordinate values of a released point;
the user moves the mouse in the hot zone drawing area, and the selected area is pressed and relaxed for the first time in the hot zone drawing area by the mouse button to serve as the hot zone range. However, the specific implementation manner of first pressing and first relaxing the coordinate values of the mouse button needs to be recorded first, and the first pressed coordinate values and the first relaxing coordinate values are determined, which is not limited in this embodiment, and for deepening understanding, a specific implementation manner may be introduced herein with reference to the implementation manner of the related art, and includes the following steps: when a user needs to configure a hot area point and the mouse stops, the user presses a left mouse button (not to release), at this time, a js (JavaScript for short) MouseDown event is triggered, a code records the current mouse, and a webpage fixed point coordinate calculation mode is adopted relative to a coordinate value of the upper left corner of a hot area picture: consistency, top ═ document. Current coordinate calculation mode of the mouse: clientX and clientY values in the MouseEvent object. And calculating a relative coordinate value of the starting point position of the mouse in the hot area picture, wherein an x-axis coordinate is a left value of the current point position of the mouse relative to the webpage-a left value of the top left corner vertex of the picture relative to the webpage, a y-axis coordinate is a top value of the current point position of the mouse relative to the webpage-a top value of the top left corner vertex of the picture relative to the webpage, and the page caches the relative coordinate as a coordinate value of the pressed point. And when the user determines the mouse drop point, releasing the left mouse button, triggering a js MouseUp event, and recording the coordinate value of the current mouse release point according to the implementation mode.
Furthermore, in order to conveniently check the selected hot area range, the mouse moves in the drawing area to select the hot area range, and meanwhile, the preview graph can be generated according to the moving real-time position of the mouse, so that the user can see which ranges are selected by the user mouse in real time, the user can conveniently select the hot area range, and the user experience is improved.
Correspondingly, in the visual editing area, the process of recording the coordinate values of the first pressing and the first releasing of the mouse button may specifically include the following steps:
(1.1) recording a coordinate value pressed for the first time after the mouse is detected to be pressed for the first time;
(1.2) when detecting that the mouse moves after being pressed for the first time, acquiring the real-time position of the mouse;
and (1.3) generating a hot zone preview graph which changes along with the movement of the mouse according to the position difference between the real-time position and the coordinate value pressed for the first time.
However, the specific implementation manner of generating the preview graph in real time according to the position where the mouse moves in real time after the mouse is pressed for the first time is not limited in this embodiment, and for further understanding, one implementation manner is introduced as follows:
when the mouse is detected to be pressed down for the first time, a jsMouseMOVE event is triggered, the current position of the mouse can be obtained in real time, the direct width-height distance difference between the current position and the position of the starting point of the previous cache can be obtained continuously through calculation, wherein the width is an absolute value (the left value of the current point position of the mouse relative to the webpage-the left value of the top left corner vertex of the picture relative to the webpage-the x-axis coordinate of the cache coordinate), and the height is an absolute value (the top value of the current point position of the mouse relative to the webpage-the top left corner vertex of the picture relative to the webpage-the x-axis coordinate of the cache coordinate).
And the starting point of the real-time hot area display is judged according to the cache coordinate point and the current point of the mouse, the point which is closer to the top left vertex of the picture is taken as the starting point coordinate, and then a hot area preview graph which moves along with the mouse can be generated in the drawing area in real time according to the starting point coordinate value of the real-time hot area and the width and height after the displacement calculated by the mouse in real time, so that a user can see which ranges are selected by the mouse in real time.
(2) And determining the hot area range data according to the coordinate values of the pressed point and the coordinate values of the relaxation point.
The hot area range data may be determined according to the coordinate values of the pressed point and the relaxation point, and the data items specifically included in the hot area range data are not limited in this embodiment and may include coordinates, widths, heights, four boundary lines, and the like of four vertices of the hot area, and the configuration of the specific information items may be set according to the needs of subsequent calculations. Wherein, the coordinates of the hot zone starting point, the width and the height of the hot zone can be determined according to the coordinate values of the pressed point and the coordinate values of the relaxed point, and are used as hot zone range data to deepen understanding, an implementation of determining hot zone range data is introduced, where the width is an absolute value (left value of the mouse end point position relative to the web page-left value of the picture top left vertex relative to the web page-cache coordinate x-axis coordinate), the height is an absolute value (top value of the mouse end point relative to the web page-top value of the picture top left vertex relative to the web page-cache coordinate x-axis coordinate), the starting point of the final hot zone is determined according to the cache coordinate point and the mouse end point, and who is closer to the top left vertex of the picture is taken as the starting point coordinate, the implementation manner of determining other range data can refer to the description of the embodiment, and is not described herein again.
For further understanding, in the present embodiment, for a user side implementation process based on the above webpage picture hot zone configuration method, the hot zone configuration is implemented through a user side operation, which is specifically as follows:
firstly, a merchant or website operation can upload an advertisement picture of a webpage of the merchant or the website operation;
after uploading the advertisement pictures, a merchant or a website operates to open a visual editing window, and the base map is the previously uploaded advertisement pictures;
the method comprises the steps that a user operates a mouse in a drawing area of a hot area, clicks a mouse button (the mouse button cannot be released before the hot area range is selected), the point is the starting point of the hot area, then the mouse is dragged, the hot area range formed when the user drags the mouse is displayed in a popup window in real time, after the user releases the mouse button, the previously selected mouse range is the set hot area range, a page can memorize the left side of the upper left corner of the currently drawn hot area and the length and width of the hot area in a cache mode, and the data can position the position of the hot area drawn by the user on a picture;
when a user needs to configure a plurality of hot areas, the operation is the same as the above, theoretically, the hot areas can have the possibility of crossing, but in order to promote and confirm a jump address in a range, 2 hot areas with crossing and overlapping ranges are not recommended to be drawn, and the hot areas can be deleted after being drawn;
after the hot area is drawn, an editing area of a hot area link address is arranged below the hot area editing area of the picture, a new hot area corresponding address input box is automatically generated after each hot area is drawn, jump links corresponding to the drawn hot area are filled, and each hot area coordinate data and the corresponding jump links are cached in a page;
after drawing all the hot areas, submitting hot area data cached in the page, wherein the hot area data comprises a coordinate address corresponding to each hot area and corresponding jump link data, and the configuration of the operation side of the merchant is completed;
in the aspect of the user side, after the user opens the configured advertisement page, the page acquires hot area drawing data stored in the background, generates a hot area of a corresponding position according to the coordinate data, and adds a jump link configured correspondingly to the hot area;
after the user moves to the hot area position by using the mouse, the mouse becomes a clickable state, the user knows that the hyperlink is available for jumping, and the user can jump to the jump link address configured by the merchant after clicking.
Corresponding to the above method embodiments, the embodiments of the present invention further provide a device for configuring a web page picture hot zone, where the device for configuring a web page picture hot zone described below and the method for configuring a web page picture hot zone described above may be referred to in a corresponding manner.
Referring to fig. 2, the apparatus includes the following modules:
the request receiving unit 110 is mainly used for determining a web page picture of a hot zone to be configured after receiving a hot zone configuration request;
the visualization setting unit 120 is mainly configured to perform visualization editing on the web page picture by using the web page picture as a background picture to obtain a visualization editing area;
the hot zone specifying unit 130 is mainly configured to receive a hot zone specified by a user in the visual editing zone, and determine hot zone range data corresponding to the hot zone;
the connection determining unit 140 is mainly configured to receive at least two jump positions and corresponding jump links specified in the hot zone range data as jump link data;
the data uploading unit 150 is mainly used for storing hot area range data and jump link data;
the hot zone service unit 160 is mainly used for performing hot zone user service according to the hot zone range data and the jump link data after the webpage corresponding to the webpage picture is started.
Corresponding to the above method embodiment, the embodiment of the present invention further provides a device for configuring a web page picture hot zone, and a device for configuring a web page picture hot zone described below and a method for configuring a web page picture hot zone described above may be referred to in a corresponding manner.
The webpage picture hot zone configuration equipment comprises:
a memory for storing a computer program;
and the processor is used for realizing the steps of the webpage picture hot area configuration method of the embodiment of the method when executing the computer program.
Specifically, referring to fig. 3, a schematic diagram of a specific structure of a web page image hot zone configuration device provided in this embodiment is provided, where the web page image hot zone configuration device may generate a relatively large difference due to different configurations or performances, and may include one or more processors (CPUs) 322 (e.g., one or more processors) and a memory 332, where the memory 332 stores one or more computer applications 342 or data 344. Memory 332 may be, among other things, transient or persistent storage. The program stored in memory 332 may include one or more modules (not shown), each of which may include a sequence of instructions operating on a data processing device. Still further, the central processor 322 may be configured to communicate with the memory 332 to execute a series of instructional operations on the web page picture hot zone configuration device 301 in the memory 332.
The web page picture hot zone configuration apparatus 301 may also include one or more power sources 326, one or more wired or wireless network interfaces 350, one or more input-output interfaces 358, and/or one or more operating systems 341.
The steps in the above-described method for configuring a web page picture hot zone may be implemented by a structure of a web page picture hot zone configuration device.
Corresponding to the above method embodiment, an embodiment of the present invention further provides a readable storage medium, and a readable storage medium described below and a method for configuring a hot area of a web page picture described above may be referred to in a corresponding manner.
A readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps of the method for configuring the hot area of the web page picture in the foregoing method embodiment.
The readable storage medium may be a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and various other readable storage media capable of storing program codes.
Those of skill would further appreciate that the various illustrative components and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative components and steps have been described above generally in terms of their functionality in order to clearly illustrate this interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
Claims (10)
1. A method for configuring a hot zone of a webpage picture is characterized by comprising the following steps:
after receiving a hot zone configuration request, determining a webpage picture of a hot zone to be configured;
taking the webpage picture as a background picture, and performing visual editing on the webpage picture to obtain a visual editing area;
receiving a hot zone designated by a user in the visual editing zone, and determining hot zone range data corresponding to the hot zone;
receiving at least two jump positions and corresponding jump links designated in the hot zone range data as jump link data;
saving the hot area range data and the jump link data;
and after the webpage corresponding to the webpage picture is started, performing hotspot user service according to the hotspot range data and the jump link data.
2. The method for configuring hot zone of pictures on web pages according to claim 1, wherein the step of receiving the hot zone designated by the user in the visual editing area and determining the hot zone range data corresponding to the hot zone comprises the steps of:
recording coordinate values of first pressing and first releasing of a mouse button in the visual editing area to obtain coordinate values of a pressed point and coordinate values of a released point;
and determining hotspot range data according to the coordinate value of the pressed point and the coordinate value of the relaxation point.
3. The method for configuring hot zone of pictures on web pages according to claim 2, wherein determining hot zone range data according to the coordinate values of the pressed point and the coordinate values of the relaxed point comprises:
and determining the coordinates of the starting point of the hot zone and the width and the height of the hot zone according to the coordinate values of the pressed point and the coordinate values of the relaxed point to serve as the range data of the hot zone.
4. The method for configuring hot zone of pictures in web pages according to claim 2, wherein the step of recording the coordinate values of the first pressing and the first releasing of the mouse button in the visual editing area comprises:
recording a coordinate value pressed for the first time when the mouse is detected to be pressed for the first time;
when the mouse is detected to move after being pressed for the first time, the real-time position of the mouse is obtained;
and generating a hot area preview graph which changes along with the movement of the mouse according to the position difference between the real-time position and the coordinate value pressed for the first time.
5. The method as claimed in claim 1, further comprising, before the saving the hotspot range data and the skip link data:
after receiving a hot zone or hot zone link deletion request, determining hot zone data to be deleted; the hot zone data comprises the hot zone range data and the jump link data;
and executing deletion operation on the hot area data to be deleted.
6. The method as claimed in claim 1, further comprising, after receiving the jump click address and the corresponding jump link specified in the hotspot range data:
if a hot zone adding request is received, recording coordinate values of first pressing and releasing of a mouse button in the visual editing area to obtain coordinate values of a pressing point and coordinate values of a releasing point;
accordingly, the uploading the hot zone range data and the jump link data comprises: and uploading the hot zone range data and the jump link data corresponding to each hot zone.
7. The method for configuring the hot zone of the web page pictures according to claim 1, wherein after the web page corresponding to the web page pictures is started, performing hot zone user services according to the hot zone range data and the skip link data, comprises:
generating a corresponding hot area in the webpage picture according to the hot area range data, and generating a corresponding jump link in the hot area according to the jump link data;
when the mouse of the user is detected to move to the hot area, the mouse of the user is converted into a clickable state;
and if the condition that the user clicks the jump link is detected, jumping to a webpage corresponding to the jump link clicked by the user.
8. A device for configuring a hot zone of a web page picture, comprising:
the request receiving unit is used for determining the webpage pictures of the hot area to be configured after receiving the hot area configuration request;
the visual setting unit is used for carrying out visual editing on the webpage picture by taking the webpage picture as a background picture to obtain a visual editing area;
the hot area specifying unit is used for receiving a hot area specified by a user in the visual editing area and determining hot area range data corresponding to the hot area;
a connection determining unit, configured to receive at least two jump positions and corresponding jump links specified in the hot zone range data as jump link data;
the data uploading unit is used for storing the hot area range data and the jump link data;
and the hot zone service unit is used for carrying out hot zone user service according to the hot zone range data and the jump link data after the webpage corresponding to the webpage picture is started.
9. A web page picture hot zone configuration device, comprising:
a memory for storing a computer program;
a processor for implementing the steps of the method for configuring the hot zone of the web page pictures according to any one of claims 1 to 7 when executing the computer program.
10. A readable storage medium, having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the method for configuring the hot zone of pictures in web pages according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011423805.9A CN112507268A (en) | 2020-12-08 | 2020-12-08 | Method, device and equipment for configuring hot zone of webpage picture and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011423805.9A CN112507268A (en) | 2020-12-08 | 2020-12-08 | Method, device and equipment for configuring hot zone of webpage picture and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112507268A true CN112507268A (en) | 2021-03-16 |
Family
ID=74970303
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011423805.9A Pending CN112507268A (en) | 2020-12-08 | 2020-12-08 | Method, device and equipment for configuring hot zone of webpage picture and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112507268A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112733044A (en) * | 2021-03-30 | 2021-04-30 | 腾讯科技（深圳）有限公司 | Recommended image processing method, apparatus, device and computer-readable storage medium |
| CN116523738A (en) * | 2023-07-03 | 2023-08-01 | 腾讯科技（深圳）有限公司 | Task triggering method and device, storage medium and electronic equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102479224A (en) * | 2010-11-23 | 2012-05-30 | 腾讯科技（深圳）有限公司 | Application webpage editing method and application webpage editing device |
| CN107885538A (en) * | 2016-09-28 | 2018-04-06 | 北京京东尚科信息技术有限公司 | The method and apparatus that hot-zone link is added on picture |
| CN108008871A (en) * | 2016-10-27 | 2018-05-08 | 阿里巴巴集团控股有限公司 | A kind of page generation method and device |
-
2020
- 2020-12-08 CN CN202011423805.9A patent/CN112507268A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102479224A (en) * | 2010-11-23 | 2012-05-30 | 腾讯科技（深圳）有限公司 | Application webpage editing method and application webpage editing device |
| CN107885538A (en) * | 2016-09-28 | 2018-04-06 | 北京京东尚科信息技术有限公司 | The method and apparatus that hot-zone link is added on picture |
| CN108008871A (en) * | 2016-10-27 | 2018-05-08 | 阿里巴巴集团控股有限公司 | A kind of page generation method and device |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112733044A (en) * | 2021-03-30 | 2021-04-30 | 腾讯科技（深圳）有限公司 | Recommended image processing method, apparatus, device and computer-readable storage medium |
| CN112733044B (en) * | 2021-03-30 | 2021-07-16 | 腾讯科技（深圳）有限公司 | Recommended image processing method, apparatus, device and computer-readable storage medium |
| CN116523738A (en) * | 2023-07-03 | 2023-08-01 | 腾讯科技（深圳）有限公司 | Task triggering method and device, storage medium and electronic equipment |
| CN116523738B (en) * | 2023-07-03 | 2024-04-05 | 腾讯科技（深圳）有限公司 | Task triggering method and device, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107844297B (en) | Data visualization implementation system and method | |
| US9268562B1 (en) | Methods and apparatuses for dynamically generating mobile application layouts using client-independent configuration | |
| CN104077387B (en) | A kind of web page contents display methods and browser device | |
| CN101957730B (en) | Messaging device and information processing method | |
| US9612715B2 (en) | Real-time preview of uniform resource identifier addressable dynamic content | |
| US20040215719A1 (en) | Method and system for designing, editing and publishing web page content in a live internet session | |
| CN106610774B (en) | Webpage table editing method and device | |
| KR930703648A (en) | Apparatus and method for creating user-definable video display documents that show real-time data changes | |
| CN112507268A (en) | Method, device and equipment for configuring hot zone of webpage picture and readable storage medium | |
| CN107885538B (en) | Method and device for adding hot area links on picture | |
| CN111090797B (en) | Data acquisition method, device, computer equipment and storage medium | |
| JP2019506645A (en) | Page construction method, terminal, storage medium, and page construction device | |
| CN111596911B (en) | Method, device, computer equipment and storage medium for generating control | |
| JP2010250529A (en) | Device, and method for retrieving image, and program | |
| CN114357345A (en) | Picture processing method and device, electronic equipment and computer readable storage medium | |
| CN111736740B (en) | Picture hot area generation method, device and equipment and storage medium | |
| US8230319B2 (en) | Web-based visualization, refresh, and consumption of data-linked diagrams | |
| CN104820548A (en) | Screenshot method and device | |
| CN115098098A (en) | Page generation method, page display method and device | |
| KR20120029013A (en) | Host apparatus and web content display method thereof | |
| CN105279431A (en) | Method, device, and system for recording operation information in mobile device | |
| CN107045546A (en) | A kind of web page processing method, device and intelligent terminal | |
| CN112817817B (en) | Buried point information query method, buried point information query device, computer equipment and storage medium | |
| CN104484399B (en) | Webpage redirects treating method and apparatus | |
| CN105095376A (en) | Method and device for establishing browser local homepage in mobile terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210316 |
|
| RJ01 | Rejection of invention patent application after publication |