• 締切済み

HTML内への2つのJavaScriptの書き込みについて

お世話になります。 この1週間皆様のお力をお貸しいただいて ようやくほぼ完成というところまでこぎつけました!! 本当に皆様のご協力に感謝です!ありがとうございます。 HTML内に、JavaScriptファイルへのリンクが2点 そのほかにJ Queryのギャラリーを利用しているため、 HTMLに直接書いてある 下記Javascriptがあります。 $('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', { delay:2000, numThumbs:16, <省略. . . . . . > onTransitionOut:function(callback) { $('#slideshow-adv, #caption-adv').fadeOut('fast', callback); }, onTransitionIn:function() { $('#slideshow-adv, #caption-adv').fadeIn('fast'); }, onPageTransitionOut:function(callback) { $('#thumbs-adv ul.thumbs').fadeOut('fast', callback); }, onPageTransitionIn:function() { $('#thumbs-adv ul.thumbs').fadeIn('fast'); } }); var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', { imageContainerSel:'#slideshow-min', controlsContainerSel:'#controls-min' }); }); ここに、まだ他のJavaScriptをHTMLページ内に 追加したいのですが、追加すると、 J queryのギャラリーの表示がなくなってしまいます。 追加したいJavaScriptは以下です。 <script type="text/javascript" charset="UTF-8"> var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/  'load', function () {   var cnt = 0, I, o;   var UL = document.getElementById('gazou');   var LI = UL.getElementsByTagName('LI');   var MI = document.getElementById('menu-index');   document.getElementById('num1').firstChild.nodeValue = I = LI.length;   for (var i = 0; i<I; i++) {    o = document.createElement('LI');    o.appendChild(document.createTextNode('○'));    o.id = 'idx-' + i;    MI.appendChild(o);   }   (M1 = LI[0]).style.zIndex = 2;  }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/  'mouseover', function (evt) {  var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/;  var p = getParent(e, 'id', 'menu-index');  var n;    if (M0) { M0.firstChild.nodeValue = '●'; M0.style.color = ''; M0 = null; }  if (p && e.nodeName == 'LI') {   e.firstChild.nodeValue = '●';   e.style.color = 'red';   M0 = e;   n = e.id.match(/-(\d+$)/)[1];   document.getElementById('num0').firstChild.nodeValue = n - 0 + 1;   Image('gazou', n);  } }, false); function getParent(node, type, val) {  return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) {  var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return;  var P = (function L () {   M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/;   if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30);  });  LI.style.zIndex = 1;  LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/;  P(); } // --> </script> HTML内に書き込むJavaScriptは1つでないといけないのでしょうか? また、この問題を解決するには、どうすればよいでしょうか? よろしくご教授お願いいたします!!!

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

>HTML内に書き込むJavaScriptは1つでないといけないのでしょうか? そんなことはありません。 >また、この問題を解決するには、どうすればよいでしょうか? 直接の原因はわかりませんが、おそらくなんらかの競合でしょうね。 オブジェクトに対するメソッド、グローバルの変数名、ユーザー関数名 など競合すれば後で書いたほうが優先されると思います。 問題を解決するためには、ソースを改変する必要があるでしょう。 そうなると元ライブラリの著作権の問題もでてくるでしょう、 改変したライブラリを公開していいかどうか作者に確認をとって から質問してください。=自己解決できないならバッティング するライブラリは同時使用しないというのが筋ということです

mihomama84
質問者

お礼

おっしゃる通り中で使用しているScriptの競合でした! ご回答ありがとうございました。

関連するQ&A

  • 続き] divの背景画像を、徐々に表示させるには?

    トップページの2つのdivボックスの背景画像を、徐々に表示されるようにするjavascriptを作って頂いたのですが、リピートをやめる方法を御教えいただくのを忘れてしまいました! (http://oshiete1.goo.ne.jp/qa3921804.html) リピートをとめるには、下記ソースをどのようにすればよろしいでしょうか? ------------------------------------------------------------ fade.js ------------------------------------------------------------ var after = 10; // 秒数を指定 var tid1; var tid2; window.onload = function () { fdi2(); tid2=window.setInterval("fdi2()", after*1000); }; function fdi2() { var img1 = document.getElementById("limg"); img1.style.visibility = "visible"; fadeIn("limg", 0); var img2 = document.getElementById("rimg"); img2.style.visibility = "visible"; fadeIn("rimg", 0); } function fadeIn(imgId, opacity) { if (opacity <= 100) { setOpacity(document.getElementById(imgId), opacity); opacity += 10; tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80); } else { window.clearTimeout(tid1); } } function setOpacity(img, opacity) { img.style.filter = "alpha(opacity:" + opacity + ")"; img.style.KHTMLOpacity = opacity / 100; img.style.MozOpacity = opacity / 100; img.style.opacity = opacity / 100; }

  • javascript スライドバー

    ダイナミックHTMLに掲載されている jsでのスライダーを同一ページで複数使いたいのですが どおうすればいいでしょうか? <body onLoad="Init()">で読み込んでいます。 詳しい方がいましたらご教授お願い致します。 var iniX = 150; //バーの初期位置(x) var iniY = 0; //バーの初期位置(y) var dY = -45; //バーに対するスライダーの表示位置(y) var dX1 = 0; //バーに対するスライダーの表示位置(x,最も左) var dX2 = 330; //バーに対するスライダーの表示位置(x,最も右) var valx = -120; //バーに対する数値を表示する位置(x) var valy = -120; //バーに対する数値を表示する位置(y) var minValue = 0; //最小値 var maxValue = 1500; //最大値 var iniValue = 0; //初期値 var M_flag = false; var mdx,mdlayx,mmx,mmlayx; var xmax,xmin; function Init(){ dx = dX2 - dX1; x = dx * ((iniValue - minValue) / (maxValue - minValue)); xmin = iniX + dX1; xmax = iniX + dX2; if(document.all){ document.all("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.all("iLf").style.posLeft = xmin + x; document.all("iLf").style.posTop = iniY + dY; document.all("iLb").style.posLeft = iniX; document.all("iLb").style.posTop = iniY; document.all("iLv").style.posLeft = iniX + valx; document.all("iLv").style.posTop = iniY + valy; document.all("iLv").innerHTML = iniValue; }else if(document.layers){ }else if(document.getElementById){ document.getElementById("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.getElementById("iLf").style.left = xmin + x+"px"; document.getElementById("iLf").style.top = iniY + dY+"px"; document.getElementById("iLb").style.left = iniX+"px"; document.getElementById("iLb").style.top = iniY+"px"; document.getElementById("iLv").style.left = iniX + valx+"px"; document.getElementById("iLv").style.top = iniY + valy+"px"; document.getElementById("iLv").innerHTML = iniValue; document.testimg.width = iniValue/4.5; document.testimg.height = 35; } } function Mdown(e){ if(document.all){ mdx = event.x; mdlayx = document.all("iLf").style.posLeft; }else if(document.layers){ }else if(document.getElementById){ mdx = parseInt(e.pageX); mdlayx = parseInt(document.getElementById("iLf").style.left); } M_flag = true; return false; } function Mup(e){ M_flag = false; return false; } function Mmove(e){ if(document.all){ if(M_flag){ mmx = event.x; mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.all("iLf").style.posLeft = mmlayx; document.all("iLv").innerHTML = x; } event.returnValue = false; }else if(document.layers){ }else if(document.getElementById){ if(M_flag){ mmx = parseInt(e.pageX); mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.getElementById("iLf").style.left = mmlayx+"px"; document.getElementById("iLv").innerHTML = x; document.testimg.width = x/4.5; document.testimg.height = 35; } return false; } }

  • javascriptでのフェードイン

    javascriptで画像表示をフェードインにしたいと思っております。 ネット上の情報から以下のソースを使用しております。 1html上に一つの画像を配置すると問題無く機能するのですが、 複数の画像を表示しようとすると一つ目の画像しか表示されません。 どこを変更すれば良いのか分からず困っております・・・ 修正方法、もしくはもっと簡単な方法がございましたら教えていただけないでしょうか。 ※以下のサンプルでは画像は二つですが、実際の使用時には制約上は無制限で画像を配置する予定です。 (Photologのサムネイル表示での使用を想定しております。) ///javascript file/// document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); window.onload = function() {initImage()} function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() {initImage()} //////////////////////// ///html file/// <html> <head> <title></title> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto" /></div> <img src="img_02.jpg" id="thephoto" /></div> </body> </html> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。

  • JavaScriptエラーについて

    お世話になります。 おわかりになる方、ぜひ教えてください。 タブメニューのボタンを押すと、内容が切り替わるというJavaScriptなのですが、いちよう正常に動作はしているようなのですが、エラーがでてしまいます。 エラーを無くしたいのですが、どうすればいのでしょうか? 【エラー内容】 'document.getElementById()'はNullまたはオブジェクトではありません。 【HTML】 <div id="javascript_tab_sample"> <ul> <li><a href="#W3C">W3C</a></li> <li><a href="#xhtml">xhtml</a></li> </ul> <dl id="w3c"> <p>内容1</p> </dl> <dl id="xhtml"> <p>内容2</p> </dl> </div> 【JavaScript】 window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('w3c'), document.getElementById('xhtml') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } よろしくお願いします。

  • javascriptでのフェードイン

    javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE(6&7)で確認すると「エラー:オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload~」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file(fade.js)/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////

  • 画像スライダーをやってますが

    <script type="text/javascript"> <!-- $(function(){ var sty=$("#s1"); sty.each(function(){ var mo1=$(this); var mo2=mo1.find("ul"); var mo3=mo1.find("li"); var mo4=mo1.find("li:first"); mo3.css({display:"block",opacity:"0",zIndex:"1"}); mo4.css({zIndex:"2"}).stop().animate({opacity:"1"},3500); setInterval(function(){ mo2.find('li:first-child').animate({opacity:'0'},1500).next('li').css({zIndex:'100'}).animate({opacity:'1'},1500).end().appendTo(mo2).css({zIndex:'99'}); },5000); }); }); --> </script> </head> <body> <div id="s1"> <ul> <li><img src="rtp/7.jpg" width="300px" height="300px"></li> <li><img src="rtp/9.jpg" width="300px" height="300px"></li> <li><img src="rtp/10.jpg" width="300px" height="300px"></li> </ul> </div> </body> </html> 見よう見まねで成功はしましたが、見真似なのでどういう構造なのか勉強しているところです。 今日は前半をなんとかやったんですが mo3.css({display:"block",opacity:"0",zIndex:"1"}); の部分のdisplay:"block"はなぜやっているのかが解りませんでした。 最初の設定は画像を消すところだと思うのですが、だとするとなぜblockなのかが解りません。

  • class追加でロールオーバーするDOMのjavascript

    イベントハンドラをjs内に内包したロールオーバーを作成していて、 解決できない問題が発生しています。 リンクボタンをクリックして次のページに遷移したあと、 ブラウザの戻るボタンで戻るとonmouseover時の状態で戻ってしまいます。 原因はonunloadが動作がしていないためと思います。 onunloadをonclickにするとこの問題は回避はできますが、 クリックしたら必ず別ページに遷移しなければいけなくなります。 このスクリプトは必ずしもaタグでなくてもロールオーバーできるようにしたいのでうまい解決策ではありません。 何かよい解決方法はありますでしょうか。 // javascript start window.onload = function() { if(!document.getElementsByTagName) return false; var AddClass = document.getElementsByTagName("*"); for(var i=0;i<AddClass.length;i++){ if(AddClass[i].className.match("^(.+? )?addclass.+?( .+?)?$")){ if (document.all){ // IE AddClass[i].onmouseover = AddClassOn; AddClass[i].onmouseout = AddClassOff; AddClass[i].onunload = AddClassOn; }else{ AddClass[i].addEventListener("mouseover", AddClassOn, false); AddClass[i].addEventListener("mouseout", AddClassOff, false); AddClass[i].addEventListener("unload", AddClassOff, false); } } } function AddClassOn() { id_name = this.className.replace(/^(.+? )?addclass_(.+?)_.+?( .+?)?$/i,"$2"); class_name = this.className.replace(/^(.+? )?addclass_.+?_(.+?)( .+?)?$/i,"$2") var classNameOG = document.getElementById(id_name).className; var id_Node = document.getElementById(id_name); var createAttr = document.createAttribute("class"); createAttr.nodeValue = classNameOG + " " + class_name; id_Node.setAttributeNode(createAttr); } function AddClassOff() { id_name = this.className.replace(/^(.+? )?addclass_(.+?)_.+?( .+?)?$/i,"$2"); class_name = this.className.replace(/^(.+? )?addclass_.+?_(.+?)( .+?)?$/i,"$2") var classNameOG = document.getElementById(id_name).className.replace(class_name,""); var id_Node = document.getElementById(id_name); var createAttr = document.createAttribute("class"); createAttr.nodeValue = classNameOG; id_Node.setAttributeNode(createAttr); } } // javascript end /* style start */ .changeclass{ padding:4px; background:#ff0; border:1px solid #f00; } /* style end */ /* html start */ <body id="knowhow" class="body_test"> <ol> <li><a href="test.html"><img src="image/list01.gif" class="addclass_knowhow_changeclass" width="64" height="64" alt="ボタン" /></a></li> </ol> </body> /* html end */ ちなみに現状のスクリプトはidだけにclass追加するように作っていますが、 最終形は追加するclassのid指定部分をbodyやparentやthisにすることで、 id以外にもclassが追加できる仕様にする予定です。 よろしくお願いいたします。

  • IE11 javascriptについて

    すみません、IE11なってから、以下のjavascriptが動かなくなりました。 画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。 全部のロジックを書いてしまいましたが、 何処がIE11から変更されたかが解らなくて、困っている所です。 何処を直すのか、全部聞くのもあつかましいと思いました、 どのあたりを見直しすれば宜しいですか。 教えて頂ければ幸いです。 <SCRIPT language="JavaScript"> <!-- var img = new Array(); img[0] = new Image(); img[0].src = "img/4031.jpg"; img[1] = new Image(); img[1].src = "img/4032.jpg"; img[2] = new Image(); img[2].src = "img/4031.jpg"; img[3] = new Image(); img[3].src = "img/4032.jpg"; img[4] = new Image(); img[4].src = "img/4031.jpg"; imgMaxSizeW = 171; imgMaxSizeH = 141; alphaTimer = 10; stopTimer = 2000; nextImgTimer = 1000; _dom=(document.all?3:(document.getElementById?1:(document.layers?2:0))); function getWindowSize() { if(_dom == 1 || _dom == 2) { win_width = self.innerWidth; win_height = self.innerHeight; } if (_dom == 3) { win_width = document.body.clientWidth; win_height = document.body.clientHeight; } } function showLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "visible"; if (_dom == 2) document.layers[layerName].visibility = "show"; if (_dom == 3) document.all(layerName).style.visibility = "visible"; } function hideLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "hidden"; if (_dom == 2) document.layers[layerName].visibility = "hide"; if (_dom == 3) document.all(layerName).style.visibility = "hidden"; } function writeHTML(layerName,html) { if (_dom == 1) { var div = document.getElementById(layerName); while(div.hasChildNodes()) div.removeChild(div.lastChild); var range=document.createRange(); range.selectNodeContents(div); range.collapse(true); var cf=range.createContextualFragment(html); div.appendChild(cf); } if (_dom == 2) { var div = document.layers[layerName]; div.document.open(); div.document.write(html); div.document.close(); } if (_dom == 3) document.all(layerName).innerHTML = html; } function moveLayerTo(layerName, x, y){ if (_dom == 1) { document.getElementById(layerName).style.left = x + scrollX; document.getElementById(layerName).style.top = y + scrollY; } if (_dom == 2) { document.layers[layerName].left = x + pageXOffset; document.layers[layerName].top = y + pageYOffset; } if (_dom == 3) { document.all(layerName).style.pixelLeft = x + document.body.scrollLeft document.all(layerName).style.pixelTop = y + document.body.scrollTop; } } function changeAlpha(layerName) { if (_dom == 3) { if (alphaCount < 200) { alphaCount += 2; op = alphaCount > 100 ? 100 - (alphaCount-100) : alphaCount; document.all(layerName).filters["alpha"].opacity = op; if (op == 100) { tim = setTimeout("changeAlpha('"+layerName+"')", stopTimer); } else { tim = setTimeout("changeAlpha('"+layerName+"')", alphaTimer); } } else { hideLayer(layerName); clearTimeout(tim); tim = setTimeout("setAlphaImgPos()",nextImgTimer); } } else { setTimeout("setAlphaImgPos()",nextImgTimer*2); } } var imgCount = 0; function setAlphaImgPos() { writeHTML("imgLay",'<IMG src="' + img[imgCount].src + '" border="0">'); imgCount++; if (imgCount >= img.length) imgCount = 0; getWindowSize(); sX = Math.floor(Math.random()*(win_width-imgMaxSizeW-10)); sY = Math.floor(Math.random()*(win_height-imgMaxSizeH-10)); moveLayerTo("imgLay",sX,sY); showLayer("imgLay"); alphaCount = 0; changeAlpha("imgLay"); } window.onload = setAlphaImgPos; // --> </SCRIPT>

  • JavaScriptにて『var val2 = "dv" + i;』のdvとは?、超初心者です。

    <script type="text/javascript"> <!-- var timerID = ""; function mn(n){ if(timerID != ""){ clearTimeout(timerID); } var val = n; dlt2(); document.getElementById(val).style.visibility="visible"; document.getElementById(val).style.zIndex="1"; } function dlt(){ timerID=setTimeout("dlt2()",100); } function dlt2(){ for (i=1;i<3;i++){ var val2 = "dv" + i; document.getElementById(val2).style.visibility="hidden"; document.getElementById(val2).style.zIndex="0"; } } //--> </script> <style type="text/css"> <!-- a{text-decoration:none;color:gray;} a:hover{color:#000000;} body{color:#000000;font-size:12pt; line-height:150%;font-family:"MS Pゴシック";} table{color:#ffffff;font-size:12pt; line-height:150%;font-family:"MS Pゴシック";} #dv1{ /* ↓ここの position の値がプルダウンメニュー1の表示位置です */ position:absolute;left:12;top:42; background-color:#ffffff;visibility:hidden; border: 1px solid gray; } --> </style> </head> <body> (文字数制限により省略させていただきます) </body> </html> ---------- 参考URL: http://ryos.info/hp_sakusei/pulldown.htm JavaScriptでプルダウンメニューを作ろうとして、ネットで勉強していますが早速つまずいています。 調べてみましたが、結局解りませんでした。 上記のfunction dlt2()の部分で、『var val2 = "dv" + i;』とあります。 この"dv" とは何を表しているのでしょうか? 初歩的な質問で申し訳ございません。 教えていただけましたら幸いです。

  • MacIEやOperaでも動作させたい

    MacIEやOperaでも動作させたいのですが、わからないのです。宜しくお願いします。 <HEAD> <STYLE TYPE=\"text/css\"> <!-- #links0 { position:absolute; left:430;top:35; z-index:2 ;} .lays { position:absolute; left:70;top:380; width:200;height:160; clip:rect(0,200,160,0); line-height:150%; text-align:center; z-index:0 ;} //--> </STYLE> <SCRIPT LANGUAGE=\"JavaScript\"> <!-- function setBGCOLOR(layName,color){ if(document.getElementById){window.document.getElementById(layName).style.backgroundColor=color;} else{document.layers[layName].bgColor=color;} } function zindexLAYER(layName,zindex){ zindex = zindex - 0; if(document.getElementById){window.document.getElementById(layName).style.zIndex=zindex;} else{document.layers[layName].zIndex=zindex;} } function c02ini(){  setBGCOLOR(\'msg1\',\'#decdce\')  setBGCOLOR(\'msg2\',\'#decdce\') } function swtOnZ(layName){  zindexLAYER(\'msg1\',0);zindexLAYER(\'msg2\',0)  zindexLAYER(layName,2) } //--> </SCRIPT> </HEAD> <BODY onload=\"c02ini()\" text=\"#522c29\"> <DIV ID=\"links0\"> <A href=\"1.html\" onmouseover=\"swtOnZ (\'msg1\')\">1</A><BR> <P><A href=\"2.html\" onmouseover=\"swtOnZ (\'msg2\')\">2</A><BR> </DIV> <DIV CLASS=\"lays\" ID=\"msg1\"> <FONT>1</FONT> </DIV> <DIV CLASS=\"lays\" ID=\"msg2\"> <FONT>2</FONT> </DIV> </BODY>