- ベストアンサー
リストをランダムの画像で表示
リストをlist-style-imageを使って画像で表示する方法がございますが、 画像を10枚ほど用意し、これがランダムで表示されるようにしたいと考えています。 もちろんクラス指定して個別に画像を合わせていく方法もございますが、<li>タグが非常に多いため、 別の方法を探しております。 JAVAスクリプトを使用することも念頭に入れております。 何か良い方法はございますでしょうか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ランダム表示された画像にリンクを張る方法
Javaスクリプトで更新ごとにランダムで画像を表示させることはできたのですがそれにはリンクがつけられませんでした。ランダムで画像を表示させさらにそれぞれリンクをはる場合はどうすればよいのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 背景画像のランダム表示
お世話になります。 PHP勉強中です。 1.背景画像のランダム表示：bodyタグ内でなくdiv内の背景画像を変更したい。bottom right指定等施したいのでスタイルシートで書き出す？？ 2.確率を設定したい：1枚の基本画像が60％表示され、それ以外の複数の画像が40％で選択、その中で画像をランダムに設定したい。 3.使用する画像は同一フォルダ内にある、背景画像以外はいれない。今後枚数を増やしていく予定なので、ファイル名を1つずつ指定するのではなく、フォルダ内の画像を読んで、配列に・・・ と、やりたいことはあるのですが、どうやったらいいのやら・・・頭が混乱してます（汗） 私のサイトに訪問される方でjsをOFFにされている方が多少いらっしゃるので、どうせならPHPで！と意気込んでみたのですが・・・ もしよろしかったらご教授下さいませ。 よろしくお願い致します。 参考：現在設置のjsファイル <script> wall = new Array(); wall[0] = "./image/bg01.jpg"; wall[1] = "./image/bg02.jpg"; wall[2] = "./image/bg03.jpg"; wall[3] = "./image/bg04.jpg"; wall[4] = "./image/bg05.jpg"; wall[5] = "./image/bg06.jpg"; wall[6] = "./image/bg07.jpg"; wall[7] = "./image/bg08.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">div.mainTOP { background:url(' , wall[rnd] , ') no-repeat bottom right #FAFAFA; }</style>'); </script>
- ベストアンサー
- PHP
- 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法
今ＨＰを作成しているんですが、題名の方法が知りたいです。 JavaScriptを使って画像をランダムに表示させる方法ありますよね。 <script language="javascript"> <!-- //ランダムに画像を表示 img = new Array(); img[0] = "画像1"; img[1] = "画像2"; img[2] = "画像3"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> それとマウスを重ねると画像が変わる onmouseover="this.src='画像4'" onmouseout="this.src='画像5'" というタグありますよね。 2つのタグを組み合わせてランダムに表示された画像に マウスを重ねると画像がかわるということがやりたいのですが JavaScriptの知識があまりないためわかりません。 この方法は可能でしょうか？ もしくは他の方法あるでしょうか？ ランダムに表示される画像は３枚と仮定し、 それぞれ３枚の画像はマウスを重ねるごとに 違う画像を表示させたいと思っています。 解決法をわかるかたがいらっしゃったら よろしくお願い致します。
- ベストアンサー
- HTML
- CSSでリストを横並びにし、行頭画像を表示させたい
XHTMLとCSSでのWebページを作成しています。 リストを横並びに表示、行頭画像も表示させ、さらにポイントした時に画像が変わるようにしたいのですが、下記の記述では横並びにはできても画像が表示されず困っています。 おかしい部分や足りない部分がありましたら、ご指摘お願い致します。 ≪CSS≫ #menu li{ display:inline; list-style-image:url(画像のパス); } #menu li a:hover{ list-style-image:url(画像のパス); } ≪ｈｔｍｌ≫ <div id="menu" name="menu"> <ul> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> </ul> </div> 試しにdisplayを削除すると、画像はちゃんと表示されるので、画像のパスは間違っていないはずです。 何卒、宜しくお願い致します。
- ベストアンサー
- CSS
- 画像リンクをランダムに４つ表示する
このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか？ どなたか回答をお願いします。
- ベストアンサー
- JavaScript
- 画像をランダムにフェードイン
【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像１" /></li> <li><img src="画像２" /></li> <li><img src="画像３" /></li> <li><img src="画像４" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。 どうすれば正常に動きますか？ よろしくお願いします。
- 締切済み
- JavaScript
- ランダムで画像を表示させるには？
環境はFlashCS5で、アクションスクリプト3.0を使用しています。 ５枚の画像（インスタンス名：mc0～mc4）をランダムで表示させるムービーを制作しているのですが、 下記のスクリプトですと、ランダムで画像が表示されるのですが、画像の切り替えがループになってしまって、次から次へとランダムで画像が切り替わります。フレーム１に下記のスクリプトを記述し、フレーム１にムービーインスタンス「mc0」から「mc4」を配置しています。 function randomShowMC():void { for (var i:int=0; i<5; i++) { this["mc" + i].visible = false; } var rnd:int = Math.floor(Math.random() * 5); this["mc" + rnd].visible = true; } randomShowMC(); var myTimer:Timer = new Timer(3000); myTimer.addEventListener(TimerEvent.TIMER ,function(){randomShowMC()}); myTimer.start(); このスクリプトを改良？改造？して、ランダムの画像が１回のみ…つまり、おみくじみたいに、（mc0～mc4の画像を）ランダムで１回のみ画像を表示させたいのです…表示後の画像が切り替わらずそのままで停止させたいのです。 又は、ムービーインスタンス「mc0」から「mc4」の画像をランダムで表示させ、最初に表示された、その画像で停止させるスクリプトを新規に記述しても構いませんので、ご指導・アドバイスをお願い致します…。 どなたか、解る方がいましたらランダム画像表示で１回表示のみのループしないスクリプトを教えてください。よろしくお願い致します…。
- ベストアンサー
- Flash
- CSSで背景画像をランダムに表示させたいのですが
CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか？ 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。
- ベストアンサー
- HTML
- listアイコン画像だけが中央揃えにならない
listタグでリスト化したリンクを、中央揃えするように指定したdivで囲んでいるのですが リストアイコンの画像だけが中央揃えになってくれません。（添付画像参照） HTMLとCSSは以下の通りです。 <div class="box"> <ul class="list01"> <li>テキスト</li> <li>テキスト</li> </ul> </div> .box { text-align:center; } ul.list01 { list-style-image: url(～); } リストアイコンの画像もテキストと一緒に中央揃えにしたいのですが、 何かやり方があるのでしょうか？ どなたかよろしくお願いします。
- ベストアンサー
- ブログ
- ランダム表示で１つだけ固定で出したい
はじめまして。 3つの画像を2つだけランダムに出しています。 （仮にA,B,Cといたします。） そのうちAの画像だけ常に表示されるようにしたいのですが、 どのようにすればいいでしょうか？ 現在は以下のように取得しています。 java.util.List<画像テーブル> list = 画像一覧； java.util.Collections.shuffle(list); list = list.subList(0, 2); どうかお知恵をお貸しいただきたいと思います。 よろしくお願いいたします。
- 締切済み
- Java
- プリンターとスマホの接続ができず、困っています。Wi-Fiダイレクト接続を試しましたがうまくいきません。
- 環境はAndroidを使用しており、関連するソフト・アプリは特にありません。電話回線の種類は不明です。
- ブラザー製品での接続に関する質問です。
