■マウスを載せると影が変化します。
［Shadow］ |
［Shadow］ |
■クリックする度にShadowをon／offできる。
 |
(★特記★)左の写真に直接Shadowを設定しても影は表示されない。DIVタグで囲み、そのDIVタグにShadowを設定する。なおかつDIVタグ
のwidth値、height値を写真のサイズより大きくしないと影は表示されない。右の写真では、直接Shadowを設定できる。
・要素に背景色が設定されている場合、陰影は表示されない。背景色と一緒に用いな いこと。
Sample Source......................................................................>>>
<style TYPE="text/css"><!--
#d1 {width:150;font:35pt 900;color:tomato;cursor:hand;
filter:shadow(color=gray,direction=135)}
#d2 {width:150;border:solid green 5px;font:35pt 900;
color:tomato;cursor:hand;
filter:shadow(color=blue,direction=135)}
#pic1 {filter:shadow(color=magenta,direction=135)}
#pic2 {filter:shadow(color=yellow,direction=225)}
--></style>
<script language="JavaScript"><!--
function ShadowChange(obj,m){
if(m == 1){
//onmouseoverの場合
if(obj.id == "d1")obj.filters.shadow.direction
= 270;
if(obj.id == "d2")obj.filters.shadow.direction
= 180;
}
if(m == 2){
//onmouseoutの場合
obj.filters.shadow.direction = 135;
}
}
function Pic1OnOff(){
//城の写真をｸﾘｯｸする度に、Shadowが設定されていなければ設定し、
//設定されていれば取り消す。
if(pic1.style.filter == "nothing"){
pic1.style.filter = "shadow(color=#0d690d,direction=135)";
}
else{
pic1.style.filter = "nothing";
}
}
function Pic2OnOff(){ //梅の写真をｸﾘｯｸする度に
if(pic2.style.filter == "nothing"){
pic2.style.filter =
"shadow(color=pink,direction=225)";
}
else{
pic2.style.filter = "nothing";
}
}
//--></script>
</head>
<body>
<div id="d1" onmouseover="ShadowChange(this,1)"
onmouseout="ShadowChange(this,2)"><p>［Shadow］</p>
</div>
<div id="d2" onmouseover="ShadowChange(this,1)"
onmouseout="ShadowChange(this,2)"><p>［Shadow］</p>
</div>
<div id="pic1"
style="width:250;height:170" onclick="Pic1OnOff();">
<img src="../../java/jadata/ja02a.jpg" width="200"
height="150">
</div>
<img id="pic2" src="../../images/cut/025.gif"
width="103" height="116" onclick="Pic2OnOff();">
end(最終更新:12/11/10)
