Question

.编写HTML代码,通过图像地图实现这些效果

你的网页有一个名为quarters.gif的200*200像素图像.用户单击该图像左上角的1/4时,进入一个名为topleft.html的网页;单击右上角的1/4,进入topright.html;单击左下角的1/4时进入bottom-left.html,而单击右下角的1/4时进入bottomright.html

Answer 1

用图像热点设置。

有效利用<img>标签的usemap属性，给图片划分一个地图，设定图片热点（即给图片
分区，但不是切割，图片还是完整的，只是用代码将图片分成几个部分），然后给热点设定相应的链接。

usemap属性的用法——使用
时：<img src="test.gif"
usemap="#Map">这里的#后面的Map为我们自定义的图像地图的名称，可以任意设定。

针对你的问题，具体代码如下：

<div>
    <img usemap="#Map" src="quarters.gif" style="width:200px;height:200px;" alt=""  ismap="ismap" />
    <map name="Map">
        <area shape="rect" coords="0,0,100,100" href ="topleft.html" alt="topleft.html" />
        <area shape="rect" coords="100,0,200,100" href ="topright.html;" alt="topright.html;" />
        <area shape="rect" coords="0,100,100,200" href ="bottom-left.html" alt="bottom-left.html" />
        <area shape="rect" coords="100,100,200,200" href ="bottomright.html" alt="bottomright.html" />
    </map>
</div>

Answer 2

用dreamweaver工具的矩形热点工具就可以了，自己画出来要跳转的区域然后在地址设置就可以了

Answer 3

把这个图片做为一个背景
然后在图片上面用量a（锚点），做一个绝对定位！

追问

求大神编写一下