利用HTML的map标签以及javascript实现图片切换

最新推荐文章于 2021-06-03 18:00:07 发布

冰刃QAQ

最新推荐文章于 2021-06-03 18:00:07 发布

阅读量326

点赞数

分类专栏： java web 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_41787689/article/details/83186212

版权

java web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用HTML的map标签以及javascript实现图片切换

在做java web作业过程中，突发奇想做了个图片切换的功能。图片热点区域划分可以根据图片大小自动划分为2块，左半部分是前一张图片，右部分是后一张图片。图片切换会根据图片长宽比例拉伸，但是高度设置为680。下面直接分享代码。
注：图片放在img/目录下，命名为n.jpg。例如：1.jpg 2.jpg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<script>
		//前一个图片
		function change_leftpic(){
			var imgObj = document.getElementById("pic");
			var len=imgObj.getAttribute("src",2).split("");//第几张图片
			var areaLeft = document.getElementById("leftpic");
			var areaRight = document.getElementById("rightpic")
			//图片序号不低于1
			if(parseInt(len[4])!=1){
				var num = parseInt(len[4])-1;
				var flag = "img/"+num+".jpg";
				imgObj.src=flag;
				//检测图片是否加载完成
				imgObj.onload = function(){
				var rw = imgObj.naturalWidth; // 真实图片宽度html5
				var rh = imgObj.naturalHeight; //真实图片高度html5
				imgObj.height=680;//图片高度设置为固定值680
				imgObj.width = rw*680/rh;//图片宽度根据比例拉伸，防止图片变形
				areaLeft.coords="0,0,"+rw*680/rh/2+",680";
				areaRight.coords=rw*680/rh/2+",0,"+rw*680/rh+",680";
				}
			}
		}
		//后一个图片
		function change_rightpic(){
			var imgObj = document.getElementById("pic");
			var len=imgObj.getAttribute("src",2).split("");//第几张图片
			var areaLeft = document.getElementById("leftpic");
			var areaRight = document.getElementById("rightpic");
			//图片不超过9张
			if(parseInt(len[4])<9){
				var num = parseInt(len[4])+1;
				var flag = "img/"+num+".jpg";
				imgObj.src=flag;
				//检测图片是否加载完成
				imgObj.onload = function(){
				var rw = imgObj.naturalWidth; // 真实图片宽度
				var rh = imgObj.naturalHeight; //真实图片高度
				imgObj.height=680;//图片高度设置为固定值680
				imgObj.width=rw*680/rh;//图片宽度根据比例拉伸，防止图片变形
				areaLeft.coords="0,0,"+rw*680/rh/2+",680";
				areaRight.coords=rw*680/rh/2+",0,"+rw*680/rh+",680";
				}
			}
		}
	</script>
  <head>
		<title>Right.html</title>
  </head>

  <body>
		<h1 align="center">图片展示</h1>
		<img src="img/1.jpg" id="pic" alt="1" heigth="680" width="908" hspace="20" vspace="10" align="center" usemap="#erMap">
		<map name="erMap">
			<area shape="rect" coords="0,0,454,680" onclick="change_leftpic()" id="leftpic"/>
			<area shape="rect" coords="454,0,908,680" onclick="change_rightpic()" id="rightpic"/>
		</map>
  </body>
</html>

写完发现用不上，先留着，当是个记录吧~

冰刃QAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用HTML的map标签以及javascript实现图片切换

利用map标签以及javascript实现图片切换在做java web作业过程中，突发奇想做了个图片切换的功能。图片热点区域划分可以根据图片大小自动划分为2块，左半部分是前一张图片，右部分是后一张图片。图片切换会根据图片长宽比例拉伸，但是高度设置为680。下面直接分享代码。注：图片放在img/目录下，命名为n.jpg。例如：1.jpg 2.jpg&amp;lt;!DOCTYPE HTML PUBLI...
复制链接

扫一扫