- ベストアンサー
プルダウンメニューの見た目を変える方法とは？
- HP上でプルダウンメニュー(オプションメニュー)を使いたいが、メニューボタンの見た目がデザインに合わない場合、どのように変えることができるのか？Mac OS9.x のiCabでも正常に動作する必要がある。
- オリジナルのセレクトボタン画像を作成し、srcでリンクさせるか、デフォルトのままでも下地やテキストの色を指定することで、サイトのデザインに合わせることができる。
- FLASHを使用することができない場合でも、HTMLとJavaScript(もしくはCSS)でプルダウンと同じような機能で見た目をカスタマイズする方法がある。
- jackmini
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
すみません、javascriptの部分修正します。 （＝＝； Operaだと、うまく動きますが、IEだと動きませんね、、。 テストOperaでしか、してませんでした。 function popAction() { // 親メニューのイメージを修正 // 選択されたアイテムそれぞれに対応するイメージを設定 // TABLE1.style="position:absolute; top:50px; left:10px;"; TABLE1.style.position = "absolute"; TABLE1.style.top = "50px"; TABLE1.style.left = "10px"; } // メニュー選択時の処理 function OnBtnACtion(iIndex) { // メニューを再び隠す // TABLE1.style="position:absolute; top:-100px; left:-100px;" TABLE1.style.position = "absolute"; TABLE1.style.top = "-100px"; TABLE1.style.left = "-100px"; ...残りは、前のと同じです。
その他の回答 (1)
- akanekor
- ベストアンサー率52% (102/194)
めんどくさいやり方ですが、 HTML,JavaScript,CSSで可能です。 なお、フォームの<SELECT>タグ<OPTION>タグは使いません。 やり方としては、プルダウンメニューの 選択肢側をイメージにして、 押された際、アイテムリストを呼び出す形になります。 なお、アイテムリストは、見えなくして隠すやり方もありますが、 ＩＥだと表示時に妙な隙間が出来てしまうため、 アイテムリストは、画面外に移動してもらい、 ボタンが押された際に、選択肢側に移動させるやり方をします。 後、アイテムリストの位置とかは、画面により要微調整 （＝＝； 画像を Menu側未選択イメージ。 選択された際のイメージ×アイテム数。 アイテムイメージ（mouse通常）×アイテム数分 アイテムイメージ（mouse乗り時）×アイテム数分 を用意します。 OYA_MAIN.jpg : Menu側未選択イメージ。 OYA_1.jpg : 選択された際のイメージ。 menu00.jpg : アイテムイメージ（mouse通常） menu00_ON.jpg: アイテムイメージ（mouse乗り時） <HTML> <HEAD> <style type="text/css"> <!-- /* 初期表示時リストを画面外に持っていく*/ #TABLE1 { position:absolute; top:-100px; left:-100px;} --> </style> <script type='text/javascript'> <!-- function popAction() { TABLE1.style="position:absolute; top:50px; left:10px;" } // メニュー選択時の処理 function OnBtnACtion(iIndex) { // メニューを再び隠す TABLE1.style="position:absolute; top:-100px; left:-100px;" // 親メニューのイメージを修正 // 選択されたアイテムそれぞれに対応するイメージを設定 switch(iIndex) { case 1: image_main.src ='OYA_1.jpg' break; case 2: image_main.src ='OYA_2.jpg' break; case 3: image_main.src ='OYA_3.jpg' break; } //.. } </script> </HEAD> <TABLE ID='TABLE1'> <TR><DIV onmouseover ="image1.src='menu00_ON.jpg'" onmouseout="image1.src='menu00.jpg'" ><image ID='image1' src= 'menu00.jpg' onclick='OnBtnACtion(1);'></DIV></TR> <TR><DIV onmouseover ="image2.src='menu01_ON.jpg'" onmouseout="image2.src='menu01.jpg'" ><image ID='image2' src= "menu01.jpg" onclick='OnBtnACtion(2);'></DIV></TR> <TR><DIV onmouseover ="image3.src='menu02_ON.jpg'" onmouseout="image3.src='menu02.jpg'" ><image ID='image3' src= "menu02.jpg" onclick='OnBtnACtion(3);'></DIV></TR> </TABLE> <TABLE> <TR><image ID='image_main' src= 'OYA_MAIN.jpg' onclick='popAction();'></TR> </TABLE> </BODY> </HTML>
お礼
akanekorさん、一ヶ月以上前にご回答頂いていたようで…。お礼が大変遅れて申し訳ありませんでしたm(__)m (諦めて、回答はもう閉め切ったつもりでいたもので。) 実は、『JavaScriptとクリッカブルマップを使って、そのつど画像を入れ替える』という、無理矢理なやり方でオプションボタン風なモノを作成した所でした。 まだ、回答頂いたスクリプトに関しては検証していないので、これからやってみます。 自分の希望している形に近いようでしたら、ゼヒゼヒ使わせて頂きます!! (今の自分のやり方だと、更新時にやたら手間がかかってしまうもので…) 内容はどうあれ、わざわざスクリプトを作って頂いた上、ブラウザテストまでして頂き、本当にありがとうございました。 また、機会がありましたら、ご教授のほどよろしくお願いします。 m(__)m