setOpacity()
レイヤ−の背景色の不透明度を指定するサンプルファンクションです。
n6,m1はstyle.m1Opacityを利用し、Win版e5,e6はfilters.alpha.opacityを100倍してあわせています
(現状m1Opacityはonload時に対象レイヤーのsetOpacity()をダミーで指定したうえで使用してください。
また、m1.1では直っていますが、m1.0までとn7ではなぜか不透明度の1が動作しないので0.9などでの代替が必要です)。
n4とMac版e4,e5にはopacityはありません(opera以外は引数が0の時だけ便宜的にvisibilityをhiddenすることで消しています)。
aタグに書かれているonmouseoverはdivと重複していますがこれはn4用です。不要なら削ってください。
(これらのopacityはCSS2までには指定されていない暫定実装なので将来のCSS仕様によっては変更される場合もあり得ることに注意してください。)
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
Syntax : setOpacity('レイヤ−名',不透明度)
function setOpacity(layName,arg) {
//arg は 0透明 1不透明
//n4やmac-e4などopacity未対応は0以下で代替処理としてhiddenする
var ua = navigator.userAgent
if( window.opera ) return //o6,o7
if( document.layers ) //n4
var oj = document.layers[layName]
else if( document.all ) //e4,e5,e6
var oj = document.all(layName).style
else if( document.getElementById ) //n6,n7,m1,s1
var oj =document.getElementById(layName).style
if(document.layers ||
ua.indexOf('Mac_PowerPC') !=-1 && document.all ||
ua.indexOf('Safari') !=-1 ) { //n4,mac-e4,mac-e5,s1
//opacityの使えないブラウザ用代替処理
if(arg>0) oj.visibility='visible'
else if(arg<=0) oj.visibility='hidden'
} else if(document.all) { //win-e4,win-e5,win-e6
document.all(layName).style.filter="alpha(opacity=0)"
document.all(layName).filters.alpha.Opacity = (arg * 100)
} else if(ua.indexOf('Gecko')!=-1) //n6,n7,m1
document.getElementById(layName).style.MozOpacity = arg
}
Example
<script type='text/javascript'>
<!--
/*/////////////////// 不透明度指定用関数20030425 UseFree
========================================================
Win n6 n7 moz e5 e6
Mac n6 n7 moz
Linux n6 n7 moz
========================================================
// レイヤ−の不透明度を指定する
// n4とmac-e4,mac-e5,o6,o7,s1などOpacity未実装の
//ブラウザでは動作しません。
//(opera以外は引数が0以下の時に便宜的にvisibilityを
// hiddenすることで消しています)
書式
setOpacity('レイヤ−名',不透明度)
レイヤ−名 対象レイヤーのid名
透明度 0〜1の間で指定。0は透明、1は不透明。
使用例
setOpacity('lay1', 0 )
setOpacity('lay1', 1 )
setOpacity('lay1', 0.5 )
Support http://game.gr.jp/js/
=======================================================*/
function setOpacity(layName,arg) {
//arg は 0透明 1不透明
//n4やmac-e4などopacity未対応は0以下で代替処理としてhiddenする
var ua = navigator.userAgent
if( window.opera ) return //o6,o7
if( document.layers ) //n4
var oj = document.layers[layName]
else if( document.all ) //e4,e5,e6
var oj = document.all(layName).style
else if( document.getElementById ) //n6,n7,m1,s1
var oj =document.getElementById(layName).style
if(document.layers ||
ua.indexOf('Mac_PowerPC') !=-1 && document.all ||
ua.indexOf('Safari') !=-1 ) { //n4,mac-e4,mac-e5,s1
//opacityの使えないブラウザ用代替処理
if(arg>0) oj.visibility='visible'
else if(arg<=0) oj.visibility='hidden'
} else if(document.all) { //win-e4,win-e5,win-e6
document.all(layName).style.filter="alpha(opacity=0)"
document.all(layName).filters.alpha.Opacity = (arg * 100)
} else if(ua.indexOf('Gecko')!=-1) //n6,n7,m1
document.getElementById(layName).style.MozOpacity = arg
}
/*//////////////////////// 不透明度指定用関数ここまで */
//-->
</script>
<style type="text/css">
<!--
.lays {
position : absolute ;
left : 230px ;
padding : 2px ;
background-color : green ;
width : 240px ;
height : 20px ;
clip : rect(0,240,20,0) ;
}
a { color : #ffffff ; }
-->
</style>
<body onload="setOpacity('a1',0.9);
setOpacity('a2',0.9);
setOpacity('a3',0.9);
setOpacity('a4',0.9)">
<!--背景色画像用レイヤー///////////////-->
<div id="a0"
style="position:absolute;left:100px;top:80px">
<img src="./moku.gif" width="200" height="200">
</div>
<!--このレイヤ−の背景色が変わります///////////////-->
<div id="a1" class="lays"
onmouseover="setOpacity('a1',0.5)"
style="top:110px">
<a href="http://allabout.co.jp/computer/javascript/closeup/CU20010415/"
onmouseover="setOpacity('a1',0.5)">
setOpacity('a1',0.5) </a>
</div>
<!--このレイヤ−の背景色が変わります///////////////-->
<div id="a2" class="lays"
onmouseover="setOpacity('a2',0.3)"
style="top:140px">
<a href="http://allabout.co.jp/computer/javascript/closeup/CU20010415/"
onmouseover="setOpacity('a2',0.3)">
setOpacity('a2',0.3)</a>
</div>
<!--このレイヤ−の背景色が変わります///////////////-->
<div id="a3" class="lays"
onmouseover="setOpacity('a3',0.2)"
style="top:170px">
<a href="http://allabout.co.jp/computer/javascript/closeup/CU20010415/"
onmouseover="setOpacity('a3',0.2)">
setOpacity('a3',0.2)</a>
</div>
<!--このレイヤ−の背景色が変わります///////////////-->
<div id="a4" class="lays"
onmouseover="setOpacity('a4',0)"
style="top:200px">
<a href="http://allabout.co.jp/computer/javascript/closeup/CU20010415/"
onmouseover="setOpacity('a4',0)">
setOpacity('a4',0)</a>
</div>
