WEBプログラミング-JSPとCSSを組み合わせて画像の出現位置を制御する
4755 ワード
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function Northwest()
{
var doc=document.getElementById("image").style;
//alert(doc.styleFloat);
doc.styleFloat="left";
doc.display="block";
var doc2=document.getElementById("image2").style;
doc2.display="none";
//doc2.styleFloat="left";
}
function Northeast()
{
var doc=document.getElementById("image").style;
doc.display="block";
doc.styleFloat="right";
var doc2=document.getElementById("image2").style;
doc2.display="none";
//doc2.styleFloat="left";
}
function Southwest()
{
var doc=document.getElementById("image").style;
doc.display="none";
var doc2=document.getElementById("image2").style;
doc2.display="block";
doc2.styleFloat="left";
}
function Southeast()
{
var doc=document.getElementById("image").style;
doc.display="none";
var doc2=document.getElementById("image2").style;
doc2.display="block";
doc2.styleFloat="right";
}
function Hidden()
{
var doc=document.getElementById("image").style;
if(doc.visibility!="hidden")
doc.visibility ="hidden";
else
doc.visibility="visible";
}
</script>
<style type="text/css">
#div{
text-align: center;
}
#p{
clear:none;
width:320;
}
#image{
float:right;
}
#image2{
float:left;
display:none;
}
</style>
</head>
<body>
<div id="div">
<p id="p">
<img alt=" " src="1.gif" id="image">
（ ： ：12, 34 ， ：3,77 ……）， 。 ， …… ， 。 。
， ， like "%keyword%"
， ， like ， ， ，LIKE 。 ：like"%keyword1%" and like "%keyword2%" ... 。
， （ ） ， ， ==> ， ：[ ==> ， （ ： ， ）， ]，
<img alt=" " src="1.gif" id="image2"> 。
， ， 。
</p>
<input type="button" name="Northwest" value="Northwest" onclick="Northwest()"/>
<input type="button" name="Northeast" value="Northeast" onclick="Northeast()"/>
<input type="button" name="Southwest" value="Southwest" onclick="Southwest()"/>
<input type="button" name="Southeast" value="Southeast" onclick="Southeast()"/>
<input type="button" name="Hidden" value="Hidden" onclick="Hidden()"/>
</div>
</body>
</html>