＜area＞制作超链接跳转到新窗口

点击图片跳转链接，显示该张图片。

 

页面效果如下：

 

从页面上看图片上有三个卫星，每点击一个卫星跳转到另外一个窗口，可以看到原图。

 

 

HTML代码：

1. 在body里面第一个放p标签，这是包裹上面“请点击图像上的星球，把它们放大。”文字的。
2. P标签下放一个img标签，这是存放整张卫星图的。上面卫星图的卫星不是一一放上去的，而是本身就在上面的。至于为什么会有这样的效果呢？下面听我慢慢分享给大家！
3. 关于效果问题呢，我们不得不提一下< map>标签，这是一个带有可点击区域的图像映射。
4. < map>标签里的标签有一个属性coords与 shape 属性配合使用，来规定区域的尺寸、形状和位置。所以上面卫星的位置是通过coords属性来定位它的x y z轴！
5. 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于shape属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
6. 标签的usemap 属性与

 

让我们一起看看它的代码吧！（注意：代码中红色字体皆为注释）

请点击图像上的星球，把它们放大。   src="untitled.png" border="0" usemap="#planetmap" alt="Planets"/>   shape="circle" coords="180,139,14" href ="img/untitled1.png" target ="_blank" alt="Venus"/>

shape="circle" coords="129,161,10" href ="img/untitled2.png" target ="_blank" alt="Mercury"/> shape="rect" coords="0,0,110,260" href ="img/untitled.png" target ="_blank" alt="Sun"/>

 

其实它的HTML结构非常简洁的，就一张图片加上一个

 

 

 

 

 

总结：

1. 利用< area>标签的target属性制作超链接开一个新的窗口！
2. 利用coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。
3. img标签的usemap 属性与