人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1221403790
●拡大する

●質問者: gelgelgel
●カテゴリ:インターネット ウェブ制作
✍キーワード:border href JavaScript SRC アマゾン
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GEN111
●10ポイント

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ではできないと思います。


2 ● backupper
●100ポイント ベストアンサー

書いてみました。

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

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ