2013年8月7日 星期三
2013 / 08 / 07 JavaScript Select / Option 點擊改變圖片 & 字體、顏色
JavaScript 基礎
http://www.ncku.edu.tw/~rcenter/book/html/JavaScript.html
很基本的debug語法
<Script Language="JavaScript">
<!--
alert("歡迎您光臨本站！");
//-->
</Script>
點擊改變網頁背景
http://bbs.php100.com/read-htm-tid-429226.html
點擊option更改圖片
<script type="text/javascript">
function img(form) {
document.imgurl.src = form.test.options[form.test.selectedIndex].value
}
</script>
<img src="http://asianhollo.com/javaback/img/gift1.gif" name="imgurl">
<form>
<select name="test" onchange="img(this.form)">
<option value="http://asianhollo.com/javaback/img/gift1.gif">圖示1</option>
<option value="http://asianhollo.com/javaback/img/gift2.gif">圖示2</option>
<option value="http://asianhollo.com/javaback/img/gift3.gif">圖示3</option>
</select>
</form>
來源：http://www.wretch.cc/blog/iamayeh/13277577
用div模仿select，還可以做特殊控制(?)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+DIV模拟SELECT并且把无效选项设置为灰色</title>
<script type="text/javascript">
$=function(id){
return document.getElementById(id);
}
var flag=false;
function shlist(){
$("selectList").style.display=$("selectList").style.display=="block"?"none":"block";
}
function changesever(ts){
document.getElementById("t_selected").innerHTML="---"+ts.innerHTML+"---";
shlist();
}
function setFlag(val){
flag=val;
}
function hideList(){
if(!flag)document.getElementById("selectList").style.display="none";
}
setCss=function(p){
p.style.cursor='hand';
p.style.backgroundColor='#BABABA';
}
removeCss=function(p){
p.style.backgroundColor='white';
}
</script>
<style type="text/css">
#contain{ width:200px; height:18px; }
#t_selected{
background-image:url(http://bbs.17gb.com/images/default/arrow_down.gif) !important;
background-position:100% 50% !important;
background-repeat:no-repeat !important;
font-size:12px;
border:#DFDFDF 1px solid;
}
#selectList{border:#DFDFDF 1px solid; font-size:12px; width:200px;text-align:left; display:none;}
#selectList span{width:200px}
</style>
</head>
<body>
<div id="contain">
<div id="t_selected" onclick="shlist();" onmouseover="setFlag(true);" onmouseout="setFlag(false);" onblur="hideList()">---请选---</div>
<div id="selectList" onmouseover="setFlag(true);" onmouseout="setFlag(false);">
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">餐饮美食</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">休闲娱乐</span><br/>
<span style='color:rgb(136, 136, 136)'>宾馆酒店</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">购物指南</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">运动场馆</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">生活便利</span><br/>
<span onclick="changesever(this);" onmouseover="setCss(this)" onmouseout="removeCss(this);">出行旅游</span><br/>
</div>
</div>
</body>
來源：http://www.iteye.com/topic/281056
★ ★ ★ -- 實際練習 -- ★ ★ ★
---- AJAX 部分 ----
<Script Language="JavaScript">
function changeTitleColor()
{
document.getElementById("title_demo").style.color=document.getElementById("title_color").value;
}
function changeTitleFace()
{
document.getElementById("title_demo").style.fontFamily=document.getElementById("title_face").value;
}
</Script>
<script type="text/javascript">
function img(tmp_form) {
document.tmp_bg_demo.src = tmp_form.pic.options[tmp_form.pic.selectedIndex].value
}
</script>
---- HTML 部分 ----
<div class="line">
<div class="label">標題顏色：</div><div class="input">
<select name="title_color" id="title_color" onChange="changeTitleColor()" >
<option>請選擇</option>
<optgroup label="基本顏色">
<option value="#FF0000"><font color="#FF0000">紅色</font></option>
<option value="#0000FF"><font color="#0000FF">藍色</font></option>
<option value="#669933"><font color="#669933">綠色</font></option>
<option value="#FF9933"><font color="#FF9933">橘色</font></option>
<option value="#FFFFFF"><font color="#FFFFFF">白色</font></option>
<option value="#000000"><font color="#000000">黑色</font></option>
</select>
</div>
</div>
<div class="line">
<div class="label">標題字型：</div><div class="input">
<select name="title_face" id="title_face" onChange="changeTitleFace()">
<option>請選擇</option>
<optgroup label="基本字型">
<option value="微軟正黑體">微軟正黑體(預設)</option>
<option value="標楷體">標楷體</option>
<option value="新細明體">新細明體</option>
</select>
</div>
</div>
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言