- 締切済み
スライドショーが出来ません。。
web作成は全くの初心者で、今までいろんなサイトの見本のhtmlをコピペしてなんとか少しづつ形にになってきたのですが、どうしてもスライドショーができません、、、 こちらのサイト（http://kowaza.boo.jp/）の＜スライドショー＞ * フェードインしながら次々と画像を表示 * というのを参考に作ってみたのですが、全然スライドショーになりません。 何がいけないのか全く分からないのですが、どこかおかしなところがありましたら教えて下さい。どうぞよろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>スライドショーの実験</title> <script type="text/JavaScript"> <!-- var myspd = 200; var myx = 5; var mypic = new Array("myp1","myp2","myp3"); var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } //--> </script> </head> <body onLoad="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"> <img src="top.jpg" width="300" name="myp1" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:40px ; left:50px ; z-index:2 ;"> <img src="before.jpg" width="300" name="myp2" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:60px ; left:80px ; z-index:3 ;"> <img src="after.jpg" width="300" name="myp3" border="0" style="filter:alpha(opacity=0);"></span> </body> </html>
- yutr
- お礼率45% (17/37)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは お使いのブラウザは何ですか？ filter:alphaはIE用なのでIE以外のブラウザで見ているのであればスライドショーはできません 参考サイトのサンプルは見れましたか？ 以下のようにしてみてください(IE,Opera,Firefox) <script type="text/JavaScript"> <!-- n = 0;j=0; obj =document.getElementsByTagName("img"); function mygo() { br = getbr(); if(br == "Explorer") { fadein1(); } else { fadein2();} } function getbr(){ var aName = navigator.appName.toUpperCase(); if (aName.indexOf("MICROSOFT") >= 0) return "Explorer"; return ""; } function fadein1() { if (n > 100) { j++;n=0;} if(j > 2) return false; n += 5; obj[j].filters['alpha'].opacity = n; setTimeout("fadein1()",200); } function fadein2() { if (n > 1) { j++;n=0;} if(j > 2) return false; n += 0.05; obj[j].style.opacity = n; setTimeout("fadein2()",200); } //--> </script> <style type="text/css"> img { opacity:0; } </style> <!--[if IE]> <style type="text/css"> img { filter : alpha(opacity="0"); } </style> <![endif]--> </head><body onload="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"><img src="top.jpg" width="300" name="myp1" border="0"></span> <span style=" position:absolute ; top:30px ; left:50px ; z-index:2 ;"><img src="before.jpg" width="300" name="myp2" border="0"></span> <span style=" position:absolute ; top:40px ; left:80px ; z-index:3 ;"><img src="after.jpg" width="300" name="myp3" border="0"></span> opacityにはもうひとつ-moz-opacityがあるようなのですが(Safari,NNみたい?)ブラウザを持っていないので確認ができません ブラウザ判断してこれらを使い分ければいいかと思います あと仮に document.getElementsByTagName("img"); としています サンプルのようにname判断でやってもいいです
- redfox63
- ベストアンサー率71% (1325/1856)
機能しているようですが ... 当方 WinXP SP2 + IE6です デバッグ用に <input type="text" name="myopacity"> <input type="text" name="myopacity"> <input type="text" name="myopacity"> と3個のテキストボックスを用意して mygoの先頭に document.all['myopacity'][0].value = document.images[mypic[0]].filters['alpha'].opacity; document.all['myopacity'][1].value = document.images[mypic[1]].filters['alpha'].opacity; document.all['myopacity'][2].value = document.images[mypic[2]].filters['alpha'].opacity; といった記述をして見ましょう 5 10 15 20 ...とカウントアップされるのか確認してみてください
関連するQ&A
- Firefoxとクロームでフェードインにならない
横並びの画像を3枚時間差でフェードイン（左から順に表示）させたいのですが、 ＩＥでは問題無く動くのですがFirefoxとGoogle Chromeではフェードインにも透過にもならず画像がそのままパっとでてしまいます・・。 FirefoxとGoogle Chrome対策ソース、他に良い方法などございましたら ご教授いただけますでしょうか。宜しくお願いいたします！ <script type="text/JavaScript"> // 画像のフェードイン・フェードアウト var myspd = 5; // 変化する速さ（ミリ秒単位） var myx = 10; // 何%ずつ変化させるか var mypic = new Array("px1","px2","px3"); // 画像のname（順番に並べる） var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } </script> 【ＨＴＭＬ】 <ul> <li><img src="image/mainpx_01.jpg" name="px1" width="365" height="484" style="display: inline; filter:alpha(opacity=2);" /></li> <li><img src="image/mainpx_02.jpg" name="px2" width="365" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> <li><img src="image/mainpx_03.gif" name="px3" width="270" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> </ul>
- 締切済み
- JavaScript
- 4：3とパノラマ写真の混在スライドショーについて
ホームページに写真のスライドショーを用意しています。 他板でのアドバイスで動かなくなったものが動くようになりました。 写真の表示もできるようなって良かったのですが、 若干問題があり、アドバイスをお願いしたいのです。 ＯＳ：win7 ＩＥ：１１ 下記のソースを頂きましたが・・・・ 写真 4：3表示・・・全体が表示されない（はみ出した感じ） 写真サイズ 800×600ですが → 1068×800と表示サイズが大きくなっています パノラマ：高さに合わせて左右がカットされたようになります。 800×284ですが → 2254×800の表示サイズの様です これも大きくはみ出しています どちらも、height:600pxとなっていますが、web上では800pxになっています ●なぜ高さが600pxの設定が有効にならないのか 狙いは、横方向800pxでパノラマにも対応したい （パノラマの場合、高さ方向は低く表示する） <STYLE type="text/css"> #container {width:100%;text-align:center;} #slideshow {margin:0 auto;width:800px;height:600px;text-align:left;} #slideshow div {width:800px;height:600px;overflow:hidden;position:relative;} #slideshow div div {top:0;left:0;position:absolute;} #slideshow ul {width:800px;} #slideshow ul li {width:100px;height:75px;float:left;display:inline;} #slideshow .active {filter:alpha(opacity=100)!important;-moz-opacity:1!important;opacity:1!important;} --> </STYLE> 4：3の写真（800：600）の全体表示 パノラマ写真800サイズの高さは自動調整 ができると良いのですが・・・ ここまで書いて、素人ですというのも申し訳ないように思いますが アドバイスをいただけないでしょうか
- ベストアンサー
- HTML
- chromeのcss位置ズレについて
CSSのpositionで画像を上にかぶせて表示させています。 そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。 下記の２つのハックを使った場合、display:noneだと反映されたのですが positionにすると何も反映しなくなります。 ハックはpositionには効かない、などあるのでしょうか？ どなたか教えていただけますでしょうか。 よろしくお願いいたします。 ----------------------- body:nth-of-type(1) #selector { position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85; } ----------------------- @media screen and (-webkit-min-device-pixel-ratio:0){ #selector { position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85; } }
- ベストアンサー
- CSS
- スライドショーを中央にしたい
ホームページビルダー6.0を使用してます。 スライドショーがモニターの大きさに関係なく中央に表示させたいのですが出来ません。 以下のタグの何処を直せば良いのでしょうか？ 宜しくお願いします。 [タグ] </SCRIPT></HEAD> <BODY bgcolor="#999999" text="#0000ff" link="#0000ff" vlink="#0000ff" alink="#0000ff" onload="HpbSlideInit(false, 4000, 'Layer6', 'Layer3', 'Layer1', 'Layer2', 'Layer3');"> <DIV style="width : 640px;height : 481px;top : 50px;left : 50px; position : absolute; z-index : 6; " id="Layer6">
- ベストアンサー
- その他（インターネット・Webサービス）
- レイヤーを背景だけ透過させたい
お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- HTML
- オーバーレイについての質問です。
オーバーレイについての質問です。 #overlay { position: absolute; top: 0; left: 0; width:100%; height: 100%; min-height: 100px; background: #000; z-index: 500; filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; } 上のようなスタイルでオーバーレイを使用しているのですが、 スクロールでするとどうしても下が切れてしまいます。 解決策を教えて下さい。よろしくお願いします。
- 締切済み
- HTML
- スライドショー画像がズレて表示されてしまいます…
jQuery とcssなどを使用し、TOPページでスライドショーを 表示させたいと考えています。 必要なccsファイル、jsファイル、htmlファイルや画像ファイルは サーバーにアップ済で、TOPページの他部分は予定通りに 表示できていますが、参照画像のようにスライドショーの画像が 右半分のみスペースにズレて表示されてしまい、左半分は何も 表示されていない状態となってしまいます。 ただ、PCによって表示状態が異なるようで、問題なくスライドショーが 表示されているＰＣもあります。 上記スライドショーのcss部分は、以下の通りです。 -------------------------------------------------------- /* .viewer ------------------------- */ .viewer { margin-top: 10px; margin-bottom: 0px; margin-left: 20px; width: 790px; height: 500px; position: absolute; overflow: hidden; } .viewer ul { width: 100%; overflow: hidden; position: absolute; } .viewer ul li { top: 0; left: 0; width: 100%; height: 500px; position: absolute; } .viewer ul li img { width: 750px; height: 500px; } /* sideNavi ------------------------- */ .viewer .btnPrev, .viewer .btnNext { margin-top: -25px; top: 50%; width: 50px; height: 50px; position: absolute; z-index: 100; } .viewer .btnPrev { left: 10px; background: #ccc url(../images/top-page/btnPrev.jpg) no-repeat center center; } .viewer .btnNext { right: 10px; background: #ccc url(../images/top-page/btnNext.jpg) no-repeat center center; } /* ======================================= ClearFixElements ======================================= */ .viewer ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; } .viewer ul { display: inline-block; overflow: hidden; } -------------------------------------------------------- ズレた状態をなくし、どのＰＣで閲覧しても 正常に表示されるようにするには、どこを修正すれば良いか どなたか教えて下さい！ よろしくお願い致します。
- 締切済み
- CSS
- 外部ファイルについて
JavaScriptやCSSなどHEAD内に書き込むものなら外部ファイルにできますよね？ ではBODY部に書くものは？？ <BODY> ： <DIV ID="MENU" STYLE="POSITION:ABSOLUTE; TOP:0; LEFT:0;"> <IMG SRC="../img/var.jpg" NAME="VAR" WIDTH=101% HEIGHT=25 STYLE="filter:Alpha(opacity=40);" onMouseOver="change(this,100);" onMouseOut="change(this,40);"> <SPAN STYLE="POSITION:ABSOLUTE; TOP:8; LEFT:10"> <A HREF="../default.htm"> <IMG SRC="../img/0101.gif" NAME="image01" BORDER=0></A> </SPAN> ： </DIV> となってるんですが、 <DIV>～</DIV> の間を外部ファイルにしたいんです。 このようなことはできますか？
- ベストアンサー
- CSS
- リンク付きスライドショーの不具合について
先日、ホームページを制作しました。そこにスライドショーを「A Simple jQuery Slideshow」といjavascriptを使って作ったあと、ソースの編集をして画像一つ一つにURLを貼り付けました。 しかし、なぜかスライドショーの最初が何も表示されない状態になってしまったのです。少し待つと、スライドショーが始まるのですが・・・ なんか不自然なので、急いで改善したいです。どうかご協力お願いします！ つくったホームページ→http://www.geocities.jp/raisutei/ A Simple jQuery Slideshow→http://jonraasch.com/blog/a-simple-jquery-slideshow ソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <link rel="shortcut icon" href="./favicon.ico"><title>らいす亭</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <style type="text/css"> /*** set the width and height to match your images **/ #slideshow { position:relative; height:350px; } #slideshow a { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow a.active { z-index:10; opacity:1.0; } #slideshow a.last-active { z-index:9; } </style></head> <body style="background-image: url(http://www.geocities.jp/raisutei/gazou/haikei.jpg);"><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116062;var jpt=1401374340</script><script language="JavaScript" <table style="text-align: left; margin-left: auto; margin-right: auto; width: 805px; height: 409px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><!-- this will work with any number of images --><!-- set the active class on whichever image you want to show up as the default (otherwise this will be the last image) --> <div style="text-align: center;" id="slideshow"><a href="http://www.geocities.jp/raisutei/consept.html"><img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/karaageintro.png" alt="Slideshow Image 1" class="active" align="middle"></a> <a href="http://www.geocities.jp/raisutei/okomeconsept.html"> <img style="width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/ocomeintro.png" alt="Slideshow Image 2"></a><a href="http://www.geocities.jp/raisutei/gozen.html"> <img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/gozenintro.png" alt="Slideshow Image 3"> </a></div> </td> </tr> </tbody> </table> ※一部中略しました。
- ベストアンサー
- JavaScript
- 外部CSSです。テーブルにスタイルを適用したいのですが・・・。
ほとんど初心者です。 filter:Alpha(opacity=75)で、半透明にしたいんです。 個別に設定するところまではできたのですが、 外部CSSの方に記述する際、どうしたらいいのかがわかりません。 table,td,th{ font-size : 12px; style="filter:Alpha(opacity=75)"; } と、まずはやってみたのですが間違っているようで＾＾； 一応、普通のテーブルとは分けたいので ”table75”と、名前をつけたいのですが、可能でしょうか？ どう記述したらいいか、どうかアドバイスお願い致します！
- ベストアンサー
- HTML
