• ベストアンサー

JavaScriptかPHPを使って表示枚数をあらわす方法

画像をつかって現在表示している画像の枚数（7枚中1枚目といった感じの）をあらわす方法を探しています。 PHPかJavaScriptでいけるのではないかと思うのですが・・・ 添付画像のように、丸を画像の枚数分用意し、 （画像数もフォルダによって変化します。） 表示されているページの丸は色が変化するようにしようと おもっています。 また、フォルダによって画像数も変化するので、 この丸の画像も減少しないといけません。 また、1枚目の画像を表示時に、3枚目の画像の丸を押した場合、 3枚目の画像にリンクしていて、3枚目の画像が表示されるように したいのです。 かなりややこしいのですが、 どなたかご教授いただけないでしょうか！ 宜しくお願いします！！！

この投稿のマルチメディアは削除されているためご覧いただけません。

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

  • ベストアンサー
回答No.2

がぞうをぜんぶよみこむのが、むだなようなきもするけど かいぞうしがいがあるようにしたじょ？＜かなりてぬき。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <style type="text/css"> #gazou { 　width:640px; height:300px; margin:0px; padding:0px; ist-style-type:none; 　overflow:hidden; position:relative; z-index:0; } #gazou li { position:absolute; top:0px; left:0px; z-index:0;} #gazou img { border:0px none; width:640px; height:300px;} #menu { height:30px; background-color:#500; color:#ddd; width:640px; line-height:30px;font-family:sans-serif;} #menu-no { float:left; margin-left:1em; } #menu-next { float:right; margin:0 2em;vertical-align: middle;} #menu-next a { color:white; } #menu-index { float:right; font-size:150%; list-style-type:none; margin:0; padding:0;} #menu-index li { float:left; margin:0 .7ex;} .em { font-size:150%; font-weight:bold; } .ya { font-size:150%; color:red; } </style> <ul id="gazou"> <li><img src="./img/1.gif" alt="Image1/x"></li> <li><img src="./img/2.gif" alt="Image2/x"></li> <li><img src="./img/3.gif" alt="Image3/x"></li> <li><img src="./img/4.gif" alt="Image4/x"></li> <li><img src="./img/5.gif" alt="Image5/x"></li> </ul> <div id="menu"> 　<div id="menu-no"> 　　<span class="em" id="num0">1</span> 　　OF 　　<span class="em" id="num1">x</span> 　　DETAILS 　</div> 　<div id="menu-next"><a href="htt:ww">NEXT</a><span class="ya"> &#x25B6;</span></div> 　<ul id="menu-index"> 　</ul> </div> <script type="text/javascript"> //@cc_on var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'load', function () { 　　var cnt = 0, I, o; 　　var UL = document.getElementById('gazou'); 　　var LI = UL.getElementsByTagName('LI'); 　　var MI = document.getElementById('menu-index'); 　　document.getElementById('num1').firstChild.nodeValue = I = LI.length; 　　for (var i = 0; i<I; i++) { 　　　o = document.createElement('LI'); 　　　o.appendChild(document.createTextNode('○')); 　　　o.id = 'idx-' + i; 　　　MI.appendChild(o); 　　} 　　(M1 = LI[0]).style.zIndex = 2; 　}, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'mouseover', function (evt) { 　var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　var p = getParent(e, 'id', 'menu-index'); 　var n; 　 　if (M0) { M0.firstChild.nodeValue = '○'; M0.style.color = ''; M0 = null; } 　if (p && e.nodeName == 'LI') { 　　e.firstChild.nodeValue = '●'; 　　e.style.color = 'red'; 　　M0 = e; 　　n = e.id.match(/-(\d+$)/)[1]; 　　document.getElementById('num0').firstChild.nodeValue = n - 0 + 1; 　　Image('gazou', n); 　} }, false); function getParent(node, type, val) { 　return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) { 　var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return; 　var P = (function L () { 　　M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/; 　　if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30); 　}); 　LI.style.zIndex = 1; 　LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/; 　P(); } </script>

mihomama84
質問者

お礼

簡単に組まれた、とのことですが、 ここまでのご回答を頂いてありがとうございます！！！ 完璧です！ これを元に、フォルダの指定をPHPで入れえてみようと 思います。 本当にありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.4

おいしいとこだけ、もってったなぁ～　ばぶぅ～！^^;

全文を見る
すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

PHPの方に質問されている同様の質問に対するMPXさんの解答サンプルとここのbabu_babooさんの解答サンプルを合体させたら、ほとんど出来上がったサンプルの解答が出来ました。実際に動きました。ページ読み込みが遅いですね。 （合体サンプル） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> #gazou { 　width:640px; height:300px; margin:0px; padding:0px; ist-style-type:none; 　overflow:hidden; position:relative; z-index:0; } #gazou li { position:absolute; top:0px; left:0px; z-index:0;} #gazou img { border:0px none; width:640px; height:300px;} #menu { height:30px; background-color:#500; color:#ddd; width:640px; line-height:30px;font-family:sans-serif;} #menu-no { float:left; margin-left:1em; } #menu-next { float:right; margin:0 2em;vertical-align: middle;} #menu-next a { color:white; } #menu-index { float:right; font-size:150%; list-style-type:none; margin:0; padding:0;} #menu-index li { float:left; margin:0 .7ex;} .em { font-size:150%; font-weight:bold; } .ya { font-size:150%; color:red; } </style> <script type="text/javascript" charset="utf-8"> <!-- //@cc_on var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'load', function () { 　　var cnt = 0, I, o; 　　var UL = document.getElementById('gazou'); 　　var LI = UL.getElementsByTagName('LI'); 　　var MI = document.getElementById('menu-index'); 　　document.getElementById('num1').firstChild.nodeValue = I = LI.length; 　　for (var i = 0; i<I; i++) { 　　　o = document.createElement('LI'); 　　　o.appendChild(document.createTextNode('○')); 　　　o.id = 'idx-' + i; 　　　MI.appendChild(o); 　　} 　　(M1 = LI[0]).style.zIndex = 2; 　}, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'mouseover', function (evt) { 　var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; 　var p = getParent(e, 'id', 'menu-index'); 　var n; 　 　if (M0) { M0.firstChild.nodeValue = '○'; M0.style.color = ''; M0 = null; } 　if (p && e.nodeName == 'LI') { 　　e.firstChild.nodeValue = '●'; 　　e.style.color = 'red'; 　　M0 = e; 　　n = e.id.match(/-(\d+$)/)[1]; 　　document.getElementById('num0').firstChild.nodeValue = n - 0 + 1; 　　Image('gazou', n); 　} }, false); function getParent(node, type, val) { 　return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) { 　var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return; 　var P = (function L () { 　　M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/; 　　if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30); 　}); 　LI.style.zIndex = 1; 　LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/; 　P(); } // --> </script> </head> <body> <a href=" <?php echo $_SERVER["PHP_SELF"] . "?folder=./../image" ; ?>" >フォルダー名</a><br> <?php $folder = $_REQUEST['folder']; //$fname='marker20.png'; $d = dir($folder); while (false !== ($entry = $d->read())) if (eregi('\.(jpg|jpeg|gif|png)$',$entry)) $f[]=$entry; $d->close(); $no=array_search($fname,$f); ?> <ul id="gazou"> <?php for ($i=0;$i<count($f);$i++){ print "<li><img src=\"" . $folder . "/" . $f[$i] . "\" alt=\"Image" . $i . "/x\"></li>"; } ?> </ul><div id="menu">　<div id="menu-no"> 　　<span class="em" id="num0">1</span> 　　OF 　　<span class="em" id="num1">x</span> 　　DETAILS 　</div> 　<div id="menu-next"><a href="htt:ww">NEXT</a><span class="ya"> &#x25B6;</span></div> 　<ul id="menu-index"> 　</ul> </div> </body> </html>

mihomama84
質問者

お礼

ありがとうございます！！ HTML内のコーディングもかなり短く、 とってもありがたいです！！ 少し遅いのは後で解消するとして これで、実装したいと思います！ 本当にありがとうございました！

全文を見る
すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

PHPかJavaScriptでいけるのではないかと思うのですが＝＝＞ フォルダー内の画像の数や、画像ファイルの名前を取得するのは、JavaScriptのみでは無理です。予め分かっていて固定ならばJavaScriptのみ でも出来そうです。 かなりややこしいのですが、＝＝＞ 　いきなり全部の機能を作ろうとするから、ややこしくなる。特に期限がないならステップバイステップで、試しながら作ってみてはいかがでしょう。 (1)丸の画像を動的に表示したり、消したりしてみる。 (2)丸の画像をクリックしたり、オンマウスした時に、関数が動作する 　仕組みを作ってみる。 (3)選択された画像を表示する仕組みを作ってみる (4)丸の画像を変える仕組みを作ってみる 　－－－－ 　等

mihomama84
質問者

お礼

ご回答ありがとうございます！！ そうなんです。頭の中に一度にやらなきゃいけないことが 押し寄せた感じで・・・大混乱中です(*´Д｀)=з わかりやすく分けていただいてありがとうございます！！ さっそく1～順にやってみようと思います！

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • クリックランキング　JavaScript+PHP

    クリックランキング　JavaScript+PHPで作成しようと思います。 リンク画像をクリックすると、リンクページ先にページ移動＆DBにクリックの値を追加をしたいのですが・・・・ おそらく、画像をクリックするとJavaScriptへリンク先URLと画像コードを渡して、リンク先は、Window.Openか何かで開いて、画像コードを PHPプログラムに渡すのではないかな？と思うのですが・・・。 書き方がいまいちわかりません。 サンプルコードかそのようなサイトはありませんでしょうか？？ 教えて下さい。

  • JavaScriptを使用せず画像をランダムに表示したい

    はじめまして。 私は、Php NukeというCMSを利用してサイトを運営しております。 Php Nukeでは、HTMLを利用してページを表示できるのですが、画像をランダムに表示させたいのですが、 JavaScriptは無効のようで、できません。 つきましては、JavaScriptなしでHTMLに書き込むような形で画像をランダムに表示させたいのです。（またその画像にリンクも貼れればと思います） 或いは、JavaScriptを有効にするように設定？変更ができても可です。 どなたかお知恵をお貸しいただけないでしょうか？ よろしくお願いいたします。

  • ＪａｖａＳｃｒｉｐｔだとおもうんですが・・・

    たとえば、 ―――――――――――――――― ここを押して→○ ―――――――――――――――― と表示されるＨＴＭＬ文章をつくったとします。 そうしたときに、「○」をクリックした後に○の部分だけが「×」に変化するようなものにするためにはどういった文章が必要なのでしょうか？？ ―――――――――――――――― ここを押して→× ―――――――――――――――― という表示されるＨＴＭＬをあらかじめ作って、リンクして置くというのは無しで。。。 最終的には、ある色の■をくりっくすると背景がこの色に変化して、なおかつそのクリックした■の表示だけが×に変化するようにしたいんです。 例でいうと、フォントを赤色にした■をクリックすると、背景が赤色になり、かつ始め赤色だった■が黒フォントの×になる。といったものです。 背景を変える方法はわかっているのですが、■を×にかえる方法がわかりません。 JavaScriptでできるのではないかとおもっているのですが、どうすればいいのですか？

  • PHPのみでjavascriptと同じ動きができないでしょうか。

    PHPのみでjavascriptと同じ動きができないでしょうか。 やりたいことは以下の内容です。 1.メインページ(A) のリンクから サブウィンドウ(B) を別窓で開く。 2.サブウィンドウ(B) で、フォーム処理（修正登録）する。 3.サブウィンドウ(B) を閉じたら、メインページ(A) を更新する。 javascriptだと閉じるボタンに window.opener.location.reload(); とかでできると思うのですが これをphpのみで実装したいのです。 phpのみでjavascriptと同じことはできないでしょうか。

    • ベストアンサー
    • PHP
  • JavaScriptがoffならば、ページを表示しない。

    JavaScriptがoffならば、ページを表示しない。 というのは可能なんでしょうか？ すべてをdocument.writeで書けばいいのでしょうが、 PHPで動的に、ページを作っているので、できるだけ シンプルな方がいいのです。 別のページに飛ばすと言うのでもかまいません。 一応、JavaScriptでリンク元のページを開くようにして ダブルチェックの意味合いもあるのですが。

  • Javascriptで表示のページをPHPで読む

    Javascriptを使って表示されているウェブのコンテンツをPHPで読み込む方法について教えてください。 HTMLで作られている場合は「file_get_contents」でHTMLソースを取得できますが、Javascriptを使って表示されたページのソースを読み込むにはどのようにしたらよいのでしょうか。 読み込みたいページは下記のような構造になっています。 <html> <head> </head> <body> <h2>タイトル</h2> //ここのコンテンツ部分がJavascriptをONにしないと見えない。 </body> </html>

    • ベストアンサー
    • PHP
  • JavaScriptを埋め込むには？

    こんにちは。よろしくお願いします。 現在、JavaScriptの使用が禁止されているスペースで、HPを作成していますが どうしてもポップアップを使いたいので、JavaScriptの使用が可能なスペースで 画像をクリックするとリンク先にジャンプし、ポップアップが表示されるように作成しました。 そのURLを、JavaScript使用禁止のページの画像に埋め込んだところ 当たり前ですが、JavaScriptが埋め込まれた画像が表示され その画像をクリックしないと、リンク先ジャンプ＆ポップアップ表示されません。 JavaScript禁止ページの画像クリック→リンク先ジャンプ＆ポップアップとするには どのように作成すれば良いでしょうか？ JavaScriptに関して、全くの初心者なもので、分かりづらい説明ですが どうぞ、よろしくお願いいたします。

  • [HTML+JavaScript+php]ｈｔｍｌにｐｈｐの結果を表示したい。

    こんばんは。 いま、簡単な動的なウェブページを作っています。 htmlファイルにJavaScriptで動的にphpの結果を表示できるような処理をしたいのですが・・・どのようにすれば可能か、、、参考文献が見つかりません。 ・・・色々調べたのですが。 どういうことがしたいかといいますと、htmlはphpなどにせず、htmlのままにしておきたいと思っています。 そのhtmlの<BOBY></BODY>内の一部にJavaScriptを使って、 document.write("最終更新：",document.lastModified); 時間を表示したりしています。 このような方法で、<BODY></BODY>内にphpの実行結果を表示させたいと考えています。 その場合、html側にはどのような記述を、またphpですべきことはあるのか、、、を調べています。 分かられる方・・・お教え下さい。 また、参考になりそうなページの紹介でも結構です。 何卒、宜しくお願い申し上げます。

    • ベストアンサー
    • PHP
  • PHPで何枚中何枚目という表示を作る方法

    複数のフォルダの中にある画像をそれぞれ数え　 「4枚中2枚目」　といった感じで表示する方法を 教えていただけないでしょうか。 フォルダが複数にわたるため、 どういう風に書けばいいのかわかりません！ 例えば ・フォルダ「1」 　画像数５ ・フォルダ「2] 　画像数７ ・フォルダ「3」 　画像数３ ・フォルダ「4」 　画像数７ という風にフォルダ内がなっているとして、 フォルダ1の画像がクリックされたときは 5枚中1枚目 フォルダ2の画像がクリックされたときは 7枚中3枚目 といった感じにしたいのです。 どなたかご存知の方、宜しくお願いします！！！

    • ベストアンサー
    • PHP
  • JavaScriptでPHP実行する方法

    質問させて頂きます。 現在、JavaScriptを用いて、DB内に登録されている画像を読み込み（複数の中から1つ）表示させたいと考えています。 JavaScriptを用いて画像を読み込み表示させるといった実装を行ったことが無いので、一般的に行われてる方法を教えて頂けないでしょうか。 私の考えている方法としては、 HTMLファイル上のJavaScriptでajaxというものを用いてPHPを実行させ、PHP上でDBの中から画像情報をランダムでひとつ読み込み、その情報をHTMLにjsonで返して表示させるという方法を使用するべきなのかと考えています。 ですが、ajaxという方法を使用したことが無いため、この方法が正しいのか、他に良い方法があるのではないかと不安になり質問させて頂きました。 もし何か良い方法をご存知の方がいらっしゃいましたら、ご教授お願いいたします。 また、質問に不備な点などあるかもしれませんので、その際はご指摘下さい。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する