1221403790 過去に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

ベストアンサー

id:backupper No.2

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

id:gelgelgel

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

素晴らしいコードです!!

質問後、自分でいろいろ試して一応動作は実現できるようになったのですが、ソースの長さが2倍以上ありますし、何科すまーートではありませんでしたので大変感謝しております。現状「Showcase.prototype.addTab~」以下がまったく理解できませんがあとでゆっくり確認したいと思います。

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

2008/09/15 17:00:15

その他の回答(1件)

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582008/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>
id:gelgelgel

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

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

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

2008/09/15 00:58:51
id:backupper No.2

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

id:gelgelgel

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

素晴らしいコードです!!

質問後、自分でいろいろ試して一応動作は実現できるようになったのですが、ソースの長さが2倍以上ありますし、何科すまーートではありませんでしたので大変感謝しております。現状「Showcase.prototype.addTab~」以下がまったく理解できませんがあとでゆっくり確認したいと思います。

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

2008/09/15 17:00:15

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません