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

Question

gelgelgel

56

54もっと見る

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が全然身につかないので、オススメの学び方があれば宜しくお願いいたします。

回答の条件

1人2回まで

登録：2008/09/14 23:49:53
終了：2008/09/15 17:01:21

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

No.1

GEN111472582008/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>

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

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

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

2008/09/15 00:58:51

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

backupper · Accepted Answer · 2008-09-15T02:43:34+09:00

書いてみました。

<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が書き出す様なスクリプトではなく、面白いサービスとか作ってる会社のサイトのソースが良いと思います。あまり小さなソースだと総じて汎用的に使えるコードになっていないので、大変でもそこそこのボリュームのソースを読んだ方が結局は習得が速いと思います。

backupper · Accepted Answer · 2008-09-15T02:43:34+09:00

書いてみました。

<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が書き出す様なスクリプトではなく、面白いサービスとか作ってる会社のサイトのソースが良いと思います。あまり小さなソースだと総じて汎用的に使えるコードになっていないので、大変でもそこそこのボリュームのソースを読んだ方が結局は習得が速いと思います。

ベストアンサー

backupper95102008/09/15 02:43:34

その他の回答（1件）

GEN111472582008/09/15 00:35:40

backupper95102008/09/15 02:43:34ここでベストアンサー

コメント（0件)

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