- ベストアンサー
onMouseOverでリンクを作る方法は？
onMouseOverを使って、特定のブロックをリンクボタンのように機能させる方法を教えて頂けませんでしょうか。 具体例は、ユニクロさんのショッピングカートです。 ユニクロさんのオンラインストアサイトでは、ほとんどのページでページの右上に小さなショッピングカートサマリーが表示されます。(トップページ以外) 【たとえば、このページ。(リンク先はユニクロさんの特集一覧)】 http://store.uniqlo.com/jp/store/feature/ このショッピングカートサマリーはareaStoreNaviというブロックで、 下層にCartArea01という要素を持ち、その要素内に「ショッピングカート」というテキスト文字で、カートの中身を表示するURLへリンクを貼っています。 このテキスト文字の上に、ショッピングカートサマリーの背景画像が上書き表示され、テキスト文字は通常は表示されません。 そしてショッピングカートサマリーの背景画像やその文字列にはリンクが貼られていません。 上位ブロックであるareaStoreNaviにOnMouseOverで、マウスオーバー時にCartArea01のリンク効果をareaStoreNaviブロックに適用しているのだと思うのですが、実際に自分の環境で記述する方法が分からないのです。 <DIV id=areaStoreNavi onMouseOver="cartArea('1');" onmouseout="cartArea('0');"> <DIV class=Cartarea01><A title=ショッピングカート href="http://store.uniqlo.com/jp/disp/CUCtViewCartLink.jsp">ショッピングカート</A></DIV> <DIV class=Cartarea02> <TABLE cellSpacing=0 cellPadding=0 width=114 border=0> <TBODY> <TR> <TD class=itemNum>0点</TD></TR> <TR> <TD class=itemPrice>￥0</TD></TR></TBODY></TABLE></DIV> どうして"cartArea('1');" なのでしょう？ "cartArea01;" や"cartArea1;" でない理由がよく分からないのです。 「それは○○のルールにのっとっているんだよ」ということを教えて頂ければ、嬉しく思います。 皆さまのお力を貸して頂けませんでしょうか。よろしくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
javascriptのcartArea()については cartArea('1')やcartArea('0')でマウスが重なったタイミングと 離れたタイミングをフラグとしてあらわしているだけだと 思います。 下記と同様な感じだと思います。 <html>から</html>まで コピーして実行してみてください。 <html> <head> <script type="text/javascript"> <!-- //背景色が変わる function changeBgcolor (num) { //1の時は青 if (num == '1') { document.getElementById('dummy').style.backgroundColor = "#000099"; //それ以外は白 } else { document.getElementById('dummy').style.backgroundColor = "#FFFFFF"; } } //リンクの設定 function changeLink () { document.getElementById('lnk').href = "./foo.html"; } // --> </script> </head> <body> <div id="dummy" onmouseover="changeBgcolor('1');" onmouseout="changeBgcolor('0');">aaaa</div> <div onmouseover="changeLink();"><a name="lnk" href="">aaaa</a></div> </body/> </html> ＞＞このテキスト文字の上に、ショッピングカートサマリーの背景画像が上書き表示され、テキスト文字は通常は表示されません。 自分の環境ですと再現できないのでわかりませんでした。 が、 でもマウスが乗った時にポップみたいに表示される やつですかね？ マウスが乗ったとき表示される代替テキストみたいなのを javascriptで変更したりする気がしましたが。。
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
・ public_sa様の御指摘の様に、cartArea(n)は、単に背景色を変更しているだけです。 ソースコードは以下の通りです。 http://store.uniqlo.com/jp/js/disp/item.js function cartArea(n){ if(n=='0'){ document.getElementById('areaStoreNavi').style.backgroundColor = "#434343"; } else { document.getElementById('areaStoreNavi').style.backgroundColor = "#000000"; } } ＞＞＞ このテキスト文字の上に、ショッピングカートサマリーの背景画像が上書き表示され、テキスト文字は通常は表示されません。 普通の画像はありません。おそらく、LiveConnectやSparklineといった技術でPNG形式の画像を作成しているのでしょう。また、テキスト文字は表示されています。 ＞＞＞ 上位ブロックであるareaStoreNaviにOnMouseOverで、マウスオーバー時にCartArea01のリンク効果をareaStoreNaviブロックに適用しているのだと思うのですが、実際に自分の環境で記述する方法が分からないのです。 最初に述べたように、OnMouseOverは、リンクとは全く関係がありません。リンクはあくまでも <a href="http://store.uniqlo.com/jp/disp/CUCtViewCartLink.jsp" title="ショッピングカート">ショッピングカート</a> です。
お礼
ありがとうございます！ お礼の内容が重複しますが、お二方の回答を同時に参考にして勉強しました。 特にautyさんの回答の中では、ソースコードの#434343が参考になりました。 これがなければ、「ボタン全体の色が変わっているだけで、リンクは上3分の1だけ」だったことに気づけなかったと思います。 >>LiveConnectやSparklineといった技術でPNG形式の画像を作成しているのでしょう。 「これって、どんな技術だろう？」と興味を持ちましたので、 お礼を投稿したあとに自分で調べてみます。 >>最初に述べたように、OnMouseOverは、リンクとは全く関係がありません。リンクはあくまでも >> <a href="http://store.uniqlo.com/jp/disp/CUCtViewCartLink.jsp" title="ショッピングカート">ショッピングカート</a> >>です。 そうなんですね。ホントにこの3行が答えのポイントでした。 ありがとうございました！
お礼
ありがとうございます！ えらく勘違いしていた(色を変えているだけの記述だった)こと、 教えていただかなければ自分で気づけなかったと思います。 たいへん助かりました。 教えていただいたことを踏まえて、ショッピングカートサマリーをよく見ると、(マウスでさぐってみれば) 上から３分の１くらいがリンクありで、下３分の２はリンク無しだったことがに気づきました。 マウスオーバーでボタン全体の色が変わっていたので、 ボタン全体がリンクありだと思い込んでいました。 下の方をクリックしても遷移しなかったはずなのに、案外気づかないことに驚きです。 ボタン全体でポインタ画像が「指の形」になっても、 「ショッピングカート」の文字を押したくなる心理なのでしょうか。 たいへん助かりました。ありがとうございました！