Gracefully expand the link response area

A reasonable expansion of the page link response area can improve the usability of web pages. At the same time also take into account the link between the interactive consistency and visual balance, you need to do some special processing.

There are several common practices:
The first is the most conventional, only links can point, but the whole picture can not point, point up quite tired.

The second is the whole picture as a link, the link response area is large enough, but in fact the link is more embarrassing, not elegant.

The third is to get two links, text links, the figure itself with a link. This is better than both, but still not ideal, because the two links are not enough interaction, users to point map and point link is not to the same place there will be doubts.

This may be elegant:
The picture can point, the mouse moves into the picture, the mouse changes the hand type at the same time the text link becomes hover state. This means that there is enough link response area and there is good interaction consistency, suggesting that the user point map and point link go to the same place, as shown in the figure:

The front code angle, is the link a tag to wrap the whole diagram, the paragraph of the text with other tags, such as span, and then define a hover state, the span into a link color, and underlined, to simulate the hover effect.

In this example, the visual angle, a text needs to be primary and secondary clear, so the link color only added to the title. So the detailed description should not respond to the click? Non-link color out hover effect will be a little strange? Even if you decide to link here, that hover effect leads to large hover and multi-line underlines, http://www.aliyun.com/zixun/aggregation/10243.html "> Visual designers will be anxious."

This may be elegant:
Let the detailed description respond to the Click and let the hover effect appear on the title. Figure:

1, front-end code problems
Although in Html4, a inline property can only be nested inside a inline tag, look at XHTML1.1 tag lists, attributes, and nesting rules (sorry for not finding HTML4, they are similar). But in HTML5, the syntax definition expands its nesting capabilities, and we can wrap all the block tags in a. See HTML5 's special note for a: http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element (thanks to the information provided by Tungsten Dragon). After all, HTML5 is still in the draft stage, this nesting way, or occasionally some of the browser to the link rendering problems, but there is no error rule found.
2, a tag contains the entire area, only the response link, the text copy is more troublesome point, need to copy in a larger range. Therefore, if the copy text has the required module, it is not appropriate to use this method.
3, this scheme has a spin-off benefits, because the whole module as long as a link, if it is a manual maintenance module, update time is very easy.

Source: http://ued.koubei.com/?p=1233