- ベストアンサー
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;" でない理由がよく分からないのです。 「それは○○のルールにのっとっているんだよ」ということを教えて頂ければ、嬉しく思います。 皆さまのお力を貸して頂けませんでしょうか。よろしくお願いいたします。
- zhy_a
- お礼率36% (21/57)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （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行が答えのポイントでした。 ありがとうございました！
関連するQ&A
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- tableでレイアウトが崩れる場合
技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>
- ベストアンサー
- HTML
- tableセル内の長い文章の後半をカットする方法
Internet Explorerで表示することを前提に、テーブルのセル内にある長すぎる文章は後半を表示しないようにすることで、すべてのセルをウィンドウの横幅以内に収めたい考えています。 以下のスタイルシートを用いたHTML文章の場合、ブラウザで表示するのであれば、こちらの考えているレイアウトで表示されるのですが、このページを印刷するときは、長い文章の後半は改行されて複数行で表示されてしまいます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <style> table{width:100%;border-collapse:collapse;border-width:2px;border-color:black;border-style:solid;} td{border-width:1px 2px 1px 2px;border-style:solid;border-color:black;} th{border:solid 2px black;padding:2mm;background-color:#F0F0F0;} div.t{font-size:5mm;overflow:hidden;height:5mm;margin:1mm;word-break:break-all;} </style> <body> <table> <tbody><tr><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th></tr></tbody><tbody> <tr><td><div class="t">文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト</div></td><td><div class="t">文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト</div></td><td><div class="t">c</div></td><td><div class="t">d</div></td><td><div class="t">e</div></td></tr></tbody><tbody> <tr><td><div class="t">a</div></td><td><div class="t">b</div></td><td><div class="t">c</div></td><td><div class="t">d</div></td><td><div class="t">e</div></td></tr></tbody></table> </body> </html> 印刷時にもセル内の文章が改行されず、かつ、すべてのセルが用紙の横幅に収まる方法をお教えください。
- ベストアンサー
- HTML
- 文字をオンマウスすると、画像がかわり、クリックで他のページへいくようにしたい。
初めてJavaを使いました。 『文字にマウスを当てると、上に置いた画像がかわり、さらにその文字をクリックすると、他のページにいくようにしたいのです』 文字にマウスを当てると、上に置いた画像が変わるとこまではできましたが、どうしても他のページへのリンクができません。 よい方法を教えてください。 作ったHTMLは以下のとおりです。 <SCRIPT language="JavaScript"><!-- function myChgPic(myPicURL){ document.images["myBigImage"].src = myPicURL; } // --></SCRIPT> <TABLE align="center"> <TBODY> <TABLE border="0" align="center"> <TBODY> <TR> <TD><IMG src="ankor.jpg" name="myBigImage" border="2"></TD> </TR> <TR> <TD><A href="javascript:void(0)" onmouseover="myChgPic('shanghai.jpg')">上海 <br> <A href="javascript:void(0)" onmouseover="myChgPic('italy.jpg')">イタリア <br> <A href="javascript:void(0)" onmouseover="myChgPic('canada.jpg')">カナダ </A> </TD> </TR> </TBODY> </TABLE> 上海、カナダ、イタリアという文字をクリックしたら、その写真にかわり、文字をクリックしたらそれぞれのページにリンクさせたいのです。
- 締切済み
- JavaScript
- ＪＳ onmouseoverについて
お世話になっております。 お忙しいところ申し訳ありません onmouseoverでテキストリンクから 画像を表示させているのですが onmouseで出た画像の場所に <select>で表示したセレクターがあり 画像が隠れてしまいます どちら様か画像を一番上に持ってくる 方法を教えていただけないでしょうか？ 仕様 ＷＩＮ ＸＰ ＩＥ ＳＰ２ ＮＮで見ると表示されます。 文章が下手で申し訳ありません かいつまんだソースをのせます <!-- function msg() { document.all.aaa.innerHTML ='<table width=200 cellspacing=0 cellpadding=0 border=1><tr><td>bbb</td></tr></table>'; } //--> </script> <div id="aaa" STYLE="position:absolute;"></div> <a onmouseover="msg()" HREF="###">1111</a> <select name="ggg"> <option VALUE="" SELECTED>xxx</option> <option VALUE="">yyy</option> </select> です。 bbbを見えるようにしたいのです よろしくおねがいします
- 締切済み
- JavaScript
- <tbody>
<tbody> <tr> <td> <div>03</div> </td> <td> <div> 9</div> </td> <td> <div>0</div> </td> </tr> <tr> <td> <div>03</div> </td> <td> <div>11</div> </td> <td> <div>11</div> </td> </tr> </tbody> のようなHTMLを、javascriptで、 [["03/9",0],["03/11",11]] というような多次元配列に変換したいと思っています。 どなたか、ご教授願えませんでしょうか？ 拙い説明で申し訳ありません、、、、 何卒、よろしくお願い致します。
- ベストアンサー
- JavaScript
- Layerの中にあるリンクがmacで動作しません
以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript～window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>
- ベストアンサー
- HTML
- CSSで、リンクに触れると一部ボックスが消えてしまう
http://www.stylish-style.com/gallery/base-temp/2-center-head/index.html 上記のサイトのようなページを作りました。 このページでいうところのIDがrightの部分に、ボックスを入れてあります。 ヘッダーの部分にさらに <div id="headerBox"> <!-- 名前 始まり --> <span id="nameBox"> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody> <tr> <td class="nameTD"><img src="face.jpg" alt="" class="nameImg" /></td> <td class="nameTD"><font class="nameBoxText">●●<br /></font></td> </tr> </tbody> </table> </span> <!-- 名前 終わり --> <!-- メニュー --> <span id="mainMenu"> <ul id="menu"> <li id="toppage"><a href="top.html">ホーム</a></li> </ul> </span> <!-- メニュー 終わり--> </div> というボックスを下に入れたとき、既にヘッダーに入れてあった <a href="top.html"><img src="img/logo.gif" /></a> というリンク部分にマウスが触れたときだけ（まるでオンマウスで指定したかのように）、leftとrightの下部分がごっそり消えてしまいます。 リンクの指定は、外部からまとめて呼び出しているため、上記のリンクだけ別に指定はしていません。リンク画像に触れたときだけ、leftとrightの下一部だけ消えます。フッターは表示されていて、繰り上げて表示されます。 タグはすごく長いので、すべては表示できませんが、原因にお心あたりのあるかた、よろしくおねがいいたします。
- ベストアンサー
- HTML
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- フレームの上下でテーブルの横幅を合わせたい場合
パソコン用ホームページでフレームを使用したページを作成中なのですが、メニューを上フレームに横並びにして記述したので、それと同じ幅のテーブルを下フレームにも作りたいのです。 しかし！ブラウザが違うと横幅が違ってしまうので困っています。 下にタグを記述します。 なんでもいいのでアドバイスをお願い致します。 <html> <head> <title>テスト</title> </head> <body> <div align="center"> <table cellspacing="1" cellpadding="0"> <tbody> <tr> <th valign="top" class="td1" align="left"> あああ </th> <td width="200"> ううう </td> </tr> <tr> <td> <textarea rows="15" cols="70">いいい</textarea> </td> <td valign="top" class="td1"> えええ </td> </tr> </tbody> </table> <br> </div> </body> </html>
- ベストアンサー
- HTML
お礼
ありがとうございます！ えらく勘違いしていた(色を変えているだけの記述だった)こと、 教えていただかなければ自分で気づけなかったと思います。 たいへん助かりました。 教えていただいたことを踏まえて、ショッピングカートサマリーをよく見ると、(マウスでさぐってみれば) 上から３分の１くらいがリンクありで、下３分の２はリンク無しだったことがに気づきました。 マウスオーバーでボタン全体の色が変わっていたので、 ボタン全体がリンクありだと思い込んでいました。 下の方をクリックしても遷移しなかったはずなのに、案外気づかないことに驚きです。 ボタン全体でポインタ画像が「指の形」になっても、 「ショッピングカート」の文字を押したくなる心理なのでしょうか。 たいへん助かりました。ありがとうございました！