內部間距 padding
id指令
階層導向 向下拉式選單取值 用name document.f1.sel.value;
DOM 用 id document.getElementById("img1").src=timg;
<script language="javascript">
function fun1()
{
var timg=document.f1.sel.value;
document.getElementById("img1").src=timg;
}
</script>
<body>
<form id="f1" name="f1">
<table id="tb1" border="2" >
<tr>
<td >地點；
</td>
<td>
<select id="sel" name="sel" style="width:200; background-color:#0FF">
<option value="image/h01.jpg" >阿里山
<option value="image/h02.jpg" >合歡山
<option value="image/h03.jpg" >日月潭
<option value="image/h04.jpg" >野柳
</select>
</td>
<td align="center">
<input type="button" value="確定" onclick="fun1()" />
</td>
</tr>
<tr>
<td colspan="3" width="300">
<img id="img1" src="image/h01.jpg" />
</td>
</tr>
</table>
</form>
=====================================
<style type="text/css">
#dv1 ol {
list-style:none;
margin-left:-20px;
padding-top:30px;
}
#dv1 ol li {
display:inline;
float:left;
padding:10px;
}
#dv2 ol {
list-style:none;
margin-top:-15px;
margin-left:-20px;
padding-top:30px;
}
#dv2 ol li {
display:inline;
float:left;
padding:10px;
}
#dv3 ol {
list-style:none;
margin-top:-15px;
margin-left:-20px;
padding-top:30px;
}
#dv3 ol li {
display:inline;
float:left;
padding:10px;
}
</style>
<script language="javascript">
function fun(x)
{
//alert(x);
window.open(x,"win1","width=600px,height=450px,top=120px,left=100px");
}
</script>
<body>
<div id="dv1" style="width:650px; height:200px; background-color:#9C0;">
<ol>
<li><a href="javascript:void;" onclick="fun('image/h05.jpg')" >
<img src="image/h05.jpg" width="180" />
</a>
<li><a href="javascript:void;" onclick="fun('image/h06.jpg')" >
<img src="image/h06.jpg" width="180" />
</a>
</li>
<li><a href="javascript:void;" onclick="fun('image/h07.jpg')" >
<img src="image/h07.jpg" width="180" />
</a>
</li>
</ol>
</div>
<div id="dv2" style="width:650px; height:200px; background-color:#9C0;">
<ol>
<li><a href="javascript:void;" onclick="fun('image/h05.jpg')" >
<img src="image/h05.jpg" width="180" />
</a>
<li><a href="javascript:void;" onclick="fun('image/h06.jpg')" >
<img src="image/h06.jpg" width="180" />
</a>
</li>
<li><a href="javascript:void;" onclick="fun('image/h07.jpg')" >
<img src="image/h07.jpg" width="180" />
</a>
</li>
</ol>
</div>
<div id="dv3" style="width:650px; height:200px; background-color:#9C0;">
<ol>
<li><a href="javascript:void;" onclick="fun('image/h05.jpg')" >
<img src="image/h05.jpg" width="180" />
</a>
<li><a href="javascript:void;" onclick="fun('image/h06.jpg')" >
<img src="image/h06.jpg" width="180" />
</a>
</li>
<li><a href="javascript:void;" onclick="fun('image/h07.jpg')" >
<img src="image/h07.jpg" width="180" />
</a>
</li>
</ol>
</div>
</body>
===========================================
沒有留言:
張貼留言