【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。

このQ&Aのポイント
  • ロールオーバーと画像自動切換えがバッティングし、ロールオーバーが正常に動作しなくなりました。
  • ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。
  • 他のページではロールオーバーが正常に動くため、問題が解決するようにしたいです。
回答を見る
  • ベストアンサー

【javascript】ロールオーバーと画像自動切換えがバッティングし

【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。 javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。 ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。 ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。 ≪ロールオーバー≫ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } ≪画像切り替え≫ window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },7500); }

  • uhnee
  • お礼率73% (19/26)

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

全体がどのような記述をしているのか不明ですが、ご提示の通りだとすれば、initRollovers()が実行されていないので、ロールオーバーの設定がされていないということでは? ≪画像切り替え≫のwindow.onloadの最後に( } の手前)に1行追加して  initRollovers(); を入れてあげればよさそうですが… >他ページでは出来ているので そのページはどこかでinitRollovers()を呼び出すようになっていると思うのですが…

uhnee
質問者

お礼

早速のご回答ありがとうございました! こちらで正常に動くようになりました。 内容を拝見しても何が何だかサッパリわからない所が悔しいです。。。 もっと精進します。 ありがとうございました。

その他の回答 (1)

  • nine999
  • ベストアンサー率44% (512/1140)
回答No.2

これはロールオーバーが利かないのではなく、利いているのに自動切り替えが常に動いているために書き換えられてしまうということではないでしょうか。 window.onload = function(){ var num = 1; setInterval(function(){ を window.onload = auto_roll(); function auto_roll(){ var num = 1; timerID = setInterval(function(){ として、functionを独立させ、タイマーのID番号を控えておきます。 aImages[i].onmouseover = function() { の次の行に setTimeout(timerID); を追加し、タイマーを止めます。 aImages[i].onmouseout = function() { の次の行に auto_roll(); を追加し、タイマーを呼び出します。

uhnee
質問者

お礼

早速のご回答ありがとうございます! 試してみましたが、うまく動作しませんでした。。。 せっかく書いていただいたのにごめんなさい。 ありがとうございました!

関連するQ&A

  • ロールオーバーについて

    ロールオーバーをシンプルなjavascriptで実装するとの事でとあるサイトにて、以下のようなスクリプトがありました。 http://css-happylife.com/archives/2007/0621_0010.php ▼▼▼スクリプト▼▼▼ function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ▲▲▲スクリプト▲▲▲ DOMを使ってimgのソースを 画像「_off.」から「_on.」に書き換えているんだなということまではわかるのですが、 if(document.getElementsByTagName) とか、 if(window.addEventListener) 等の記述があります。 ifのあとの()の中身は i>0 や (i>5)&&(i<=10) 等、演算子を用いた条件を記述するタイプした目にしたことがないのですが、 これはどういった事を表しているのでしょうか? ご教授お願いいたします。

  • スマートな外部javaでロールオーバーのマウスポインタを変えるには?

    お世話になります。 スマートな外部javaでロールオーバーさせましたが、マウスポインタが矢印のままで指に変わりません。どうしたらよいのでしょうか? 【参照元】 http://blog.bluebox.in/2006/10/javascriptcsstarget_blank.html ドリームウィーバーなどでも簡単にマウスオーバー効果をつけることが出来ますが、img要素内にスクリプトを呼び出すコードが入ってしまうのであまりスマートではありません。 この、英語のサイトで紹介されている方法だと、img要素にclass="imgover"というクラスをつければ、src属性で指定したファイルのファイル名に_oを足した名前の画像を読み込んで表示してくれるというJavaScriptです。 /* Standards Compliant Rollover Script Author : Daniel Nolan http://www.bleedingego.co.uk/webdev.php */ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } window.onload = initRollovers;

  • smartRolloverのカスタマイズについて

    smartRollover.jsを使っています。 ロールオーバー時に 〇〇_off.jpg が〇〇 _on.jpgに画像ファイル名が変更されるようになっています。 今は、〇〇_off.jpg にロールオーバー時に〇〇_on.jpgという 画像ファイルがない場合、何も画像が表示されません。 それを〇〇_off.jpgにロールオーバーしたときに〇〇 _on.jpgの画像がない場合に、ファイル名を変更させない(〇〇_off.jpgをそのまま表示する)ようにしたいのですが、どのようにすれば良いでしょうか? よろしくおねがいいたします。 ■smartRollover.js ------------------------- function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } --------------------------

  • IE8でのjavascriptエラーについて

    こんにちは。 IE8で表示されてしまうjavascriptエラーで困っています。 以前、別の方が同じような質問をされていたのですが、 理解できず新たに質問させて頂きました。 私はjavascriptに関して全くの素人です。 技術者の方、大変お手数ですが素人にも分かるような回答を頂けると とても助かります。 ロールーオーバに使用目的で以下のスクリプトをリンクしております。 // JavaScript Document function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } 画像を2枚用意し、ロールオーバ時に●●●_on.jpg、そうでないときに ●●●_off.jpgと分けております。 マックサファリ、ファイアーフォックス、ウィンドウズIE6,7は 問題なく表示されます。 ところがウィンドウズIE8でのみ、このようなエラーが出てしまいます。 `get Attribute()` is null or not an object どうやらこの箇所が怪しいようです。 ↓ ↓ ↓ ↓ if(images[i].getAttribute("src").match("_off.")) ご回答を頂けるととても助かります。 どうぞよろしくお願い致します。

  • ロールオーバー時の画像切り替えについて

    複数の画像ボタンを配置し、 ロールオーバーするとある位置に配置している画像を切り替えるようにしているのですが、 現状だとロールアウト後に初めの画像、初期値に戻ってしまうので 一番最後にロールオーバーした画像でストップさせたいと思っています。 現状、下記スクリプトを設置しているのですが お分かりの方が追われましたらご教授頂けないでしょうか。 どうぞ宜しくお願いします! MultiRollover = function(_listener) { this.listener_id = _listener; this.target_id = ""; this.sources = []; } MultiRollover.prototype = { addTarget: function(_target) { this.target_id = _target; }, addSource: function() { for(var i=0; i<arguments.length; i++) { this.sources.push(arguments[i]); } }, create: function() { var listener = document.getElementById(this.listener_id); if(document.getElementById(this.target_id)) { var out_target = document.getElementById(this.target_id); var over_targets = out_target.getElementsByTagName("a"); } for(var i=0; i<over_targets.length; i++) { var over_target = over_targets[i]; var src = this.sources[i]; var callback = (function(_src) { return function() { this.src = _src; }; })(src); this.observe(over_target, "mouseover", listener, callback); (new Image).src = src; src = this.sources[0]; callback = function() { this.src = src; }; this.observe(over_target, "mouseout", listener, callback); } }, observe: function(_el, _func, _listener, _callback) { if(_el.addEventListener) { _el.addEventListener(_func, function(e) { _callback.call(_listener, e); }, false); } else if(_el.attachEvent) { _el.attachEvent("on"+_func, function(e) { _callback.call(_listener, e); }); } } }

  • 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を外部ファイルにするとロールオーバーが機能しない

    ホームページビルダー11を使っているのですが、 JavaScriptを外部ファイルにして読み込ませると、ロールオーバー部分の画像のみ切り替わりません。 ////////////////////////////////////////////////// ■外部ファイルの記述内容■ <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_ROV_50 function HpbImgPreload() { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var imgName = HpbImgPreload.arguments[0]; var cnt; swImg[imgName] = new Array; for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++) { swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image(); swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt]; } } } } function HpbImgFind(doc, imgName) { for (var i=0; i < doc.layers.length; i++) { var img = doc.layers[i].document.images[imgName]; if (!img) img = HpbImgFind(doc.layers[i], imgName); if (img) return img; } return null; } function HpbImgSwap(imgName, imgSrc) { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var img = document.images[imgName]; if (!img) img = HpbImgFind(document, imgName); if (img) img.src = imgSrc; } } } HpbImgPreload('_HPB_ROLLOVER1', 'images/request.gif', 'images/request2.gif'); //--> </SCRIPT> ////////////////////////////////////////////////////// 外部ファイル読み込み時のhtmlタグ <SCRIPT type="text/javascript" scr="images/ファイル名"></SCRIPT> 恐らく、ホームページビルダーの独自性の問題だと思うのですが、 どうすればロールオーバーを機能させることができるでしょうか? 宜しくお願いいたします。

  • ページによってロールオーバーが機能しない

    javascriptを使用して、カーソルがあたった時に色が変わる ロールオーバーを実現しているサイトを作りました。 ところが、ページによってロールオーバーが機能しません。 すべて同じソースをコピペしただけなのですがこれが原因ですか? サイトは複数ページあり、機能するものとそうでないもので 置かれている階層が異なるものもあります。 他のjavascriptも記述されているのですが、それらが影響しているのでしょうか? ちなみに下記のようなソースです。(一部抜粋) 【HTML】 <div id="a"> <a href=""> <img src="test.png" /> </a> <ul> <li> <a href="00.html"><img src="test2.png" class="rollover" /></a> </li> </ul> </div> 【javascript】 $.fn.rollover = function() { return this.each(function() { // 画像名を取得 var src = $(this).attr('src'); //すでに画像名に「_on.」が付いていた場合、ロールオーバー処理をしない if (src.match('_on.')) return; // ロールオーバー用の画像名を取得(_onを付加) var src_on = src.replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"); // 画像のプリロード(先読み込み) $('').attr('src', src_on); // ロールオーバー処理 $(this).hover( function() { $(this).attr('src', src_on); }, function() { $(this).attr('src', src); } ); }); }; // 画像をロールオーバーする箇所を指定 $(function() { $('.rollover').rollover(); }); $(document).ready(function(){ $('.bxslider').bxSlider(); }); ご存知の方がいらっしゃいましたら対策を教えてください。 お願いいたします!

  • javascript getelementsbytagnameについてです。

    var keisan=document.getElementsByTagName('input'); for(i=0;i<=keisan.length;i++){ if(keisan[i].getAttribute('value').match('Click')){ keisan[i].onclick=add(); } } function add() { var a = document.getElementById('number1').value; var b = document.getElementById('number2').value; var c = a - -b; alert(c); } 上のプログラムを入れると、"keisan[i]はnullです"といったエラーがでます。 kaisan.length=0になっているみたいです…。 xhtmlだと作動するのですが、htmlだと作動しません。 対応してないのでしょうか? 宜しくお願いいたします。

  • javascriptのcanvasについて

    先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま(この記述でいうと茶色や赤)で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [  'hair1.png',  'hair2.png',  'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>

専門家に質問してみよう