查看商品圖片，鼠標懸浮圖片放大js實現

2010-06-07 10:18:46|分類：Javascript|字號訂閱

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@pageimport="com.pojo.Products"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>My JSP 'buy.jsp' starting page</title>

</head>

<scripttype="text/javascript">

functionshowing(imgpath){

varx=event.clientX;

vary=event.clientY;

document.getElementById("popup").innerHTML="<img src='"+imgpath+"' width=200 height=200 />";

document.getElementById("popup").style.top=y+50;

document.getElementById("popup").style.left=x;

document.getElementById("popup").style.visibility="visible";

}

functionclearing(){

document.getElementById("popup").style.visibility="hidden";

}

</script>

<body>

Products p=(Products)request.getAttribute("procduct");

商品名稱：<%=p.getName()%><br/>

會員價：<%=p.getSaleprice()%><br/>

圖片：<imgalt=""src="<%=p.getImange()%>"vspace="6"border="0"onmouseover="showing('<%=p.getImange()%>');"onmouseout="clearing();"><br/>

商品描述：<br/>

<textarearows="3"cols="15"disabled="disabled">

<%=p.getDescript()%>

</textarea>

<formaction="">

數量:<inputname="count"size="2">

<inputtype="submit"value="購買">

</form>

<divstyle="position: absolute; width:200; height:200; border:solid 1px; border-color: red; visibility: hidden; "id="popup">

123457789

</div>

<br/>

<ahref="index.jsp?sid=<%=p.getSortp().getId()%>">返回商品列表</a>

</body>

</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/444173.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/444173.shtml
英文地址，請注明出處：http://en.pswp.cn/news/444173.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！