- ベストアンサー
背景画像を適用
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <script type="text/javascript"> <!-- // リンクの数 var i = 3; // 変更前の色 var nmColor = "#323232"; // 変更後の色 var spColor = "#ff5b1e"; function cngColor(int){ for(cnt=1;cnt<=i;cnt++){ if(int == cnt){document.all["key"+int].style.color = spColor;} else {document.all["key"+cnt].style.color = nmColor;} } } // --> </script> <style type="text/css"> <!-- ul{margin:0px; padding:0px; width:200px;} li{ list-style-type:none; text-align:left;} li a{height:25px; width:200px; margin:0px; padding:0px; display:block;} li a:hover{background-image:url(img.png);} ---> </style> </head> <body onLoad="cngColor(1);"> <ul> <li><a href="./" id="key1" onClick="cngColor(1);">サンプル文字列１</a><br> <li><a href="./" id="key2" onClick="cngColor(2);">サンプル文字列２</a><br> <li><a href="./" id="key3" onClick="cngColor(3);">サンプル文字列３</a><br> </ul> </body> </html> 上記ではクリックしたリンクの色が他のリンクをクリックするまで変更されたままになります。 このクリックした時に、<li>にもbackground-image:url(img.png);の背景画像を適用したいのですが、 どのようにすればいいのでしょうか。別のリンクがクリックされるまで変更したままにしますので、 スタイルシートとJavaScriptを併用しなければならないと思い、試行錯誤しておりますが、 あまり知識がないためJavaScriptでの背景画像の使い方がどうしてもわかりませんでした。 お手数をおかけいたしますが、よろしくお願いいたします。
- MASTER-PPC
- お礼率94% (52/55)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
- yambejp
- ベストアンサー率51% (3827/7415)
こんなんでどうでしょ？ //hoge.htm <html> <head> <script type="text/javascript" src="hoge.js"></script> <link rel="stylesheet" type="text/css" href="hoge.css" /> </head> <body> <ul id="menu"> <li class="active"><a href="./">サンプル文字列１</a></li> <li><a href="./">サンプル文字列２</a></li> <li><a href="./">サンプル文字列３</a></li> </ul> </body> </html> //hoge.css ul{ margin:0px; padding:0px; width:200px; } #menu li.active a{ color:#ff5b1e; background-image:url(img.png); background-Color:aqua; } #menu li a{ color:#323232; height:25px; width:200px; margin:0px; padding:0px; display:block; background-Color:yellow; } #menu li a:hover{ background-image:url(img.png); } //hoge.js window.onload=function(){ var menu=document.getElementById("menu"); var c=menu.firstChild; var flg=true; while(c){ if(c.nodeName=="LI"){ var cc=c.firstChild; while(cc){ if(cc.nodeName=="A"){ cc.onclick=function(){return cngColor(this)} } cc=cc.nextSibling; } } c=c.nextSibling; } } function cngColor(obj){ var c=obj.parentNode.parentNode.firstChild; while(c){ if(c.nodeName=="LI"){c.className="";} c=c.nextSibling; } obj.parentNode.className="active"; return false; }
お礼
有難うございます。今回自分が作成しているメニューでは、ボタン毎に背景画像を変える必要がありましたので、No1様で教えていただいたコードを少し変更して目的のメニューを作成する事が出来ました。ただ、yambejp様のコードはIDが無いぶん、リンクを変更した時のメンテナンス性が大変よさそうですので、時間のあるときに自分のメニューに使えるように試行錯誤してみようと思います。自分の知識ではとても解決できない改造でしたので、大変助かりました。
お礼
有難うございます。おかげさまで解決することが出来、大変助かりました。