ページ更新の度に変わる画像を上部と下部の中央に表示させるには？
- ページを表示するたびにバナーが変わるようにしたい方法と、画像をページの上部中央および下部中央に表示させる方法を教えてください。
- JavaScriptを使用してページを表示するたびにバナー画像をランダムに変更する方法と、画像をページの上部中央および下部中央に表示する方法を紹介します。
- バナー画像をランダムに変更し、画像をページの上部中央および下部中央に表示する方法について教えてください。また、画像にリンクを付ける方法も教えてください。
- ベストアンサー
ページ更新の度に変わる画像を上部と下部の中央に表示させるには？
アフィリエイトをやっておりまして、ページを表示するたびにバナーが変わるようにしたいと思っております。Googleで検索しましたところ下のようなJavaScriptを使うことが分かりました。ですがこれは＜head＞と＜/head＞の間に書かなければなりませんよね？これをページ上部中央と、また下部中央に表示させたいのですが、何を加えればよろしいのでしょうか。また、各画像にリンクをつけるにはどのようにすればよろしいのでしょうか。よろしくおねがいします。 <SCRIPT LANGUAGE = "JavaScript"> myImageCnt = 15; myImage = new Array( "01.jpg", (途中省略) "15.jpg"); myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); </SCRIPT>
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<body> <SCRIPT LANGUAGE = "JavaScript"> myImage = new Array( new Array("http://**.html","01.jpg"), (途中省略) new Array("http://??.html","15.jpg") ) myRnd = Math.floor(Math.random()*myImage.length); document.write("<a href='",myImage[myRnd][0],"'>") document.write("<img src='",myImage[myRnd][1],"' border='0' >"); document.write("</a>") </SCRIPT> 内容 <SCRIPT LANGUAGE = "JavaScript"> myRnd = Math.floor(Math.random()*myImage.length); document.write("<a href='",myImage[myRnd][0],"'>") document.write("<img src='",myImage[myRnd][1],"' border='0' >"); document.write("</a>") </SCRIPT> </body> こんなので如何でしょうか。 これってもともとdocument.writeを使っているのでhead内に書くと何かと不都合が起きませんかね。 不都合が起きなくてもhead内に書くことはオススメしません。 配列を２次元にしてリンク先と画像のURLを書けるように変更しました。 0がリンク先1が画像のurlです。
関連するQ&A
- javascriptで画像をテーブルに出力する方法
javascriptで定期的に入れ替えている画像をテーブルに出力（表示）する方法を教えてください。 <html> <head> <script language="JavaScript"><!-- myImageCnt = 4; myImage = new Array( "img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg" ); myNowCnt = 0; function myChange(){ if (myNowCnt == myImageCnt-1){ myNowCnt=0; }else{ myNowCnt++; } document.myFormImg.src = myImage[myNowCnt]; setTimeout( "myChange()" ,5000 ); } // --></script> <img src="img0.jpg" width="200" height="200" name="myFormImg" /> <script language="JavaScript"><!-- myChange(); // --></script> </head> </html>
- ベストアンサー
- JavaScript
- javascriptで画像をランダム表示させたい
javascriptで画像をランダム表示させたいと思い、下記ソースを記述しました。 下記ソースでは、画像をランダムに1枚ずつ表示するようになっています。 今回、1枚ずつではなく、50枚ある画像を10枚ずつランダムに表示させたいと思っています。下記ソースから修整するにはどのような考え方になるのか教えていただけませんか？ 単純に、 "img/1.jpg", の部分を "img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg", としてみたのですが違うみたいですし、、。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>20110720test</title> </head> <body> <script language="JavaScript"><!-- myImageCnt = 5; myImage = new Array( "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg" ) myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script> </body> </html>
- ベストアンサー
- JavaScript
- ＪＡＶＡスクリプトでサイズを変更した写真をランダム表示させる方法
はじめまして。 現在ホームページビルダー１０でホームページを作成しているのですが、 ＪＡＶAスクリプトで画像をランダム表示させるようにしたいです。 素人でよくわからなかったので、いろんなサイトを参考にしてなんとか 表示できるようにはなったのですが、写真のサイズを変更すると ×マークが出てしまいうまく表示できません。 どうしたらいいのでしょうか？ 色々試してみたのですが、素人なのでほんとにわからなくて困ってます。 どなたかわかる方がいたらぜひ教えて下さい。 よろしくお願いします！ ちなみに、このソースを書き込んでいます。 <script language="JavaScript"><!-- myImageCnt = 3; myImage = new Array( "2874.jpg", "P10101932.jpg", "4752.jpg" ); myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script>
- 締切済み
- その他（インターネット・Webサービス）
- 画像を順にフェードインフェードアウトで表示
ＨＰのＴｏｐページのw900×h300位のスペースに 順に画像をフェードインフェードアウトしながら表示させ,最後の画像でストップさせたい Flashムービーを作成するのは簡単なのですが、iPadに対応しない為 jQueryなどで表示させたいのですが、javaが全然わからず困っています。 一応下記のように自分で調べてみて見つけた、近いものを作っては見たものの <script language="JavaScript"><!-- myImageCnt = 7; // 画像の数 myImage = new Array( // 画像ファイル名の設定 "img/main/f01.jpg", "img/main/f02.jpg", "img/main/f03.jpg", "img/main/f04.jpg", "img/main/f05.jpg", "img/main/f06.jpg", "img/main/f07.jpg" ); myNowCnt = 0; // 現在表示している画像番号 function myChange(){ // 定期的に画像を更新する関数 if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら myNowCnt=0; // 最初の画像に戻す }else{ // 最後の画像まで表示していないのなら myNowCnt++; // 次の画像へ } document.myFormImg.src = myImage[myNowCnt]; // 次の画像を表示する setTimeout( "myChange()" , 6000 ); // ２秒周期に画像を更新する } // --></script> <img src="img/main/f01.jpg" width="900" height="300" name="myFormImg"> <script language="JavaScript"><!-- myChange(); // --></script> こんな感じでやってみたもののこれではフェードインフェードアウトにはなりません どこに何を足せばいいのか、または全く違うコードを書けばいいのかどなたかお教えいただけませんでしょうか。 jQueryだと記述はもっと簡単なのでしょうか？
- ベストアンサー
- その他([技術者向] コンピューター)
- javaスクリプトが表示されない。
javaスクリプトが表示されない。 初めまして。 現在ホームページビルダー１０でホームページを作っています。 写真をランダムに表示させるjavaスクリプトを作ったのですが、プレビューではちゃんと表示されるのですが、 ウェブでのプレビューや、サーバーにアップロード（さくらインターネットです）すると、 まったく表示されません。 初心者なのでどうしていいかわからず困っています。 どなたかわかる方がいらっしゃいましたら、ぜひ教えてください。 よろしくお願いします。 ちなみに、このソースを書き込んでいます。 ↓ <script language="JavaScript"><!-- myImageCnt = 12; myImage = new Array(); myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script></DIV>
- 締切済み
- その他（インターネット・Webサービス）
- 画像がうまく表示されないのですが
ページを見るごとにランダムで画像が変わるタグを書き込んだのですが・・・ タグ１ <script language="JavaScript"> <!-- var simg=new Array(5); simg[0]="icon1.png"; simg[1]="icon2.png"; simg[2]="icon3.png"; simg[3]="icon4.png"; simg[4]="icon5.png"; var Myimg=Math.floor(5*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </script> タグ２ <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(2); simg[0]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; simg[1]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; Myimg=Math.floor(2*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </SCRIPT> タグ１はインフォシークのサーバーでは表示されたのですが、A-RINGSのサーバーでは表示されなかったので、サーバーの問題で表示されないのでしょうか？ 表示されないとしたらどのようにしたら表示されるものなのでしょうか？ タグ２はどちらのサーバーも表示されませんでした。 どうしたらちゃんと表示されますでしょうか？
- ベストアンサー
- JavaScript
- Javascriptでランダムに画像を表示させる方法について
画像をランダムに表示させる為にalphaEDIT v2.0.3に以下のようなスクリプトを貼り付けました。 しかし表示させる画像の位置を動かすことができません。どうすればよいでしょうか？ グーグルやおしえてgooで検索しましたが、わかりませんでした。 どうかご教授おねがいします。m(_ _)m <script language="JavaScript"> <!-- ranimg = new Array(); ranimg[0]="test1.jpg"; ranimg[1]="test2.jpg"; xx = Math.floor(ranimg.length*Math.random()); ranimg = ranimg[Math.floor(xx)]; document.write('<img src="'+ ranimg +'">'); // --> </script>
- ベストアンサー
- HTML
- 更新ごとに重複しない画像を5枚表示
初心者です。よろしくお願い致します。 複数ページ存在するうちの、各ページを更新するごとにランダムに変わる、重複しない5枚の画像を表示させたいと思います。 今現在、サイト上に掲載されてあったJavaScriptのサンプルを自分なりに変更してテストしているのですが、「重複しない」というところで壁にぶち当たってしまっています。 下記が現在のスクリプトです。 <body> <script language="JavaScript"><!-- jumpURL = new Array(); imgURL = new Array(); jumpURL[0] = "アドレス"; jumpURL[1] = "アドレス jumpURL[2] = "アドレス"; jumpURL[3] = "アドレス"; jumpURL[4] = "アドレス"; jumpURL[5] = "アドレス"; jumpURL[6] = "アドレス"; jumpURL[7] = "アドレス"; imgURL[0] = "top_img01.jpg"; imgURL[1] = "top_img02.jpg"; imgURL[2] = "top_img03.jpg"; imgURL[3] = "top_img04.jpg"; imgURL[4] = "top_img05.jpg"; imgURL[5] = "top_img06.jpg"; imgURL[6] = "top_img07.jpg"; imgURL[7] = "top_img08.jpg"; a = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[a]+"'>"); document.write("<img src='"+imgURL[a]+"' border='0'><br>"); document.write("</a>"); b = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[b]+"'>"); document.write("<img src='"+imgURL[b]+"' border='0'><br>"); document.write("</a>"); c = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[c]+"'>"); document.write("<img src='"+imgURL[c]+"' border='0'><br>"); document.write("</a>"); d = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[d]+"'>"); document.write("<img src='"+imgURL[d]+"' border='0'><br>"); document.write("</a>"); e = Math.floor(Math.random()*jumpURL.length); document.write("<a href='"+jumpURL[e]+"'>"); document.write("<img src='"+imgURL[e]+"' border='0'><br>"); document.write("</a>"); // --></script> </body> 現在では、画像枚数が8枚ですが、4、50枚に増える予定です。 また、スクリプトを書きやすくするために画像ファイルの名前をどのように変更してもかまわないと思っています。 上記のスクリプトは5枚の画像が表示されることはされるのですが、更新してから表示するまでの待ち時間が長いのが気になるので、できれば、欲を言うならば、早く表示してくれるようなスクリプトをご伝授していただければと思います。 よろしくお願い致します。
- ベストアンサー
- 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
- 画像のランダム表示について
ある方のスクリプトを参考にさせて頂いたのですが、 色々なサイトで調べてみると、どうも他にも色々な方法があるようで、迷っています。 私が書いたスクリプトは、以下の物なのですが、直した方が良い所や、または、お勧めの方法を教えてください。 <SCRIPT language=JavaScript> <!-- function randomimage() { rimage = Math.floor(Math.random() * 10); // if (rimage == 0) { img = "img/top/0.jpg" }; // if (rimage == 1) { img = "img/top/1.jpg" }; // if (rimage == 2) { img = "img/top/2.jpg" }; // if (rimage == 3) { img = "img/top/3.jpg" }; // if (rimage == 4) { img = "img/top/4.jpg" }; // if (rimage == 5) { img = "img/top/5.jpg" }; // if (rimage == 6) { img = "img/top/6.jpg" }; // if (rimage == 7) { img = "img/top/7.jpg" }; // if (rimage == 8) { img = "img/top/8.jpg" }; // if (rimage == 9) { img = "img/top/9.jpg" }; // tag1 = "<IMG SRC='" + img + "' border=0>"; }; // end--> </SCRIPT> <SCRIPT language=JavaScript> <!-- randomimage(); document.write(tag1); // end--> </SCRIPT> これを<BODY></BODY>の間に入れて表示させる物です。
- ベストアンサー
- JavaScript
補足
al785z29 様 懇切丁寧な御回答を誠にありがとうございます。無事にできました。 更に教えていただきたいことがあるのですが、下のように、各画像にカーソルを置いたときに下に出るリンク先を変えるにはどうすればよろしいのでしょうか。 onmouseover="window.status='http://**/index.html'; return true"