html表单里面的图片点击相应图片跳转到本页其他去看代码怎么写？ HTML网页设计:如何设计点击图片后跳转到另外一个页面的指定...
\u8bf7\u6559\u4e00\u4e0b\uff0c\u70b9\u51fb\u56fe\u7247\u8df3\u8f6c\u5230\u65b0\u9875\u9762\uff0c\u7684\u4ee3\u7801\u600e\u4e48\u5199
img {float:left;}
a
b
c
\u8fd0\u884c\u4e0a\u9762\u8fd9\u6bb5\u4ee3\u7801\u4f60\u5e94\u8be5\u5c31\u77e5\u9053\u4e86\u3002
\u5728\u201c\u897f\u74dc\uff1a
\u897f\u74dc\u662f\u6c34\u679c\u3002\u201d\u524d\u9762\u6dfb\u52a0 \u4e00\u4e2a\u951a\u8bb0
========================
\u5728\u897f\u74dc\u56fe\u7247 \u6240\u6709\u7684\u8d85\u94fe\u63a5\u4e2d\u897f\u74dc
需要在一张图片上设置多个能点击跳转的链接区域时，推荐使用网页的热点链接。
参考代码如下：
<map name="Map" id="Map">
<area shape="rect" coords="89,41,379,136" href="#" target="baidu.com" />
<area shape="rect" coords="89,175,394,264" href="#" />
<area shape="rect" coords="95,293,386,355" href="#" />
</map>
网页热点使用方法：
个人推荐Dreamwever可视化操作来创建网页热点。
1、打开Dreamwever，新建一个页面，插入一张图片，
2、使用左下角的热点工具。
3、点击“矩形”或其他热点工具，再在图片上拖动位置
4、选中其中一个热点，在下方的属性窗口中的链接栏填上你的链接，热点链接就创建完成了。
楼主尼嚎~~HTML表单，通常都是被<form>标签所包括的。<form>标签内的内容还是可以用HTML常规代码书写。不过我认为楼主应该是想表达，HTML表格而不是表单吧？代码如下：
<html>
<head><title>标题</title></head>
<body>
<table>
<tr>
<!--第一栏图片-->
<td>
<a href="网址"><img src="图片路经" /></a>
</td>
<!--第二栏图片-->
<td>
<a href="网址"><img src="图片路经" /></a>
</td>
</tr>
</table>
</body>
</html>
使图片被<a>标签包围住即可。
希望能帮到你。
【2017.7.11】
我再来补充一下，因为刚刚看到了其他回答。楼主可能是想实现html的锚点功能吧。
这个也是非常容易的。
我们在编写css的时候不难发现，如果html标签定义的是class，在css中以一个点“.”和一些字母连用，表示这些字母是class的名称，而css中如果以“#”和一些字母连用，则表示这些字母是html标签的id。那么我们再来回头看锚点。
<a href="#a">点我</a>
这里边，我们把href属性设置成了“#a”，按照css的思路，则表示一个id为a的html标签。那么我们假设在同页面创建一个容器
<div id="a"><p>我是id为a的容器</p></div>
那么在本页点击a标签的链接就会把页面拉到页面中这个div的部分。（当然，前提是你页面要足够长，即浏览器右侧出现竖版滚动条才有效果）
希望能帮到你。
最简单的方法是锚点用<a>标签，在href属性中写入DIV的id。如下：
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
还可以用js的srollIntoView方法，直接用:
document.getElementById("divId").scrollIntoView();
有两种方法：第一是把图片放在A标签中，第二是利用js给图片一个点击事件，在事件中添加新的跳转指令。
希望可以对你有帮助。
你想做的应该是页内跳转吧，，，那就用锚链接来做，，为每个图片外面包个A标签，
绛旓細鍥剧墖鎻愪氦锛岄鍏堣鐢<img />鏍囩鏉ュ湪椤甸潰鍛堢幇浣鐨勫浘鐗锛岀劧鍚庝綘鍙互鐢ㄤ袱绉嶆柟寮忚繘琛屾彁浜わ紝涓绉嶏紝鐩存帴鍦╥mg 閲鐢ㄩ紶鏍鐐瑰嚮浜嬩欢璋冨彇鑴氭湰鍑芥暟锛岃繘琛屾彁浜よ烦杞 閲嶇疆鍜屾彁浜や竴鏍凤紝鐢ㄨ剼鏈鐞
绛旓細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛岀紪鍐欓棶棰樺熀纭浠ｇ爜銆2銆佸湪index.html涓殑<input>鏍囩涓姞鍏ユ牱寮忎唬鐮侊細style="background: url(small.png);width:200px;height:80px;"銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵樉绀哄嚭浜嗕竴涓猻ubmit鎻愪氦绫诲瀷鐨勫浘鐗鎸夐挳銆
绛旓細5銆佸湪<body鍚庢寜涓涓嬬┖鏍奸敭锛屾壘鍒癰ackground锛屽啀鎸夌┖鏍硷紝鐐瑰嚮鈥滄祻瑙堚濓紝鎵惧埌鑳屾櫙鍥剧殑浣嶇疆銆6銆侀変腑鑳屾櫙鍥撅紝鐐瑰嚮鈥滅‘瀹氣濄7銆鍥剧墖鎻掑叆瀹屾垚銆8銆佸皢杩欎釜html鍙﹀瓨涓哄湪鈥滆〃鏍尖濇枃浠跺す閲銆9銆佺偣鍑昏繖涓瑙堝浘鏍囷紝灏卞彲浠ュ湪娴忚鍣涓鏌ョ湅鏁堟灉銆10銆佸畬鎴愭晥鏋滃浘銆傚弬鑰冭祫鏂欙細鐧惧害鐧剧-HTML琛ㄥ崟 ...
绛旓細棣栧厛瑕佺粰鍥剧墖娣诲姞涓涓狪d锛屼箣鍚庡湪jquery涓鍐欏涓嬩唬鐮侊細("#鍥剧墖ID").click(function(){ alert("aa鈥);});鎴栬 ("#鍥剧墖ID").bind("click",function(){ alert("aa");});
绛旓細闇瑕佸噯澶囩殑鏉愭枡鏈夛細鐢佃剳锛屾祻瑙堝櫒锛HTML缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑HTML缂栬緫鍣ㄥ苟鍒涘缓涓涓柊鐨凥TML鏂囦欢锛屾瘮濡俰ndex銆html锛屽啓鍑虹殑鍩烘湰闂浠ｇ爜銆2銆 鍦<button>鏍囩鐨勭储寮曘俿tyle="background: url(small2.png);瀹藉害:150 px;楂樺害:60px "銆3銆佸綋娴忚鍣ㄨ繍琛岀储寮曟椂銆侶TML椤甸潰涓紝鎸夐挳鎴愬姛娣诲姞浜嗗浘鍍忋
绛旓細绀轰緥浠ｇ爜濡備笅锛歠orm action="璇疯緭鍏ヤ綘鐨勫鍚嶏細input type="text" name="yourname"input type="submit" value="鎻愪氦"/form瀛︿範HTML琛ㄥ崟(Form)鏈鍏抽敭瑕佹帉鎻＄殑鏈変笁涓鐐癸細琛ㄥ崟鎺т欢(Form Controls)ActionMethod鍏堣琛ㄥ崟鎺т欢(Form Controls)锛岄氳繃HTML琛ㄥ崟鐨鍚勭鎺т欢锛岀敤鎴峰彲浠ヨ緭鍏ユ枃瀛椾俊鎭紝鎴栬呬粠閫夐」涓閫夋嫨...
绛旓細閭ｄ釜鏈潵灏变笉鏄湪鏂囨湰妗涓娣诲姞鐨勬寜閽 鏂囨湰妗嗗湪宸﹁竟锛屾寜閽湪鍙宠竟 鑷充簬浣犵湅璧锋潵鍍忔寜閽湪鏂囨湰妗閲锛岄偅鏄洜涓洪偅涓枃鏈鏄釜鑳屾櫙鍥剧墖 鏂囨湰妗嗗拰鎸夐挳閮芥槸鎶婁粬浠殑杈规闅愯棌锛屼娇浣犵湅涓嶅埌杈规锛岀劧鍚庣敤鍥剧墖鍋氫釜杈规锛屾妸鏂囨湰妗嗗拰鎸夐挳閮芥斁鍦ㄤ竴涓鍣ㄩ噷锛屾瘮濡俤iv鏍囩锛岀劧鍚庣粰杩欎釜div鏍囩鐨勫姞涓閭ｄ釜杈规鍥剧墖浣滀负div...
绛旓細褰鐐瑰嚮鎻愪氦鎸夐挳鏃讹紝娴忚鍣ㄥ皢鑷姩鎻愪氦琛ㄥ崟銆<input type="submit" value="鎻愪氦" /> 鍏侀殣钘忓煙 闅愯棌鍩熷湪娴忚鍣ㄤ腑骞朵笉鏄剧ず锛屼粎浠呬负淇濆瓨涓浜涗笉澶噸瑕佺殑璧勬枡鑰屽瓨鍦ㄣ<input type="hidden" value="鎴戞槸涓涓殣钘忓煙" /> 涔濄佷笂浼犲煙<input type="file" value="" /> 鍗併鍥剧墖鎸夐挳<input type="image...
绛旓細鎴戜滑鍦ㄦ祻瑙堜竴浜涚綉绔欐椂缁忓父浼氱敤鍒颁竴绉嶇綉椤靛厓绱--琛ㄥ崟銆傚涓鍥锛屽儚杩欐牱鍏佽鐢ㄦ埛杈撳叆骞朵娇鐢ㄦ寜閽彁浜や俊鎭殑鍔熻兘锛屾垜浠О涔嬩负琛ㄥ崟锛岄偅涔堟帴涓嬫潵浠嬬粛HTML琛ㄥ崟鐩稿叧鐨勪竴浜涚煡璇嗙偣銆1)琛ㄥ崟:甯姪鏈嶅姟鍣ㄦ敹闆嗗鎴风淇℃伅鐨勪竴绉嶆満鍒 <form action="鎻愪氦鍒扮殑椤甸潰" method="鎻愪氦鐨勬柟娉"> 琛ㄥ崟鎺т欢 form> action:鏁版嵁鏈鍚...
绛旓細鍙互鍐欎竴涓负琛ㄥ崟鍐鍏冪礌璧嬪肩殑鏂规硶锛屼笁涓寜閽笂闈㈡坊鍔鐐瑰嚮浜嬩欢锛岀偣鍑绘椂璋冪敤杩欎釜璧嬪兼柟娉曪紝浣嗘槸浼犵殑鍙傛暟涓嶄竴鏍凤紝鍦ㄦ柟娉曚腑鏍规嵁涓嶅悓鐨勫弬鏁帮紝涓鸿〃鍗曡祴涓嶅悓妯℃澘鐨勫笺備笉鐭ヤ笂闈㈡槸鍚﹀啓鐨勬竻妤氾紝鎴戝啓浜嗕竴涓搴旂殑灏廳emo锛<html><head><title>demo</title><script type="text/javascript" src="jquery-1.8.3...
