マンガでよめる痔のこと・薬のこと

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>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

こんにちは



お使いのブラウザは何ですか?
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判断でやってもいいです
    • good
    • 0

機能しているようですが ...


当方 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 ...とカウントアップされるのか確認してみてください
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング