javascriptでのランダムバナーについて

下記の方法でランダムバナーを表示させたいのですがIEで動きません。FireFox、safariではきちんと動いています。setAttributeがいけないというところまでわかったのですがどのように修正したらいいでしょうか?
function init(){
var alt = new Array() ,banner = new Array() ,EXTENSION ,htmlImg = {} ,i ,idx ,myImg = {} ,PATH ,str ,url = new Array();
PATH = "images/";
EXTENSION = ".png";
banner = ["test01" ,"test02" ,"test03" ,"test04" ,"test05"];
alt = ["test01" ,"test02" ,"test03" ,"test04" ,"test05"];
url = ["test01.html" ,"test02.html" ,"test03.html" ,"test04.html" ,"test05.html"];
setTimeout("init()",4000);
for(i = 0; i < 3; i++){
idx = Math.floor(Math.random() * banner.length);
myImg[i] = new Image();
myImg[i].src = PATH + banner[idx] + "_on" + EXTENSION;
htmlImg[i] = document.getElementById("bn" + i);
htmlImg[i].setAttribute("src", PATH + banner[idx] + EXTENSION);
htmlImg[i].setAttribute("alt", alt[idx]);
htmlImg[i].setAttribute("onmouseout", "this.src='" + PATH + banner[idx] + EXTENSION + "';");
htmlImg[i].setAttribute("onmouseover", "this.src='" + myImg[i].src + "';");
htmlImg[i].parentNode.setAttribute("href", url[idx]);

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2011/08/29 04:14:06
  • 終了:2011/09/05 04:15:03

回答(4件)

id:Jupiter2100 No.1

じゅぴたー回答回数444ベストアンサー獲得回数742011/08/29 06:40:18

ポイント125pt

ご質問のスクリプトが途中で途切れてしまっていますが、IEの場合はイベント処理のところを以下のように記述してみてください。

setAttribute("onmouseout", new Function("this.src = PATH + banner[idx] + EXTENSION"));
setAttribute("onmouseover", new Function("myImg[i].src"));
id:salt-00

早々の回答ありがとうございます。500文字まででしたので途中までにしてしまいました。。以下続きの部分です。上記のようにしてみたのですがやはりうまくいきません。

delete banner[idx];

str = banner.join(",");

str = str.replace(/,,/, ",");

str = str.replace(/^,/, "");

str = str.replace(/,$/, "");

if(i != 2)

banner = str.split(",");

delete alt[idx];

str = alt.join(",");

str = str.replace(/,,/, ",");

str = str.replace(/^,/, "");

str = str.replace(/,$/, "");

if(i != 2)

alt = str.split(",");

delete url[idx];

str = url.join(",");

str = str.replace(/,,/, ",");

str = str.replace(/^,/, "");

str = str.replace(/,$/, "");

if(i != 2)

url = str.split(",");

}

}

try

{

window.addEventListener("load", init, false);

}

catch(e)

{

window.attachEvent("onload", init);

}

2011/08/29 10:57:54
id:a-kuma3 No.2

a-kuma3回答回数4624ベストアンサー獲得回数19592011/08/29 11:38:47

ポイント125pt

IE と、別のブラウザで、コードの区別を付けたくないなら、

htmlImg[i].setAttribute("onmouseout", "this.src='" + PATH + banner[idx] + EXTENSION + "';");
htmlImg[i].setAttribute("onmouseover", "this.src='" + myImg[i].src + "';");

の二行を、

htmlImg[i].onmouseout = (function() {
                            var s = PATH + banner[idx] + EXTENSION;
                            return function() {
                                    this.src = s;
                                }
                        })();
htmlImg[i].onmouseover = (function() {
                            var s = myImg[i].src;
                            return function() {
                                    this.src = s;
                                }
                        })();

こんな感じに変更。

No.1 の返信にあるように、addEventListener() を使いたいなら、

var f = (function() {
            var s = PATH + banner[idx] + EXTENSION;
            return function() {
                    this.src = s;
                }
        })();
try {
    htmlImg[i].addEventListener("onmouseout", f, false);
} catch(e) {
    htmlImg[i].attachEvent("onmouseout", f);
}

f = (function() {
        var s = myImg[i].src;
        return function() {
                this.src = s;
            }
    })();
try {
    htmlImg[i].addEventListener("onmouseover", f, false);
} catch(e) {
    htmlImg[i].attachEvent("onmouseover", f);
}

流れが見えるように、addEventListener と attachEvent の使い分けを繰り返し書いてますが、

他にも onload で同じようなことをやってるので、別の関数として切り出した方が良いでしょうね。

id:salt-00

返信遅くなってしまい、申し訳ありません。

上記の方法で試してみたのですがうまく作動しなかったです。。

きっと私の認識不足なため変な風に直そうとしているんだと思います。

Cherenkovさんのコメントを参考に全文下記にアップしました。

JS

https://gist.github.com/1178979

HTML

https://gist.github.com/1178999

リンク付き画像10点からHTML上で初期値3点を記述し、4秒ごとにランダムで切り替わるようにしたいのです。


Cherenkovさん、ご丁寧にありがとうございます。

みなさまの優しさと自分のふがいなさに泣けてきます。

お手数お掛けしますが、よろしくお願いします。

2011/08/30 03:22:38
id:a-kuma3 No.3

a-kuma3回答回数4624ベストアンサー獲得回数19592011/08/30 11:44:27

ポイント125pt

No.2 の回答で書いた内容をつけくわえたソースを github に置きました。

https://gist.github.com/1180040 … javascript

https://gist.github.com/1180044 … HTML


元のソースを尊重して、イベントハンドラのところだけ修正してます。

id:salt-00

a-kuma3さん

返信遅くなってしまい、申し訳ありません。

windowsXP IE6で確認しているのですがランダムに切り替わる&オンマウス時の動きが全くなく初期値のままなのです。ウィンドウの下の部分では(ページが表示されましたと出ている部分)ランダムに画像を読みにいっているのですが。。他にこのページに

<script type="text/javascript" src="common/js/jquery.js"></script>

<script type="text/javascript" src="common/js/styleswitcher.js"></script>

<script type="text/javascript" src="common/js/lineup.js"></script>

<script type="text/javascript" src="common/js/scroll.js"></script>

TINY.scroller.init('scroll','scrollcontent','scrollbar','scroller','buttonclick'); </script>

$(document).ready(function() { $("ul#nav li").hover(function() { //Hover over event on list item $(this).css({ 'background' : ' url(common/images/gnavi.png) left -66px no-repeat'}); //Add background color and image on hovered list item $(this).find("span").show(); //Show the subnav } , function() { //on hover out... $(this).css({ 'background' : 'none'}); //Ditch the background $(this).find("span").hide(); //Hide the subnav }); }); </script>

<script type="text/javascript" src="common/js/jcarousellite.js"></script>

//<![CDATA[ $(".jCarouselLite") .jCarouselLite({ btnNext: ".btn_next", btnPrev: ".btn_prev", vertical: true, visible: 1, scroll: 1, auto: 3000, speed: 1000, easing: "easeOutQuint" }); //> </script>

<script type="text/javascript" src="common/js/jScrollPane.js"></script>

$(function() { $('.blog').jScrollPane({ scrollbarWidth: 20, arrowSize: 95 }); }); </script>

<script type="text/javascript" src="common/js/jquery-easing.js"></script>

を読み込んでいるのですが(多いですよね(汗)

・プルダウンメニュー(オンマウス画像あり)

・カルーセル

・テキストサイズ変更(小・中・大)

・TinyScroller

そちらとの問題な気もしています。。

せっかく丁寧にいろいろ教えていただいたのにごめんなさい。。。

2011/08/30 19:50:22
id:Cherenkov No.4

Cherenkov回答回数1503ベストアンサー獲得回数4932011/09/04 19:54:01

ポイント125pt

どうやらDD_belatedPNG.jsをいれると

画像の切り替わりができなくなってしまうようです。。

問題を切り分け、エラーメッセージ等を書きましょう。

今いまくいかないのはDD_belatedPNG.jsが原因?他のJSですか?

情報の小出しはいけません。

コピペで再現するコードを提示しないのはエスパー回答を強いられるので大変です。

(透過PNGの用意もめんどくさい)

  • id:Cherenkov
    どのような動作をしたいのか説明して、コピペで動くコードを提示すると回答が付きやすいです。

    以下のサービスは無料でコードを共有できます。
    https://gist.github.com/
    http://jsfiddle.net/
  • id:a-kuma3
    「IE で動きません」ってのは、ピクリとも動かないんでしょうか。
    github に乗せてもらったソースで、そのまま動いちゃうんですが...

    HTML の方は、以下のような感じです。id は打ち間違いだと思うので、bn* にしました。

    <html>
    <script src="a.js"></script>
    <body>
    <ul>
    <li><a href="test01.html"><img alt="test01" src="images/test01.png" id="bn0"></a></li>
    <li><a href="test02.html"><img alt="test02" src="images/test02.png" id="bn1"></a></li>
    <li><a href="test03.html"><img alt="test03" src="images/test03.png" id="bn2"></a></li>
    </ul>
    </body>
    </html>

    因みに、IE のバージョンは何を使ってるんでしょうか?
  • id:a-kuma3
    あ、そっか。mouseover がきちんと動かないのね。
  • id:a-kuma3
    >windowsXP IE6で確認しているのですが...
    XP + IE6 の環境があるので、試してみました。
    ぼくが github に置いたコードだけだと、ちゃんと動きますね。

    さあて、何が悪さしてるのかな...
    コードの断片しか見えてないので、想像するしかないんだけど、ぼくなら、こう攻めるかな。

    ・外部スクリプトは活かしたままで、コードを書いてるスクリプトを全てコメントアウトして、動作するかどうか
    ・それで駄目なら、外部スクリプトをひとつずつ消しながら、動作確認
    ・外部スクリプトのみで動作するなら、直接コードを書いているものを、機能単位に復活させて、動作確認
    ・返信で書いてもらったコードよりも、前の方に、今回のコードを読み込ませてみる
  • id:Cherenkov
    ・問題が再現するページのURLを教える
    ・コピペ(1つのファイル)で動作するコード出す
    ・jQuery使えるならブラウザを意識せずにもっときれいにかける
  • id:salt-00
    a-kuma3さん

    本当お手数お掛けしてしまい、申し訳ありません。
    一度a-kuma3さんのおっしゃられている方法で動作確認してみます。
    勉強になります。本当にありがとうございます。


    Cherenkovさん

    いつもわかりやすいアドバイスありがとうございます。
    何から何まで頼りにしてはいけないので
    a-kuma3さんの方法で自分で動作確認してみたいと思います。
    >・問題が再現するページのURLを教える
    は最後の手段にしたいと思います。

    >・jQuery使えるならブラウザを意識せずにもっときれいにかける
    あわわ。。そうなんですか。。応用力なくてすみません。。。
    カスタマイズ程度にしか触れていないので
    いつかちゃんとjQueryマスターできるように頑張ります。
  • id:a-kuma3
    >何から何まで頼りにしてはいけないので
    良いじゃん、頼れば。
    人力検索って、そういう趣旨のサイトなんだし。

    手に負えなくなれば、ケツをまくって逃げ出しますんで :-p
  • id:salt-00

    a-kuma3さん、本当にありがとうございます(´;ω;`)ブワッ

    まだ動作チェック中ですが、わからない場合お願いしてしまうと思います。。
    ホント、ありがとうございます(;´Д⊂)
  • id:salt-00
    どうやらDD_belatedPNG.jsをいれると
    画像の切り替わりができなくなってしまうようです。。

    https://gist.github.com/1192392

    IE6でも背景透明のPNGを表示させるためにいれているのですが、、
    HTMLでは
    <script>
    DD_belatedPNG.fix('img, .png_bg, #test, span, a');
    </script>
    と入れています。
    https://gist.github.com/1192386

    PNGをやめれたらはやいんでしょうが、、
    他の部分でもPNGを使うのでできればDD_belatedPNG.jsを使いたいです。。
    すみませんがよろしくお願いします。
  • id:a-kuma3
    ごめん、DD_belatedPNG.js のソースを軽く見てみたんだけど、よく分からないや。

    こいつの中で applyVML() というメソッドから呼ばれてる幾つかのメソッドで、ゴニョゴニョしてて、
    そのメソッドが onmouseenter と onmouseleave イベント (onmouseover と onmouseout に相当) でも
    実行されているので、イベントハンドラが呼ばれる順番とかが関係してそうな感じはするのだけど。
  • id:salt-00
    a-kuma3さん

    ありがとうございます。なんかごちゃごちゃですもんね。。
    でもa-kuma3さんのおかげで原因もわかったのでIE6でPNG表示できる他のJSをいれてみて動作できるか、DD_belatedPNG.jsのイベントハンドラ部分を調整して確認してみたいと思います。またいろいろ質問してしまうかもしれませんが、そのときはよろしくお願いします。
  • id:a-kuma3
    >またいろいろ質問してしまうかもしれませんが、そのときはよろしくお願いします。
    ふふっ、力が及ぶかどうか、分かりませんけどね。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません