gelgelgel回答ポイント 110pt

過去にhttp://q.hatena.ne.jp/1220270206でアマゾンの商品項目の表示方法をご教示頂いたのですが、サブ画像をマウスオーバーするとアマゾン同様、枠の色が変わるようにしたいと思っております。（参考→http://www.amazon.co.jp/gp/product/B000FS7V36/）

前回まで教えていただいたのは以下のソースです。

============================================================
function gazou(mySrc, myAnc) {
document.getElementById('myimg').src=mySrc ;
document.getElementById('myanc').href = myAnc ;
}

<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons1.gif', 'panda')">パンダ</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons2.gif', 'penguin')">ペンギン</a>
<br><br>
<a href="panda" id="myanc">
<img src="images/icons1.gif" border="0" width="32" height="32" id="myimg"></a>
============================================================
※上記のソースではパンダ・ペンギンのテキストの周りにborderなどで枠を作る
※実際にはサブ画像の数はランダムなので、一つのコードで柔軟に対応できると嬉しく思います。

ついでにJavaScriptが全然身につかないので、オススメの学び方があれば宜しくお願いいたします。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

backupper2008/09/15 02:43:34
満足100pt
書いてみました。
```
<html>
<head>
<title>1221403790</title>
<style type="text/css">
span.on {
  border: solid 1px #e00;
  cursor: pointer;
}
span.off {
  border: solid 1px #fff;
  cursor: pointer;
}
</style>
<script type="text/javascript">
function Showcase(img, a) {
  this.img = document.getElementById(img);
  this.a = document.getElementById(a);
  this.tab = new Array();
}
Showcase.prototype.addTab = function(eid, img, link) {
  var elem = document.getElementById(eid);
  this.tab.push(elem);
  var _self = this;
  elem.onmouseover = function() {
    var len = _self.tab.length;
    for (var i=0; i<len; i++) {
      _self.tab[i].className = 'off';
    }
    _self.img.src = img;
    _self.a.href = link;
    this.className = 'on';
  }
}
</script>
</head>
<body>
<span id="panda" class="on">パンダ</span>
<span id="penguin" class="off">ペンギン</span>
<span id="zebra" class="off">シマウマ</span>
<br><br>
<a href="panda" id="myanc"><img src="pic/o00.jpg" id="myimg" border="0"></a>
<script type="text/javascript">
var s = new Showcase('myimg', 'myanc');
s.addTab('panda', 'pic/o00.jpg', '/panda.html');
s.addTab('penguin', 'pic/o01.jpg', '/penguin.html');
s.addTab('zebra', 'pic/o02.jpg', '/zebra.html');
</script>
</body>
</html>
```
scriptタグが2度出てきていますが、上のタグ内を変更する必要はありません。外部ファイルとして切り出す事も可能です。

変更が必要なのは以下の部分のみです。

変更箇所A
```
<span id="panda" class="on">パンダ</span>
<span id="penguin" class="off">ペンギン</span>
<span id="zebra" class="off">シマウマ</span>
```
変更箇所B
```
var s = new Showcase('myimg', 'myanc');
s.addTab('panda', 'pic/o00.jpg', '/panda.html');
s.addTab('penguin', 'pic/o01.jpg', '/penguin.html');
s.addTab('zebra', 'pic/o02.jpg', '/zebra.html');
```
変更箇所Aはサブ画像切り替え用のボタン群です。重要なのはidを適切に振る事ぐらいでしょうか。

変更箇所B 1行目の Showcase は gazou 関数みたいな物です。引数に切り替え領域のIMGタグに振られているidと、アンカータグのidを指定します。

a.addTabの部分は変更箇所Aで設定されたidを第一引数に指定します。第二引数はサブ画像のパス。第三引数はリンク先のアドレスです。

サブ画像の数は変更箇所Aのspanの数と、s.addTabの数を増やせばいくらでも増やせます。

javascriptのオススメの学び方はとにかくソースを読んでリファレンスを引く事です。

DWが書き出す様なスクリプトではなく、面白いサービスとか作ってる会社のサイトのソースが良いと思います。あまり小さなソースだと総じて汎用的に使えるコードになっていないので、大変でもそこそこのボリュームのソースを読んだ方が結局は習得が速いと思います。
スター
- gelgelgel 2008/09/15 17:00:15
  
  ご回答ありがとうございます!!
  
  素晴らしいコードです!!
  
  質問後、自分でいろいろ試して一応動作は実現できるようになったのですが、ソースの長さが2倍以上ありますし、何科すまーートではありませんでしたので大変感謝しております。現状「Showcase.prototype.addTab~」以下がまったく理解できませんがあとでゆっくり確認したいと思います。
  
  ありがとうございました!!

その他の回答

GEN1112008/09/15 00:35:40
満足10pt

JavaScript ではなく CSS で。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style type="text/css">
      a.subimg { border : solid 1px white ; }
      a.subimg:hover { border-color : green ; }
    </style>
  </head>

  <body>
    <a href="JavaScript:void(0)" onMouseOver="gazou('images/icons1.gif', 'panda')" class="subimg">パンダ</a>
    <a href="JavaScript:void(0)" onMouseOver="gazou('images/icons2.gif', 'penguin')" class="subimg">ペンギン</a>
    <br><br>
    <a href="panda" id="myanc">
      <img src="images/icons1.gif" border="0" width="32" height="32" id="myimg">
    </a>
  </body>
</html>

スター

gelgelgel 2008/09/15 00:58:51

ご回答ありがとうございます。

上記の方法ですとマウスオーバー時にしか枠が表示されません。

Amazonのリンクを見て頂けるとわかるのですがマウスアウトしてからも他のサブイメージにマウスオーバーするまで枠が残ります。これはCSSではできないと思います。

ベストアンサー

backupper2008/09/15 02:43:34
満足100pt

gelgelgel 2008/09/15 17:00:15

その他の回答

GEN1112008/09/15 00:35:40
満足10pt

gelgelgel 2008/09/15 00:58:51

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

ベストアンサー

backupper2008/09/15 02:43:34 満足100pt

gelgelgel 2008/09/15 17:00:15

その他の回答

GEN1112008/09/15 00:35:40 満足10pt

gelgelgel 2008/09/15 00:58:51

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

backupper2008/09/15 02:43:34
満足100pt

GEN1112008/09/15 00:35:40
満足10pt