双击展开图片

最新推荐文章于 2020-06-22 21:38:08 发布

zyuanq

最新推荐文章于 2020-06-22 21:38:08 发布

阅读量103

点赞数

分类专栏： jquery 文章标签： JSP 框架脚本 HTML

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

main.jsp

<c:set var="showpage" value="${requestScope.showpage}"/>
    	<c:if test="${empty showpage}">
    	<c:set var="showpage" value="welcome.jsp"/>
    	</c:if>
<table border="0" cellpadding="0" cellspacing="0" width="833">
    		<tr height="50"><td><img src="images/top.jpg"></td></tr>
    	</table>
    	<table border="0" cellpadding="0" cellspacing="0" width="833">
    		<tr>
    			<td width="213" valign="top" background="images/leftbg.jpg">
    				<form action="vote" name="voteform" method="post" target="resultpage">   				
    				<table border="0" width="100%">
    					<tr height="95" align="center"><td colspan="2"><img src="images/lefttopbg.jpg"></td></tr>
    					<c:set var="options" value="${requestScope.optionlist}"/>    					
    					<c:if test="${empty options}">
    					<tr><td colspan="2">没有投票选项</td></tr>
    					</c:if>    					
    					<c:if test="${!empty options}">
    					<c:forEach var="option" varStatus="ovs" items="${options}">
    					<tr>
    						<td style="padding-left:20"><img src="images/title.jpg"> ${option.optionName}</td>
    						<td align="center"><input type="radio" name="movie" value="${option.id}" onclick="message.innerHTML=''"></td>
    					</tr>
    					<tr><td colspan="2"><img src="images/line.jpg"></td></tr>
    					</c:forEach>
    					</c:if>
    					<tr height="40">
    						<td><b><span id="message" style="color:red"></span></b></td>
    						<td><input type="button" value="" name="voteb" style="background-image:url(images/submit.jpg);border:0;width:76;height:23" onclick="checkvote()"></td>
    					</tr>    					
    				</table>
    				</form>
    			</td>
<td align="center" valign="top">
    				<span id="wait" style="display:none">
    					正在加载...
    				</span>
    				<span id="result" style="display:">
    					<iframe id="resultpage" name="resultpage" frameborder="0" width="100%" height="450" scrolling="no" src="${showpage}"></iframe>   				</span>
    			</td>
    		</tr>
    	</table>

showresult.jsp

<%@ page contentType="text/html;charset=gb2312"%>

<script type="text/javascript" src="js/vote.js"></script>
<body onload="waitload()" bgcolor="#EEEEEE">
	<center>
	<jsp:include page="plot/${requestScope.path}.map"/>
	<div ondblclick="size()">
		<img id="pic" src="plot/${requestScope.path}.jpg" title="双击收缩图片" alt="正在加载图片，请稍等..." usemap="#mymap" style="border:0">
	</div>
	</center>
</body>



var mark1="off";
var mark2="off";


function checkvote(){
	var movies=document.getElementsByName("movie");
	var i=0;
	for(i=0;i<movies.length;i++){
		if(movies[i].checked){
			waitclick();
			voteform.voteb.disabled=true;
			voteform.submit();
			break;
		}
	}

function waitclick(){
	wait.style.display='';
	result.style.display='none';
}

function waitload(){
	parent.wait.style.display='none';
	parent.result.style.display='';
}
//在showresult.jsp页面中调用的脚本，用于实现图片显示区域的缩放
function size(){
	var tag1=parent.document.getElementById("resultpic");	//获取父页面(toresult.jsp)中id属性值为“resultpic”的元素（这里为iframe框架）
	if(mark1=="off"){
		mark1="on";
		tag1.height=document.body.scrollHeight;		//将tag1元素的高度设置为showresult.jsp页面的高度，实现放大效果
	}
	else{
		mark1="off";
		tag1.height=350;				//将tag1元素的高度设置为指定值，实现缩小效果
	}

	var tag2=parent.parent.document.getElementById("resultpage");	//获取父页面的父页面(main.jsp)中id属性值为“resultpage”的元素（这里为iframe框架）
	if(mark2=="off"){
		mark2="on";
		tag2.height=parent.document.body.scrollHeight;		//将tag2元素的高度设置为showresult.jsp的父页面toresult.jsp的高度，实现放大效果
	}
	else{
		mark2="off";
		tag2.height=450;					//将tag2元素的高度设置为指定值，实现缩小效果
	}
}