中国设计秀欢迎投稿
中国设计秀设计资源站
平面设计 画册 VI欣赏 包装 CG-插画 搜索 个人网页 Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校 专题欣赏 SEO 图标欣赏 专题
广州网站设计 维美网站建设 域名注册 虚拟主机 广州网站建设 广州网页设计 虚拟主机 域名注册 素材下载 广告服务 中国品牌形象设计 网站推广 家具中国
求创科技
中国设计秀
中国福网
金视觉
中国设计秀欢迎你
中国品牌形象设计网
中国设计秀
当前位置:网络学院首页 >> 编程开发 >> php >> 利用来巧妙实现map功能

利用来巧妙实现map功能

来源:中国设计秀    作者:jor    点击:46     加入收藏    发表评论
0
顶一下
关键字:功能 php
中资源

      大家都熟悉HTML标记里的MAP标记吧~,他可以将一个图片进行多个热链接定位,也就是说一个图片可以链接到N个文件~

      我现在所说的是,这一个图片他所链接只有一个文件~

      呵呵,别抛砖头~,你恐怕说直接用一个<a>标记不就可以链接了吗?
等等,
你稍微等一下嘛~,让我继续说下去~

      我需要在下一个页面进行操作,也就是说一个图片在不传递参数的情况下,要让下一个页面要有不同的反映动作,怎么说呢?
比如说

      A、通过点击图片左上我要进如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=http://www.163design.net/p/g/"bg.jpg">
<input type=image src=http://www.163design.net/p/g/"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提交变量的简单应用,如果你有巧妙的创意~

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

2008-03-07 17:10:12    出处:中国设计秀cnwebshow.com
热点文章/相关文章
关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口