- みんなの回答 （4）
- 専門家の回答
みんなの回答
- cyokokichi
- ベストアンサー率21% (32/152)
ボタンのように見えれば良いのですか。 それなら画像を使わずに枠線で表現したらそれなりに見えます。 スタイルシートは使います。 <head> <style type="text/css> <!-- /*通常時のaのスタイル*/ .menu a { display:block;/*←これをいれると前後が改行されます。*/ width:100px;/*←ここで枠の幅を調整します。*/ height:20px;/*←ここで枠の高さを調整します。*/ border:2px outset;/*←枠全体が盛り上って見える枠線*/ } /*オンマウス時のaのスタイル*/ .menu a:hover { display:block; width:100px; height:20px; border:2px inset;/*←枠全体が押し下げられて見える枠線*/ } //--> </style> </head> <body> <table class="menu"> <tr><td><a href="aaa.html">aaaa</a></td> <td><a href="bbb.html">bbb</a></td> <td><a href="ccc.html">ccc</a></td> <td><a href="ddd.html">dddd</a></td> </table> </body> スタイルシートもJavascriptもナシではムリかと思います。
- 9arabi
- ベストアンサー率32% (140/433)
No.2です ああ、そういうやり方でしたら、やっぱりスタイルシートを使うのが一番便利ですよ。 最初から全てをスタイルシートでデザインするのは難しいと思いますが、部分的に使っていくことで少しずつ覚えるものです。壁を作ってみないで例を見ながら試してみてはいかがでしょうか。 ※ただ、試してみたんですが、<table>を使って同じことをするとNetscapeで動かなかったので、<ul>タグを使っています。その分ちょっとややこしくなっているようにも見えますが、多分そのまま使ったらいけます。 <html> <head> <link rel="stylesheet" href="main.css" type="text/css" /> </head> <body> <div id="sidemenu"> <ul> <li><a href="./index.html">ホーム</a></li> <li><a href="./link1.html">リンク１</a></li> <li><a href="./link2.html">リンク２</a></li> <li><a href="./link3.html">リンク３</a></li> </ul> </div> </body> </html> で、外部のCSSファイル「main.css」には以下のように書きます。 --------------------- #sidemenu a{ background:#ffffff url(bg1.gif) no-repeat; } #sidemenu a:hover{ background:#ffffff url(bg2.gif) no-repeat; } #sidemenu li{ list-style-type:none; // 列挙の「・」を見せない padding:5px; // <li>要素のpaddingを指定 width:90px; // <li>要素の幅を指定 height:24px; // <li>要素の高さを指定 } --------------------- HTMLのほうに<div id="sidemenu">というのがありますよね。 「id="名前"」で、スタイルシートを指定するときの呼び名を決めているんです。id="名前"という書き方の場合、同じページにこれをもつタグは１つしかないということです。 （参考：「class="名前"」という書き方の場合、同じページにこれをもつ同じタグが複数存在してもよい） そして、スタイルシートのファイルの中で、 #sidemenu a と書いてあるのは、 id="sidemenu"と名前のついたタグの要素の中の<a>タグ要素に、以下のスタイルを指定しますよ、 という意味です。 #sidemenu a:hover は、マウスオーバーで以下のスタイルにします という意味になります。 background:#ffffff url(bg2.gif) no-repeat; と書いてあるのは、 backgroundについて指定しますよ、とまず述べた上で、 :のあとにそのスタイルを指定しています。 続いて、 背景色、それから画像の場所（これはスタイルシートファイルのある場所から見た相対パス）、繰り返すかどうか をそれぞれ指定していることになります。 #sidemenu li 以下の部分はこれを書かないと、列挙のための「・」が表示されてしまうので、それをなくすために書いています。 とりあえず、ここに書いた[url(bg1.gif)]の部分を変更すれば、期待した動きをすると思います。 当方Win環境で、Opera6、Netscape6、IE6、Firefox0.9にて動作を確認しました。 以上、ご参考まで。
- 9arabi
- ベストアンサー率32% (140/433)
余談になるかもしれませんが（一部のブラウザでは反応しないので）。 CSSを利用して次のようにすることもできます。 <html> <head> <link rel="stylesheet" href="./main.css" type="text/css" /> </head> <body> テーブルの背景画像を変更する <table id="chgbg"> <tr> <td>あいう</td> <td>えおか</td> </tr> </table> </body> </html> で、<head>部で指定してあるmain.cssには #chgbg{ background-image:url(../img/bg1.JPG); } #chgbg:hover{ background-image:url(../img/bg2.JPG); } と書いておく方法です。 こちらのやり方の方が動作は軽いように思われます。 :hoverは基本的に a要素に反応するようになっていますので、<a>タグをなんらかの形ではさみこめるならこういうのもありでしょうが。 参考までに。
- cyokokichi
- ベストアンサー率21% (32/152)
これでいかがでしょうか。 <body> <table id="tb" background="http://abc.com/haikei.png" onmouseover="a()" onmouseout="b()"><tr><td>aaaaaaaa</td></tr> </table> </body> <script type="text/JavaScript"> <!-- function a(){ document.getElementById("tb").setAttribute('background',"http://abc.com/gazou.png"); } function b(){ document.getElementById("tb").setAttribute('background',"http://abc.com/haikei.png"); } //--> </script> DOMで検索してみてください。 詳しい情報が見れると思います。
お礼
ありがたいのですが、よく分かりませんスタイルシートは難しいです。 狙いは、ボタンなどが、オンマウスで引っ込む動作を作りたかったのです。それで、全てのメニューの画像を作るのは面倒で、付け足しにくいので、テーブルとして使用しようとしていたわけです。