人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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]);


●質問者: salt-00
●カテゴリ:インターネット ウェブ制作
✍キーワード:firefox href HTML IE JavaScript
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● じゅぴたー
●125ポイント

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

setAttribute("onmouseout", new Function("this.src = PATH + banner[idx] + EXTENSION"));
setAttribute("onmouseover", new Function("myImg[i].src"));
◎質問者からの返答

早々の回答ありがとうございます。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);

}


2 ● a-kuma3
●125ポイント

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 で同じようなことをやってるので、別の関数として切り出した方が良いでしょうね。

◎質問者からの返答

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

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

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

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

JS

https://gist.github.com/1178979

HTML

https://gist.github.com/1178999

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


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

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

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


3 ● a-kuma3
●125ポイント

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

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

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


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

◎質問者からの返答

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

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

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


4 ● Cherenkov
●125ポイント

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

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

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ