提醒大家：

注册会员开通个人空间后：
1、您在论坛发表的帖子可以选择发布到您的个人空间；
2、您也可以在个人空间管理中，选择将您在论坛的帖子导入个人空间！

希望大家喜欢这个功能，有问题找管理员:)我们将竭诚为大家服务！

已经开通了会员“创建圈子”功能，欢迎使用！有任何问题可向管理员提，我们将尽快处理：）

个人空间已经升级成功，增加了许多漂亮的模板，同时增加了博客圈子功能，正在开通，欢迎使用！

原文地址：http://frankmanno.com/ideas/css-imagemap-redux/

1.先说说图像地图是什么？

就是在一张图片上标记出有url的地方，当鼠标滑过的时候，给以像<a href="url" title="descrīption words">links</a>这样的代码显示的
效果。

2.查看实例

Example 1      Example 2

3.方法

这是xhtml:

 <dl id="officeMap">
  <dt id="monitor">1. Monitor</dt>
  <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor.  I wish I had an LCD!</span></a></dd>
 </dl>

分析这段代码是必要的，因为他是结构，效果肯定是通过a标签的:hover,以及:hover span的定义实现的，怎样具体去实现效果呢?

1.)需要一张图片，那就给#officeMap一个背景图片office.jpg

dl#officeMap{
 margin: 0;
 padding: 0;
 background: transparent url(office.jpg) top left no-repeat;
 height: 262px;
 width: 350px;
 position: relative;
}

定义内部元素相对定位，不然怎样给map定位位置?

2.)下来是dt dd标签

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }/*这个url的介绍，不用显示*/
dd{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }/*定义绝对定位*/

3.)#monitorDef的定义,a:hover效果

dd#monitorDef{ top: 65px; left: 114px; }/*定义位置*/
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat;
top: -10px; left: -5px; }/*背景图片滑动,参考滑动门技术(原理相似)，span内容的定位*/

4.)下来是重点,span这个主要效果是怎么实现的?

dd#monitorDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}/*这里不需要解释*/

5.原作者认为，这个模型不是ideal（理想的），因为可能背景图片太费事，第二个模型是根据png图片透明原理(FireFox下)

CSS改进如下：

dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none;
 background: transparent url(note.png) repeat;}
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat;
top: -10px; left: -5px; background: transparent url(hover.png) repeat;}

这样就避免了，制作office.jpg那样麻烦的图片了，只要给a标签 加上背景图片就能区别出map的位置，但是只有firefox支持怎么行，我们
熟悉的IE怎么办?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hover.png',sizingMethod='scale');

作者是使用他来实现的，国内css研究者们已经翻译了这个技术

而我使用：filter:alpha(opacity=80);便解决了，都是CSS的filter，这个再研究，我也不太明白！

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！

对于div

1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

<div id="wrap">ddd1111111111111111111111111111111111</div>

效果：可以实现换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }

<div id="wrap">ddd1111111111111111111111111111111111111111</div>

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed；

<style>
.tb{table-layout:fixed}
</style>

<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果：可以换行

2.(IE浏览器)使用样式table-layout:fixed与nowrap

<style>
.tb {table-layout:fixed}
</style>

<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果：可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

<style>
.tb{table-layout:fixed}
</style>

<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果：两个td均正常换行

3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>

<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>

这里单元格宽度一定要用百分比定义

效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）

大家都熟悉HTML标记里的MAP标记吧~，他可以将一个图片进行多个热链接定位。

现在需要在下一个页面进行操作，也就是说一个图片在不传递参数的情况下，要让下一个页面要有不同的反映动作，怎么做呢？

例如：通过点击图片左上我要进入pagea.php 右上我要进pageb.php。如此，你也许要说用MAP直接链接就行了，但我要在这个页面对上一页面进行统计，怎么办呢？`

看看下面的例子：

HTML标记<input TYPE="image" NAME="thisname" SRC="path/image">

PHP对此标记支持的自动生成两个变量
$_POST[thisname_x] --鼠标点击图片的X位置
$_POST[thisname_y] --鼠标点击图片的Y位置

呵呵，看到这里晓得了如何操作了吧~，下面我给个简单的示例（直接拷贝过去就可以了，如果改的话把图片改为你的正确的图片路径就可以了~）~


演示：
======

index.html
----------
<html>
<head>
<title>测试信息</title>
</head>
<body>
<form action="post.php" method="post" name="form1">
<input type="hidden" name="image" value="bg.jpg">
<input type=image src="bg.jpg" name="sub">
</form>
</body>
</html>

---

post.php
<html>
<head>
<title>操作...</title>
</head>
<body>
<pre>
<?php
$c=getimagesize("$_POST[image]");    //获得图片尺寸

if($_POST[sub_x]<$c[0]/2){        //鼠标点击图片X位置为图片左半部

    if($_POST[sub_y]<$c[1]/2){    //鼠标点击图片的Y位置为上半部
        echo "你点击了图片的左上半部分 x={$_POST[sub_x]} y={$_POST[sub_y]}";
    }else{
        echo "你点击了图片的左下半部分 x={$_POST[sub_x]} y={$_POST[sub_y]}";
    }
}else{
    if($_POST[sub_y]<$c[1]/2){    //鼠标点击图片的Y位置为下半部
        echo "你点击了图片的右上半部分 x={$_POST[sub_x]} y={$_POST[sub_y]}";
    }else{
        echo "你点击了图片的右下半部分 x={$_POST[sub_x]} y={$_POST[sub_y]}";
    }
}
?>
</pre>
<!--
图片走向
        
         　0 |
         　--+----------------------------------------------------→x++(图片的宽度)
         　  |
        　   |
        　   |
          　 |
          　 |
           　|
          　 |
           　|
　          ↓（Y++图片的高度）
-->
</body>
</html>


以上是个人对这个image提交变量的简单应用，如果你有巧妙的创意~

肯定可以做出一个图形作为引导的站点~

    本站即日起为需要博客空间的网友提供空间，欢迎注册使用！

    1. 开通即提供30MB空间，有更大空间需求的请在论坛：http://www.21cstar.com/bbs里发贴索取;

    2. 为更好地为会员提供服务，本站对“长期没更新的，且无内容的空间”做不定期清理，以提高空间利用率和减少垃圾信息，节省阅读时间。

    3. 空间清理前会在本站公告中做两周时间公示，如无异议，将执行清理工作；如要保留，请及时在论坛中申明。