交互に入れ替わる画像を複数配置する方法

前へ 次へ
このQ&Aのポイント
  • 画像名が変わっても、プログラムを変更せずに、HTML内のソースの画像名のみを変更できるJavaScriptを探していました。以下のサイトで、画像を交互に入れ替える方法を見つけました。
  • ただし、上記の方法では1つのID（photo01）しか動作しないため、複数の画像を配置する場合にはどうすればいいか悩んでいます。
  • プログラムを変更せずに、1つのIDで複数の画像の名前を変更するだけで実現する方法はあるのでしょうか？
回答を見る
  • ベストアンサー

交互に入れ替わる画像を複数配置

画像名が変わっても、プログラムは変更しないで、html内のソースの画像名のみを変更するだけでいいようなjavascriptを探していたところ、下記のサイトを発見しました ◆画像を交互に入れ替える (title属性を利用して入れ替える) http://www.openspc2.org/reibun/javascript2/image/change/0002/index.html やりたいことは上記のものでいいのですが、1ページ内に、交互に入れ替わる画像を複数配置する場合は、どのようにしたらいいでしょうか？ 上記のものですと、「photo01」をidに指定した画像１つしか動作しません。 最初にも申しました通り、プログラムは変更したくないので、できれば、1つのIDで画像名を変更するだけにしたいのですが・・・ 以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？ <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon01.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon02.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon03.png"> よろしくお願い致します

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

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

#1、#2です。 ＞何かまずいのですね？ #2で訂正した部分は、余分な画像を非表示にしている部分ですが、元のままだと全部の画像を非表示にしてしまっていたので、最初に一瞬だけ何も表示されない瞬間ができてしまう可能性がありました。 それを最初の一つを除いて非表示にするよう訂正したものです。 ＞こちらのスクリプトはheader内に入れたり、外部ファイルにすると動作しない ＞ようなのですが、必ず<div class="changeImage">～</div>の後に記述し ＞なくてはなりませんか？ そのままですと位置は<div>要素より後に記述する必要があります。（直後の必要はありません） 外部ファイルにすることは可能ですが、読込むための<script>タグの位置は同じ位置になります。 header内に入れる場合は処理を関数化して、onloadなどで実行することになります。 例えばこんな感じ。（全角空白は半角に） /*@cc_on@*/ window./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'load', function(){ 　var interval = 1000; // 画像切替間隔（msec） 　var disp = "inline"; // 画像の表示方法（inline/block） 　var changeImage = function(elm){ 　　var img = elm.getElementsByTagName("img"); 　　var i, index = 0, n = img.length; 　　if(1>=n) return; 　　for(i=0; i<n; i++) img[i].style.display =i>0?"none":disp; 　　var id = setInterval(function(){ 　　　img[index].style.display = "none"; 　　　index = ++index % n; 　　　img[index].style.display = disp; 　　}, interval); 　} 　var i, div = document.getElementsByTagName("div"); 　for(i=0; i<div.length; i++) 　　if(div[i].className.match(/\bchangeImage\b/)) 　　　changeImage(div[i]); }, false); この場合load後に実行されるため、最初に非表示にしておきたい画像が一瞬だけ表示される可能性があります。 それを避けたければ、対象の画像についてはCSSで最初にdisplay:noneを設定しておけば可能ですが、全部を非表示にしてしまうと、スクリプトがオフのユーザーの場合には画像が一切表示されなくなってしまいます。 これも防止するならば、CSSで一つだけ画像が表示される状態に初期設定しておくのがベストということになります。 上記のいずれの場合でも対応できるように、スクリプトでの表示/非表示はdisplay属性を明示的に設定するように変えてありますが、この結果、使用したい属性値を事前に設定しておく必要ができました。（サンプルではinlineになっています）

maimai0629
質問者

お礼

詳しくご説明いただきありがとうございます わからないことばかりではありますが勉強になります 確かに、最初のスクリプトですと画像が一瞬表示されていませんでした header内に入れるサンプルまでいただき本当にありがとうございます このようなスクリプトは全てご自分で記述されているのでしょうか？ すごいですね・・・ 少しお聞きするつもりが大変お手数おかけしました header内に入れるか外部ファイルにするかは検討させていただきます 助かりました ありがとうございました

その他の回答 (3)

回答No.3

こういうのは？ <!DOCTYPE html> <title></title> <body> <p> <img src="./img/0.gif?./img/1.gif" alt="" class="swapImage"> <img src="./img/2.gif?./img/3.gif" alt="" class="swapImage"> </p> <p> <img src="./img/0.gif?./img/1.gif" alt="" class="swapImage2"> <img src="./img/2.gif?./img/3.gif" alt="" class="swapImage2"> </p> <script type="application/javascript; version=1.8"> var ImageSwapper = 　(function (swp) 　　function (cName, interval) 　　　setInterval ( 　　　　function () 　　　　　Array.forEach (document.getElementsByClassName (cName), swp), interval)) 　 (function (img) 　　 img.src = img.src.replace (/^(.+)\?(.+)$/, '$2?$1')); ImageSwapper ('swapImage', 1000); ImageSwapper ('swapImage2', 2000); </script>

maimai0629
質問者

補足

サンプルありがとうございます。 確認させていただきましたが、うまく動作いたしませんでした。 以下の作業をしました ・上記のスクリプトをhtmlファイルにコピー ・スクリプトの記述してあるファイルと同階層にimgフォルダに0～3.gifを作成　 それだけでは動作しませんか？ 画像は表示されますが、とまったままです 何か注意点などございますか？ ※一応、</body></html>は付けてみました。

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

#1です。 今見たらポカミスしてました。 　for(i=0; i<n; i++) img[i].style.display = "none"; 　　　　　　　　　　↓↓ 　for(i=1; i<n; i++) img[i].style.display = "none"; ですね。

maimai0629
質問者

お礼

前記のものでも問題なく動作はしていましたが、何かまずいのですね？ ご丁寧にありがとうございました。修正いたしました。

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

＞以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？ idを重複しないようにしておけば可能です。 idは一つの文書内では一意であることが原則です。また、title属性はツールチップに利用されるものなので、内容と実態が異なっているのが良いかどうか… ＞最初にも申しました通り、プログラムは変更したくないので、～ 逆に言えば、HTMLのマークアップだけ変えれば対応できるようになっていればよいものと解釈して… <div class="changeImage">～</div>内にある画像要素を順に表示するという機能のもののサンプルを。 （ご提示のサイトのものよりは長くなってしまいましたが…） 画像が2個なら交互に入替えとなりますし、複数個あれば順に表示されます。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .changeImage img { width:50px; height:50px; } </style> </head> <body> <div class="changeImage"> <img src="images/new.png" alt=""> <img src="images/icon01.png" alt=""> </div> <div class="changeImage"> <img src="images/new.png" alt=""> <img src="images/icon02.png" alt=""> </div> <div class="changeImage"> <img src="images/new.png" alt=""> <img src="images/icon01.png" alt=""> <img src="images/icon02.png" alt=""> <img src="images/icon03.png" alt=""> </div> <script type="text/javascript"> <!-- (function(){ 　var interval = 1000; // 画像切替間隔（msec） 　var changeImage = function(elm){ 　　var img = elm.getElementsByTagName("img"); 　　var i, index = 0, n = img.length; 　　if(1>=n) return; 　　for(i=0; i<n; i++) img[i].style.display = "none"; 　　var id = setInterval(function(){ 　　　img[index].style.display = "none"; 　　　index = ++index % n; 　　　img[index].style.display = ""; 　　}, interval); 　} 　var i, div = document.getElementsByTagName("div"); 　for(i=0; i<div.length; i++) 　　if(div[i].className.match(/\bchangeImage\b/)) 　　　changeImage(div[i]); })(); //--> </script> </body> </html> ＊ただし、スクリプトがオフの時はそのまま全部の画像が表示されます。

maimai0629
質問者

補足

＞（ご提示のサイトのものよりは長くなってしまいましたが…） 全く問題ございません サンプルありがとうございした 私の求めていたものそのものです 申し訳ありません、ちなみになんですが、もう1点教えていただけますか？ こちらのスクリプトはheader内に入れたり、外部ファイルにすると動作しないようなのですが、 必ず<div class="changeImage">～</div>の後に記述しなくてはなりませんか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML
  • 画像を右下から詰めて表示したい

    画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 　　　　　　←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■　←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }

    • ベストアンサー
    • HTML
  • 画像のサムネール+フォトアルバムを制作中で困っています

    こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。 よろしくお願いいたします。 サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" > 　　　　　　　　　　・ 　　　　　　　　　　・ 　　　　　　　　　　・ 　　　　　　　　　　・ 　　　　　40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、 　B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。 　　　　　　"mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。 上記のような方法をとりたいです。 どうか、よろしくお願いいたします。

  • 画像のフェードインについて・・・。

    現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像のフェードインについて・・・。

    以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像のフェードイン・フェードアウト

    現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 【jQuery】サムネイル

    3つのサムネイル画像(.thumb)があります。 クリックした.thumbはopacityを1に、その他は0.5に切り替わる する方法を教えてください。 始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });

  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • 同HTML内で複数のJavaScriptを設置

    ●JavaScriptを使用して、再生時間の異なったスライドショーを同時再生したい (ｊｓ1とｊｓ2の画像を重ねて、アナログ時計が動くようなスライドショーにしたい) ●現状：どちらか一方の画像しか動かない（ソースの後に記述したｊｓのみ動く） 調べたところによると、jQueryを使用すれば可能との事で色々なサイトで調べ、 試行錯誤したのですがうまく動きません。 （参考にさせて頂いたサイト様：http://black-flag.net/jquery/20110525-3120.html） jQueryを使用しなければ、同時再生はできないのでしょうか？ そうなると、以下のHTML、CSSなどを根本から変える必要があるように思っています。 ※実際に上記のサイトを参考に行ってはみたのですが・・・力不足で解決できませんでした。 初歩的な質問かとは思いますが、ご指摘頂ければと思います。 よろしくお願い致します。 ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　XHTML　　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ポートフォリオ</title> <link href="base.css" rel="stylesheet" type="text/css" media="all" /> <link href="top.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="portfolio.js"></script> <script type="text/javascript" src="portfolio2.js"></script> <noscript> JavaScript対応ブラウザで表示してください。 </noscript> </head> <body onload="setTimeout('timerImg()', 3000);"> <body> <div id="header"> <img src="portfolio/logo2.png" alt="ヘッダー"></div> <div id="wrapper"> <div id="photo1"> <img name="img/1.png" src="img/1.png" alt="長針"></div> <div id="photo4"> <img name="img2/1.png" src="img2/1.png" alt="短針"></div> <div id="photo2"> <img src="portfolio/tokei.under.png"　alt="時計柄"></div> <div id="photo3"> <img src="portfolio/tokei.logo.png"　alt="ロゴ"></div> <ul id="contens-nav"> 　<li id="home"><a href="portfolio.html">HOME"</a></li> </ul> <ul id="contens-nav2"> 　<li id="works"><a href="works.html">WORKS"</a></li> </ul> <ul id="contens-nav3"> 　<li id="about"><a href="about.html">ABOUT"</a></li> </ul> <ul id="contens-nav4"> 　<li id="contact"><a href="contact.html">CONTACT"</a></li> </ul> </div> </body> </html> ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　CSS（base）　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ @charset "UTF-8"; * { margin:0; } body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.5; } div#wrapper { position:relative; width: 844px; left: 50%; margin-left: -422px; } div#photo1 { position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 3; } div#photo4 { position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 2; } div#photo2{ position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 1; } div#photo3{ position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 4; } ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　1　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ // JavaScript Document <!-- var photo = new Array("img2/1.png", "img2/2.png", "img2/3.png","img2/4.png", "img2/5.png", "img2/6.png","img2/7.png", "img2/8.png", "img2/9.png","img2/10.png", "img2/11.png", "img2/12.png"); var i = 0; function timerImg () { if(document.images['img2/1.png'].complete) { i++; if(i >= photo.length) i = 0; document.images['img2/1.png'].src = photo[i]; } setTimeout("timerImg()", 12000); } //--> ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　2　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ // JavaScript Document <!-- var photo = new Array("img/1.png", "img/2.png", "img/3.png","img/4.png", "img/5.png", "img/6.png","img/7.png", "img/8.png", "img/9.png","img/10.png", "img/11.png", "img/12.png"); var i = 0; function timerImg () { if(document.images['img/1.png'].complete) { i++; if(i >= photo.length) i = 0; document.images['img/1.png'].src = photo[i]; } setTimeout("timerImg()", 1000); } //-->

  • 同じjqueryを２つ並べて動かしたいけど動かない

    いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。 どうすれば動きますか？？ 理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する