利用<input type="image">来巧妙实现map功能..
更新时间：2016年11月25日 16:59 点击：1417
大家都熟悉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="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]}";
尚未测试
CODE:
<?php
/******************************************************************************
参数说明:
$max_file_size : 上传文件大小限制, 单位BYTE
$destination_folder : 上传文件路径
$watermark : 是否附加水印(1为加水印,其他为不加水印);
使用说明:
1. 将PHP.INI文件里面的"extension=php_gd2.dll"一行前面的;号去掉,因为我们要用到GD库;
2. 将extension_dir =改为你的php_gd2.dll所在目录;
******************************************************************************/
//上传文件类型列表
$uptypes=array(
'image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png'
);
$max_file_size=2000000; //上传文件大小限制, 单位BYTE
$destination_folder="uploadimg/"; //上传文件路径
$watermark=1; //是否附加水印(1为加水印,其他为不加水印);
$watertype=1; //水印类型(1为文字,2为图片)
$waterposition=1; //水印位置(1为左下角,2为右下角,3为左上角,4为右上角,5为居中);
$waterstring="http://www.xplore.cn/"; //水印字符串
$waterimg="xplore.gif"; //水印图片
$imgpreview=1; //是否生成预览图(1为生成,其他为不生成);
$imgpreviewsize=1/2; //缩略图比例
?>
<html>
<head>
<title>ZwelL图片上传程序</title>
<style type="text/css">
<!--
body
{
font-size: 9pt;
}
input
{
background-color: #66CCFF;
border: 1px inset #CCCCCC;
<?
//读取图像的类型
//1 = GIF, 2 = JPG, 3 = PNG, 4 = SWF, 5 = PSD, 6 = BMP, 7 = TIFF(intel byte order), 8 = TIFF(motorola byte order), 9 = JPC, 10 = JP2, 11 = JPX, 12 = JB2, 13 = SWC, 14 = IFF
function GetImageType($filename) {return (($imginfo=@getimagesize($filename))!=null ? $imginfo[2] : null);}
//图像锐化
//$scr_im:图像资源句柄，$degree:锐化度数
function Sharp(&$src_im, &$dst_im, $degree)
{
$src_x = imagesx($src_im);
$src_y = imagesy($src_im);
//$dst_im = imagecreate($src_x, $src_y);
//imagecopy($dst_im, $src_im, 0, 0, 0, 0, $src_x, $src_y);
$cnt = 0;
for ($x=1; $x<$src_x; $x++)
for ($y=1; $y<$src_y; $y++)
{
$src_clr1 = imagecolorsforindex($src_im, imagecolorat($src_im, $x-1, $y-1));
$src_clr2 = imagecolorsforindex($src_im, imagecolorat($src_im, $x, $y));
$r = intval($src_clr2["red"]+$degree*($src_clr2["red"]-$src_clr1["red"]));
$g = intval($src_clr2["green"]+$degree*($src_clr2["green"]-$src_clr1["green"]));
$b = intval($src_clr2["blue"]+$degree*($src_clr2["blue"]-$src_clr1["blue"]));
$r = min(255, max($r, 0));
$g = min(255, max($g, 0));
$b = min(255, max($b, 0));
//echo "r:$r, g:$g, b:$b<br/>";
if (($dst_clr=imagecolorexact($dst_im, $r, $g, $b))==-1)
$dst_clr = Imagecolorallocate($dst_im, $r, $g, $b);
$cnt++;
实在不敢说是在这里“讲”GD库，因为我用GD也才一两次而已，绝大多数的函数还没
有接触到。可是三斑竹小刁热情地向我约稿，我只好硬着头皮写一点自己的心得。希望能
够起到抛砖引玉的效果。
其实，我们在web页面里实现“图”的效果不一定非用GD不可，比较容易解决的是柱状
图——用HTML就可以解决。比如：
<? $b = array(150,110,125,180,160,175,230,220); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
<!--
td{ font-size:9pt }
-->
</style>
</head>
<body>
<table border=0>
<tr valign="bottom"> /* (1) */
<?for($i=0;$i<8;$i++) { ?><td align="center">
<table height="<?echo $b[$i];?>" border=0> /* (2) */
<tr>
<td bgcolor="#3F7F9F" width="40"></td> /* (3) */
</tr>
</table><br><font color="#3F7F9F"><?echo $b[$i];?></font> /* （4） */
</td><? } ?>
</tr>
</table>
</body>
</html>
<? $b = array(150,110,125,180,160,175,230,220); ?> 是一组数据，数据从哪里来，是无
关大局的，就看你的需要了；代码中需要说两句的地方我都加了注释，现在一一来说明。
(1) 这里要注意的是 valign="bottom"，是为了让单元格的内容底部对齐。为什么加在<tr>里
呢？可以让表格里这一行的内容都遵循这一对齐方式，不必在每一个<td>里指定，这样可
到前面为止，我们已经能够用GD完成作图基本的需要了。但有的时候恐怕就要嫌ImageString
能用的五种字体少而且难看，那就要用到下面的函数了。这个函数允许我们使用TTF字体；但你
必须拥有这些字体的文件。
<?php
Header("Content-type: image/png");
$im = ImageCreate(400,250);
$col_back = ImageColorAllocate($im,136,200,152);
$col_write = ImageColorAllocate($im,255,255,255);
$col_black = ImageColorAllocate($im,0,0,0);
ImageTTFText($im,160,15,40,220,$col_black,"C:/windows/fonts/verdana.ttf","PNG");
// 新的内容只有这一句。参数是这样的：
// $im 不用说了。
160 这个位置，是字号(pt)。15 字串是倾斜角度，水平方向起逆时针。
// 40,220是横纵坐标。注意，跟ImageString不同的是，
// ImageString里指定的坐标是字串的左上角，而ImageTTFText指定的坐标是左下角。
// 接下来 $col_black 是颜色喽，
// "C:/windows/fonts/verdana.ttf"是字体文件路径，在Linux就是"/.../....."。
// 甚至可以是 "http://...."。但是，我没有这样用过，也不推荐这样用。
// 因为不在自己机器上的东西终究是不可靠的，不可以委以重任。
// 最后就是要输出的字符串了。这是尤其要引起注意的，
// 这里的字符串要用UTF-8编码！！！
// ASCII码 0~127的字符，ASCII码等于UTF-8编码，所以我们在输出西文字符串的时候不需要转换。
// 而如果要输出中文，则需要一系列的转换。
// www.phpx.com的sadly写了一个GB2312码到UTF-8码转换的函数。
// 我的另一篇文章专门分析了这个函数的工作原理。
我现在所说的是，这一个图片他所链接只有一个文件~
呵呵，别抛砖头~，你恐怕说直接用一个<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="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]}";
尚未测试
CODE:
<?php
/******************************************************************************
参数说明:
$max_file_size : 上传文件大小限制, 单位BYTE
$destination_folder : 上传文件路径
$watermark : 是否附加水印(1为加水印,其他为不加水印);
使用说明:
1. 将PHP.INI文件里面的"extension=php_gd2.dll"一行前面的;号去掉,因为我们要用到GD库;
2. 将extension_dir =改为你的php_gd2.dll所在目录;
******************************************************************************/
//上传文件类型列表
$uptypes=array(
'image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png'
);
$max_file_size=2000000; //上传文件大小限制, 单位BYTE
$destination_folder="uploadimg/"; //上传文件路径
$watermark=1; //是否附加水印(1为加水印,其他为不加水印);
$watertype=1; //水印类型(1为文字,2为图片)
$waterposition=1; //水印位置(1为左下角,2为右下角,3为左上角,4为右上角,5为居中);
$waterstring="http://www.xplore.cn/"; //水印字符串
$waterimg="xplore.gif"; //水印图片
$imgpreview=1; //是否生成预览图(1为生成,其他为不生成);
$imgpreviewsize=1/2; //缩略图比例
?>
<html>
<head>
<title>ZwelL图片上传程序</title>
<style type="text/css">
<!--
body
{
font-size: 9pt;
}
input
{
background-color: #66CCFF;
border: 1px inset #CCCCCC;
<?
//读取图像的类型
//1 = GIF, 2 = JPG, 3 = PNG, 4 = SWF, 5 = PSD, 6 = BMP, 7 = TIFF(intel byte order), 8 = TIFF(motorola byte order), 9 = JPC, 10 = JP2, 11 = JPX, 12 = JB2, 13 = SWC, 14 = IFF
function GetImageType($filename) {return (($imginfo=@getimagesize($filename))!=null ? $imginfo[2] : null);}
//图像锐化
//$scr_im:图像资源句柄，$degree:锐化度数
function Sharp(&$src_im, &$dst_im, $degree)
{
$src_x = imagesx($src_im);
$src_y = imagesy($src_im);
//$dst_im = imagecreate($src_x, $src_y);
//imagecopy($dst_im, $src_im, 0, 0, 0, 0, $src_x, $src_y);
$cnt = 0;
for ($x=1; $x<$src_x; $x++)
for ($y=1; $y<$src_y; $y++)
{
$src_clr1 = imagecolorsforindex($src_im, imagecolorat($src_im, $x-1, $y-1));
$src_clr2 = imagecolorsforindex($src_im, imagecolorat($src_im, $x, $y));
$r = intval($src_clr2["red"]+$degree*($src_clr2["red"]-$src_clr1["red"]));
$g = intval($src_clr2["green"]+$degree*($src_clr2["green"]-$src_clr1["green"]));
$b = intval($src_clr2["blue"]+$degree*($src_clr2["blue"]-$src_clr1["blue"]));
$r = min(255, max($r, 0));
$g = min(255, max($g, 0));
$b = min(255, max($b, 0));
//echo "r:$r, g:$g, b:$b<br/>";
if (($dst_clr=imagecolorexact($dst_im, $r, $g, $b))==-1)
$dst_clr = Imagecolorallocate($dst_im, $r, $g, $b);
$cnt++;
实在不敢说是在这里“讲”GD库，因为我用GD也才一两次而已，绝大多数的函数还没
有接触到。可是三斑竹小刁热情地向我约稿，我只好硬着头皮写一点自己的心得。希望能
够起到抛砖引玉的效果。
其实，我们在web页面里实现“图”的效果不一定非用GD不可，比较容易解决的是柱状
图——用HTML就可以解决。比如：
<? $b = array(150,110,125,180,160,175,230,220); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
<!--
td{ font-size:9pt }
-->
</style>
</head>
<body>
<table border=0>
<tr valign="bottom"> /* (1) */
<?for($i=0;$i<8;$i++) { ?><td align="center">
<table height="<?echo $b[$i];?>" border=0> /* (2) */
<tr>
<td bgcolor="#3F7F9F" width="40"></td> /* (3) */
</tr>
</table><br><font color="#3F7F9F"><?echo $b[$i];?></font> /* （4） */
</td><? } ?>
</tr>
</table>
</body>
</html>
<? $b = array(150,110,125,180,160,175,230,220); ?> 是一组数据，数据从哪里来，是无
关大局的，就看你的需要了；代码中需要说两句的地方我都加了注释，现在一一来说明。
(1) 这里要注意的是 valign="bottom"，是为了让单元格的内容底部对齐。为什么加在<tr>里
呢？可以让表格里这一行的内容都遵循这一对齐方式，不必在每一个<td>里指定，这样可
到前面为止，我们已经能够用GD完成作图基本的需要了。但有的时候恐怕就要嫌ImageString
能用的五种字体少而且难看，那就要用到下面的函数了。这个函数允许我们使用TTF字体；但你
必须拥有这些字体的文件。
<?php
Header("Content-type: image/png");
$im = ImageCreate(400,250);
$col_back = ImageColorAllocate($im,136,200,152);
$col_write = ImageColorAllocate($im,255,255,255);
$col_black = ImageColorAllocate($im,0,0,0);
ImageTTFText($im,160,15,40,220,$col_black,"C:/windows/fonts/verdana.ttf","PNG");
// 新的内容只有这一句。参数是这样的：
// $im 不用说了。
160 这个位置，是字号(pt)。15 字串是倾斜角度，水平方向起逆时针。
// 40,220是横纵坐标。注意，跟ImageString不同的是，
// ImageString里指定的坐标是字串的左上角，而ImageTTFText指定的坐标是左下角。
// 接下来 $col_black 是颜色喽，
// "C:/windows/fonts/verdana.ttf"是字体文件路径，在Linux就是"/.../....."。
// 甚至可以是 "http://...."。但是，我没有这样用过，也不推荐这样用。
// 因为不在自己机器上的东西终究是不可靠的，不可以委以重任。
// 最后就是要输出的字符串了。这是尤其要引起注意的，
// 这里的字符串要用UTF-8编码！！！
// ASCII码 0~127的字符，ASCII码等于UTF-8编码，所以我们在输出西文字符串的时候不需要转换。
// 而如果要输出中文，则需要一系列的转换。
// www.phpx.com的sadly写了一个GB2312码到UTF-8码转换的函数。
// 我的另一篇文章专门分析了这个函数的工作原理。
上一篇: 说说PHP作图（四）（完）
下一篇: 图象函数中的中文显示[转]，记得有人问过
相关文章
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- 翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21
SQLMAP结合Meterpreter实现注入渗透返回shell
sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25- 复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
- 这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2017-01-09
- 这篇文章主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了C#实现图片放大功能的按照像素放大图像方法,功能非常实用,需要的朋友可以参考下...2020-06-25
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本，下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标...2017-01-09- 在本篇文章中小编给各位整理了一篇关于python中翻译功能translate模块实现方法，有需要的朋友们可以参考下。...2020-12-18
- 本文我们需要解决的问题是如何实现Http请求来实现通信，解决Android 2.3 版本以后无法使用Http请求问题，下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20
- EMUI11值得升级吗？好不好用？下面小编带来EMUI11上手体验，一起来看看手机鸿蒙OS的提前预演...2020-12-08
- 复制代码 代码如下:call PROCEDURE_split('分享,代码,片段',',');select * from splittable;复制代码 代码如下:drop PROCEDURE if exists procedure_split;CREATE PROCEDURE `procedure_split`( inputstring varc...2014-05-31
- AngularJS 让人爱不释手的八种功能，想知道AngularJS哪八种功能让人喜欢就快点看下本文吧...2016-03-28
- 这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 在使用xml-rpc的时候，server端获取client数据，主要是通过php输入流input，而不是$_POST数组。所以，这里主要探讨php输入流php://input。 下面的例子摘取的是wordpres...2016-11-25