How to remove the border after hotspot clicks in HTML

Source: Internet
Author: User

I have found many methods. The following method is the most effective. Just add this sentence:

Onfocus = "This. Blur ()"

Example:

<Area shape = "poly" coords = "62,3, 166, 2, 168, 37, 406, 38, 403,127,322,125,312,184,173,183,165,242, 68,240" href = "#" target = "_ blank"
Onfocus = "This. Blur ();"/>

Note: This method has no problem in IE and won't show the border any more, but there will still be a small dotted line under Firefox. As for how to solve Firefox, I haven't found it yet, do you need JavaScript to control it!

 

 

Area usage in HTML, image hotspot =============== ::

This function is mainly used for map creation!

Have you ever seen the "my office" Software Interface presented by Lenovo on the "Lenovo" machine? Click the keyboard on the desk with the mouse on the picture in the Office to start a "five-stroke" typing exercise software. Click the notepad on the desk to open a notepad software, that is, the image is convenient. The essence of this effect is to divide an image into different functional areas, and then link different areas to software that does different things, in HTML, there is also a tag that divides an image into multiple functional areas and links to different web pages, that is, the <area> map area tag.

<Area> A tag is mainly used for image maps. You can use this tag to set the target area (also known as a hotspot) in the image map. This allows you to move your mouse to a specified target area and click, the pre-configured page is automatically linked. The basic syntax structure is as follows:

<Area
Class = Type
Id = Value
Href = URL
Alt = text
Shape = Area-shape
Coods = value>

. Class and ID: Specify the hotspot type and ID respectively.

ALT: Used to set alternative text for hotspot.

Href: used to set the URL address linked to the hotspot.

Shape and coords are two main parameters used to set the shape and size of a hotspot. The basic usage is as follows:

<Area shape = "rect" coords = "X1, Y1, X2, Y2" href = URL> indicates that the hotspot is a rectangle, and the vertex coordinates in the upper left corner are (x1, Y1 ), the coordinates of vertices in the lower right corner are (X2, Y2 ).

<Area shape = "circle" coords = "X1, Y1, R" href = URL> indicates that the hotspot is set to a circular shape and the center coordinate is (x1, Y1 ), the radius is R.

<Area shape = "poligon" coords = "X1, Y1, X2, Y2 ...... "href = URL> indicates to set the shape of the hotspot to a polygon. The coordinates of each vertex are (x1, Y1), (X2, Y2), (X3, y3 ).......

<Area> A tag is used to divide the region of an image map. Therefore, the region of the image map must be within the region of the image map, therefore, before you use <area> to mark a region, you must use another HTML tag <map> to set the target region of the image map and set a name for the specified image map, this tag is easy to use, that is, <Map Name = "Image Map Name"> ...... </map>.

The following uses an example to describe the usage of the two tags:

Here is a picture of the new bookshelf, the effect is: Success ). Production method:

1. Insert an image, set relevant parameters for the image, and set the parameter usemap = "newbook" ismap in the flag to reference the image map (newbook;

2. Use <map> to mark and set the region of the image map, and name it newbook;

3. Use the <area> marker to separate the three books into three rectangular areas, and set the Link parameter href.

The source code of this example is as follows:


<Map Name = "newbook">
<Area shape = "rect" coords = "56, 69, 78,139" href = "urlall.htm" target = "_ blank" alt = "more than 100,000 URLs are collected here. "Title =" more than 100,000 URLs are collected here. ">
<Area shape = "rect" coords = "103,136," href = "siteall.htm" target = "_ blank" alt = "website designer's first reader. "Title =" website designer's first reading book. ">
<Area shape = "rect" coords = "128,136," href = "pageall.htm" target = "_ blank" alt = "the Web Page Maker cannot read. "Title =" a webpage producer cannot read a book. ">
</Map>

Note the following points when creating the results described in this article:

1. Do not forget to set usemap and ismap parameters in the mark, and the usemap parameter value must be the same as the name parameter value in the <map> mark, that is, "Image Map Name" must be consistent;

2. All hotspot areas in the same "image map" must be within the range of the image map, that is, all <area> tags must be between <map> and </map>;

3. The coordinate format set by the cords parameter in the <area> label must match the shape of the region to which the shape parameter is set, to avoid appearing in the region of the rectangle set by the shape parameter, what we set in cords is the coordinate of vertices in the polygon area.

For your security, please only open the URL with reliable source

Open website
Cancel

From:
Http://hi.baidu.com/2480016/blog/item/1e1b24245e5cda398744f9a4.html

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.