onMouseOverでリンクを作る方法は？

Question

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 …ショッピングカート</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;" でない理由がよく分からないのです。

「それは○○のルールにのっとっているんだよ」ということを教えて頂ければ、嬉しく思います。
皆さまのお力を貸して頂けませんでしょうか。よろしくお願いいたします。

ショッピングカート

0点

￥0

どうして"cartArea('1');" なのでしょう？ "cartArea01;" や"cartArea1;" でない理由がよく分からないのです。「それは○○のルールにのっとっているんだよ」ということを教えて頂ければ、嬉しく思います。皆さまのお力を貸して頂けませんでしょうか。よろしくお願いいたします。

public_sa · Accepted Answer

javascriptのcartArea()については cartArea('1')やcartArea('0')でマウスが重なったタイミングと離れたタイミングをフラグとしてあらわしているだけだと思います。下記と同様な感じだと思います。からまでコピーして実行してみてください。

aaaa

＞＞このテキスト文字の上に、ショッピングカートサマリーの背景画像が上書き表示され、テキスト文字は通常は表示されません。自分の環境ですと再現できないのでわかりませんでした。が、でもマウスが乗った時にポップみたいに表示されるやつですかね？マウスが乗ったとき表示される代替テキストみたいなのを javascriptで変更したりする気がしましたが。。

auty · Answer

・　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 … title="ショッピングカート">ショッピングカート</a>
です。

onMouseOverでリンクを作る方法は？

javascriptのcartArea()については

・ public_sa様の御指摘の様に、cartArea(n)は、単に背景色を変更しているだけです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

・　public_sa様の御指摘の様に、cartArea(n)は、単に背景色を変更しているだけです。