选择显示字体大小

利用<input type="image">来巧妙实现map功能...


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

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

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

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

a、通过点击图片左上我要进如pagea.php 右上我要进pageb.php
如此,你也许要说用map直接链接就行了,但我要在这个页面对上一页面进行统计,
怎么办呢?`


别急~

html标记
<input type=&quot;image&quot; name=&quot;thisname&quot; src=&quot;path/image&quot;>

php对此标记支持的自动生成两个变量
&#36;_post[thisname_x] --鼠标点击图片的x位置
&#36;_post[thisname_y] --鼠标点击图片的y位置

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


演示:
======


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



post.php
<html>
<head>
<title>操作...</title>
</head>
<body>
<pre>
<?php
&#36;c=getimagesize(&quot;&#36;_post[image]&quot;);    //获得图片尺寸

if(&#36;_post[sub_x]<&#36;c[0]/2){        //鼠标点击图片x位置为图片左半部

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


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

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


 


关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范

Valid CSS!

无不良内容,无不良广告,无恶意代码

Valid XHTML 1.0 Transitional

creativecommons