Product prototype design: Anchor jump and title hint function

Recently in making a prototype when using the anchor jump and title hint function, colleagues see the HTML and ask me how this is achieved; Yesterday I saw an article with an example of a title hint in a registration form asking how this was done, I realized that a lot of people have overlooked a very common component in axure-the picture/image map Area (image map region).
Component Name: Image map region, picture/image map Area
Component Description: Create an invisible area in a Web page that is equivalent to a hot area of a picture, adding instructions and interactivity. In a real-world web page, there is often a big picture where a region is a trigger button, and the image map area can be used to illustrate the function and interactive content of the area.
Achievable features:Title hints for links、alt hint for a picture、Anchor Point Jump。 ClassDynamic PanelFunction.
As shown in the figure above, select the image map area component, overwrite the image to be mapped, right click on "Edit ToolTip", enter title text content, OK.
In which, whether the control is labeled as optional, if not labeled, the system default name is "unlabeled", however, if you need to use the anchor jump function, you need to add tags, both in English and Chinese can be. Because you want to specify the jump position of the anchor point, this position is determined by the name of the tag.
Ps:alt and title hint This feature can also be implemented using a dynamic panel, but more cumbersome, you need to set mouse on and mouse out two interactive actions.
2, the same page within the anchor point jump

1, title hint and ALT hint function realization
The title of the link hint and the picture ALT hint function is relatively simple, in fact, as long as the simple said that everyone can understand, but usually did not pay attention to it.

As shown in the figure above, add an image map area where you want to join the anchor point (for example, 1), this image map area must be tagged; add to the interactive action on the link to implement the jump: Scroll to the picture map area; Then select the anchor position you want to jump to, Select the name of the tag you just raised in the Drop-down menu, and consider the way you want to scroll;
In which, you must add a label to the image map area, the length of the page must be enough anchor jump, if the page is not long enough he jumped you can not see.
3, between different pages of the anchor point jump

As shown in the figure above, this includes 2 aspects of interaction: the interaction of component A of page A, the page interaction of page B (jump to page). In this process we need to take advantage of an intermediate variable (the new variable 1).
Click the wireframe, manage the variables, add a variable (for example, 1)--Adds an interaction attribute to an anchor link--that is, you need to assign a value to a variable when you leave page A--Add page interaction (add in Onpageload) to the page you jump to (B): Scroll to the picture map area "Note that Not component interaction but page interaction! ", OK.
The process is like this: Click on link A to also bring in a variable 1, when the A action is completed, if there is a variable 1 in the B page with the interactive action to continue, scrolling to the image map area.
4. Toggle layer State Anchor jump between different pages
The requirement is this, click Link A in page A to jump to the Second tab 2 in tab module T in page B.
The actual implementation principle is still the same, just add a "set dynamic panel state jump" to the page interaction condition of page B, and the condition becomes simultaneous: The variable value is 1 and sets the dynamic panel state transition to T tab2 and scrolls to the picture map area.

PS: The reason is very simple, so the wood has given a prototype example. My axure use is 5.6 Chinese version, the Chinese version of the situation can be seen here .