画像をつかって現在表示している画像の枚数(7枚中1枚目といった感じの)をあらわす方法を探しています。

PHPかJavaScriptでいけるのではないかと思うのですが・・・

添付画像のように、丸を画像の枚数分用意し、
(画像数もフォルダによって変化します。)
表示されているページの丸は色が変化するようにしようと
おもっています。

また、フォルダによって画像数も変化するので、
この丸の画像も減少しないといけません。

また、1枚目の画像を表示時に、3枚目の画像の丸を押した場合、
3枚目の画像にリンクしていて、3枚目の画像が表示されるように
したいのです。

かなりややこしいのですが、
どなたかご教授いただけないでしょうか!
宜しくお願いします!!!

※添付画像が削除されました。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

がぞうをぜんぶよみこむのが、むだなようなきもするけど


かいぞうしがいがあるようにしたじょ?<かなりてぬき。
<!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>
    • good
    • 0
この回答へのお礼

簡単に組まれた、とのことですが、
ここまでのご回答を頂いてありがとうございます!!!
完璧です!

これを元に、フォルダの指定をPHPで入れえてみようと
思います。

本当にありがとうございました。

お礼日時:2009/05/26 04:08

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

    • good
    • 0

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>
    • good
    • 0
この回答へのお礼

ありがとうございます!!
HTML内のコーディングもかなり短く、
とってもありがたいです!!

少し遅いのは後で解消するとして
これで、実装したいと思います!

本当にありがとうございました!

お礼日時:2009/05/26 14:32

PHPかJavaScriptでいけるのではないかと思うのですが==>


フォルダー内の画像の数や、画像ファイルの名前を取得するのは、JavaScriptのみでは無理です。予め分かっていて固定ならばJavaScriptのみ
でも出来そうです。

かなりややこしいのですが、==>
 いきなり全部の機能を作ろうとするから、ややこしくなる。特に期限がないならステップバイステップで、試しながら作ってみてはいかがでしょう。

(1)丸の画像を動的に表示したり、消したりしてみる。
(2)丸の画像をクリックしたり、オンマウスした時に、関数が動作する
 仕組みを作ってみる。
(3)選択された画像を表示する仕組みを作ってみる
(4)丸の画像を変える仕組みを作ってみる
 ----
 等
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!!
そうなんです。頭の中に一度にやらなきゃいけないことが
押し寄せた感じで・・・大混乱中です(*´Д`)=з

わかりやすく分けていただいてありがとうございます!!
さっそく1~順にやってみようと思います!

お礼日時:2009/05/25 14:31

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング