- ベストアンサー
キャプション付きの複数画像を複数ランダムに表示
ORUKA1951の回答
＞複数表示させるにはどうすればいいのでしょうか。 単にスタイルシートだけの問題になりますから(^^)・・HTMLもjavascriptもほとんど手を加える必要がない。そもそも、そうすべき事はわかりますよね。 1) javascript部分の変更 外部スタイルシートにしたほうが良い var css = new Array( '<link rel="stylesheet" type="text/css" media="screen" href="CSS/1.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/2.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/3.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/4.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/5.css">', '<link rel="stylesheet" type="text/css" media="screen" href="CSS/6.css">' ); スタイルシート 6タイプ [1.css] @charset "Shift_JIS"; div.section div.nav ol li{display:list-item;} div.section div.nav ol li+li+li{display:none;} div.section{background-color:fuchsia;} div.section div.nav{border-color:red;} [2.css] @charset "Shift_JIS"; div.section div.nav ol li{display:list-item;} div.section div.nav ol li+li{display:none;} div.section div.nav ol li+li+li{display:list-item;} div.section div.nav ol li+li+li+li{display:none;} div.section{background-color:silver;} div.section div.nav{border-color:gray;} [3.css] @charset "Shift_JIS"; div.section div.nav ol li{display:list-item;} div.section div.nav ol li+li{display:none;} div.section div.nav ol li+li+li+li{display:list-item;} div.section{background-color:aqua;} div.section div.nav{border-color:blue;} [4.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li{display:list-item;} div.section div.nav ol li+li+li+li+li{display:list-item;} div.section{background-color:yellow;} div.section div.nav{border-color:orange;} [5.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li{display:list-item;} div.section div.nav ol li+li+li{display:none;} div.section div.nav ol li+li+li+li{display:list-item;} div.section{background-color:lime;} div.section div.nav{border-color:green;} [6.css] @charset "Shift_JIS"; div.section div.nav ol li{display:none;} div.section div.nav ol li+li+li{display:list-item;} div.section div.nav{border-color:silver;} 注意) まず、HTMLやスタイルシートをきちんと身につけましょう。 デザインや動作なんて、よっぽど酷くさえなければ、ユーザーはコンテンツの充実だけで訪問してくる。 『どうすれば自分のウェブサイトが独自性、価値、または魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。( https://support.google.com/webmasters/answer/35769?hl=ja#3 )』 はデザインじゃない、内要素のものなのですよ。
関連するQ&A
- html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- 「戻る」「進む」ボタンで画像を変えるには？
「戻る」「進む」ボタンで5枚の画像を変えられるようにしたいのですが、なかなかできません。 順番が飛んでしまったりしてしまいます。 var n=0; var imgDB=new Array("kenkyu/0.jpg","kenkyu/1.jpg","kenkyu/2.jpg","kenkyu/3.jpg","kenkyu/4.jpg"); function change(){ if(n==0)n=4; if(n==5)n=0; document.img.src=imgDB[n]; } <TABLE cellpadding="10" bgcolor="#0099cc"> <TBODY> <TR> <TD><IMG src="kenkyu/0.jpg" name="img" width="500" height="400" border="0"></TD> </TR> </TBODY> </TABLE> <A href=JavaScript:n--;change();><IMG src="kenkyu/modoru.jpg" width="96" height="28" border="0"></A> <A href=JavaScript:n++;change();><IMG src="kenkyu/susumu.jpg" width="96" height="28" border="0"></A><BR> 分かる方、教えて下さい。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 画像のランダム表示でサイズを指定する方法
ヘッダー画像を、下記のコードでランダム表示しています。 横2000px縦1000pxの画像を、横1000px縦500pxで表示したい場合、どのようにすればよいでしょうか？ <script language="JavaScript"> var imglist = new Array( "A.jpg" , "B.jpg" , "C.jpg" , "D.jpg" , "E.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> <noscript> <img src="A.jpg" alt="A.jpg" width="1000px" height="500px" border="0" /> </noscript> 上記コードの参照元：http://allabout.co.jp/gm/gc/23805/2/
- ベストアンサー
- JavaScript
- 複数のランダム表示について
現在、外部のjsを読み込み、 ランダムではなく下記の方法で ４バナー表示をしております。 【index.html】 <script type="text/javascript" src="js/banner.js"></script> 【banner.js】 document.write("<ul class=\"banner\">"); document.write("<li><a href=\"http://1.jp/\" target=\"_blank\"><img src=\"http://1.jp/img/1画像.jpg\" alt=\"1\" width=\"200\" height=\"80\" /></a><br />1テキスト</li>"); document.write("<li><a href=\"http://2.jp/\" target=\"_blank\"><img src=\"http://2.jp/img/2画像.jpg\" alt=\"2\" width=\"200\" height=\"80\" /></a><br />2テキスト</li>"); document.write("<li><a href=\"http://3.jp/\" target=\"_blank\"><img src=\"http://3.jp/img/3画像.jpg\" alt=\"3\" width=\"200\" height=\"80\" /></a><br />3テキスト</li>"); document.write("<li><a href=\"http://4.jp/\" target=\"_blank\"><img src=\"http://4.jp/img/4画像.jpg\" alt=\"4\" width=\"200\" height=\"80\" /></a><br />4テキスト</li>"); document.write("</ul>"); 【ブラウザ】 1画像.jpg 1テキスト -------- 2画像.jpg 2テキスト -------- 3画像.jpg 3テキスト -------- 4画像.jpg 4テキスト 教えて頂きたいのは、下記のように ランダム表示で４つのバナーを表示させたいのですが どうしたらいいか分かりません。 【ブラウザ】 4画像.jpg 4テキスト -------- 2画像.jpg 2テキスト -------- 1画像.jpg 1テキスト -------- 3画像.jpg 3テキスト 詳しい方おりましたらお教え頂けないでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>
- ベストアンサー
- JavaScript
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- javascriptを使った画像のキャプションについて教えてください
こんにちは。 各サムネイルをクリックするごとに、拡大した画像が表示されるページを作成しているのですが、 その拡大画像ごとにキャプションをつける場合、どうすればいいのでしょうか。 -----------以下html---------------------------- <table> <tr> <td><a href="#" onclick="blocking(1); this.blur(); return false;">テスト</a></td> </tr> <tr> <td class="binnen"> <div class="infor" id="nr1"> <a href="#" onclick="resizeImg('groot1',500,500); WM_imageSwap('groot1','images/test1.jpg');this.blur(); this.blur(); return false;"><img src="images/test1thumb.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('groot1',500,500); WM_imageSwap('groot1','images/test2.jpg');this.blur(); this.blur(); return false;"><img src="images/test2thumb.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('groot1',500,500); WM_imageSwap('groot1','images/test3.jpg');this.blur(); this.blur(); return false;"><img src="images/test3thumb.jpg" alt="" width="50" height="50" /></a> <span class="groot"><a href="#" onclick="resizeImg('groot1',1,1); WM_imageSwap('groot1','images/spacer.gif');this.blur(); this.blur(); return false;"> <br><img name="groot1" src="images/spacer.gif" alt="" width="1" height="1" /><br></a></span></p> </div> </td> </tr> </table> ----------以下javascript------------ // resizeImg() function resizeImg(imgId,width,height) { var objStr,obj; if(document.images) { objStr = 'document.' + imgId; obj = eval(objStr); obj.width = width; obj.height = height; } } // WM_preloadImages() function WM_preloadImages() { if (document.images) { if (typeof(document.WM) == 'undefined') { document.WM = new Object(); } document.WM.loadedImages = new Array(); var argLength = WM_preloadImages.arguments.length; for(arg=0;arg<argLength;arg++) { document.WM.loadedImages[arg] = new Image(); document.WM.loadedImages[arg].src = WM_preloadImages.arguments[arg]; } } } // WM_imageSwap() function WM_imageSwap(daImage, daSrc) { var objStr,obj; if(document.images) { if (typeof(daImage) == 'string') { objStr = 'document.' + daImage; obj = eval(objStr); obj.src = daSrc; } else if ((typeof(daImage) == 'object') && daImage && daImage.src) { daImage.src = daSrc; } } } // blocking() var supported = (document.getElementById || document.all); if (supported) { document.write("<style type='text/css'>"); document.write(".infor { display:none; }"); document.write("</style>"); var max = 7; var shown = new Array(); for (var i=1;i<=max;i++) { shown[i+1] = false; } } function blocking(i) { if (!supported) { alert('This link does not work in your browser.'); return; } shown[i] = (shown[i]) ? false : true; current = (shown[i]) ? 'block' : 'none'; if (document.getElementById) { document.getElementById('nr'+i).style.display = current; } else if (document.all) { document.all['number'+i].style.display = current; } } ---------以下css-------------------- .infor { display:block; } .groot { text-align:center; display:block; } .binnen { border:none; } ------------------------------------------ よろしくお願いします。
- 締切済み
- JavaScript
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScript - 月ごとに画像変化
<script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> （"["と"]"は画像の端）という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。
- ベストアンサー
- JavaScript
- ロールオーバーを立てに並べると隙間があいてします
ホームページのロールオーバーイメージを 立てに並べたところ どうしてもIEでロゴとロゴの間に 隙間が開いてしまいます。 これを詰める方法はないでしょうか？ ファイヤーフォックスだと問題なく表示されます。 プログラムは以下のとおりです。 <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"> <img src="navi1" name="mn2" width="203" height="48" border="0" /> </a> よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 参考になりました。