- ベストアンサー
右クリックのショートカットメニューの指定
はじめまして。 あるサイトで右クリックすると、お気に入り登録、リロード、前に戻る、次に進むだけを独自のスタイルでかっこよく表示させているところがありました。 できたら私も右クリックのショートカットメニューを指定したものだけ表示したり、お気に入り登録を追加したりしたいのですがどのようにするのでしょうか。 ジャバスクリプトではないかとここに投稿させてもらいました。 どなたかわかりましたらぜひよろしくお願いしますm(_ _)m
- DERARU
- お礼率68% (15/22)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
NNでは「ブックマークの追加」は JavaScriptで出来ないみたい。 他の機能はできるようです。 それと、コンテキストメニュー内の文字列に マウスと移動すると背景色が元に戻ってしまうんです。 これは原因は分かっていて対処もできるんですが とりあえず、できるということで。 <HTML> <HEAD> <TITLE></TITLE> <STYLE> .menuItem { font-family:sans-serif; font-size:10pt; width:200; padding-left:20; background-Color:beige; color:black } .highlightItem { font-family:sans-serif; font-size:10pt; width:200; padding-left:20; background-Color: highlight; color:white } </STYLE> <SCRIPT> <!-- var check; BrowseChk(); function BrowseChk(){ check=0; Br = navigator.appName; if(document.all) check=1; else if(document.layers) check=2; else if((document.getElementById) && navigator.appName.indexOf("Netscape")>-1) check=3; else if((Br.indexOf("Netscape")>-1) || (Br.indexOf("Internet Explorer")>-1)) check=4; } function displayMenu(ev) { if(check==3){ whichDiv=ev.target; menu1.style.left=ev.pageX; menu1.style.top=ev.pageY; } else{ whichDiv=event.srcElement; menu1.style.posLeft=event.clientX; menu1.style.posTop=event.clientY; menu1.setCapture(); } menu1.style.leftPos+=10; menu1.style.display=""; } function switchMenu(ev) { if(check==3){ el=ev.target; }else{ el=event.srcElement; } if (el.className=="menuItem") { el.className="highlightItem"; } else if (el.className=="highlightItem") { el.className="menuItem"; } } function clickMenu(ev) { menu1.style.display="none"; if(check==3){ el=ev.target; }else{ menu1.releaseCapture(); el=event.srcElement; } if (el.id=="AddFavorite") { var al=window.external; window.external.AddFavorite("http://xxx","秘密"); } else if (el.id=="reload") { location.reload(); } else if (el.id=="hisback") { history.back(); } else if (el.id=="hisfor") { history.forward(); } } var menu1; function window_onload() { menu1=document.getElementById("menu1"); document.oncontextmenu=displayMenu; menu1.onclick=clickMenu; menu1.onmouseover=switchMenu; menu1.onmouseout=switchMenu; } //--> </SCRIPT> </HEAD> <BODY onContextmenu="return false"LANGUAGE=javascript onload="return window_onload()"> <div id=menu1 style="position:absolute; display:none; width:200; background-Color:beige; border:outset 1px gray"> <div class="menuItem" id=AddFavorite>お気に入り登録</div> <div class="menuItem" id=reload>リロード</div> <div class="menuItem" id=hisback>前に戻る</div> <div class="menuItem" id=hisfor>次に進む</div> </div> </BODY> </HTML>
その他の回答 (3)
- ittochan
- ベストアンサー率64% (2667/4137)
＞ネスケでは右クリックを不能 ＞にするなどの方法はないのでしょうか？ そうなんですよね。 私のNN7でもできませんでした。 よかったら、締め切らないで待っててね。 NN6以上だったら、できるのを書けると思います。 それ以前のバージョンは持っていないので 締め切ってね。
- ittochan
- ベストアンサー率64% (2667/4137)
足りなかったみたい。 <STYLE> .menuItem {font-family:sans-serif; font-size:10pt; width:200; padding-left:20; background-Color:menu; color:black } .highlightItem { font-family:sans-serif; font-size:10pt; width:200; padding-left:20; background-Color: highlight; color:white } </STYLE> これを <TITLE></TITLE> と <SCRIPT> の間に突っ込んじゃってください。 ごめんなさい。
お礼
ittochanさん、返信大変ありがとうございます(^_^) おかげで思い通りにメニュー表示をすることができました。 かなりいろんなところを見たのですがどこを探してもわからなかったのでとてもうれしいです(^_^) あともう１つもし出来ればの要望ですが、ネスケの７だと普通にショートカットメニューが出てしまいます。 ネスケでは右クリックを不能にするなどの方法はないのでしょうか？ 私が見たサイトではやはりネスケでは普通に右クリックできてしまいました(^^;
- ittochan
- ベストアンサー率64% (2667/4137)
＞お気に入り登録、リロード、前に戻る、次に進むだけ となると、 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT> //<!-- function displayMenu() { whichDiv=event.srcElement; menu1.style.leftPos+=10; menu1.style.posLeft=event.clientX; menu1.style.posTop=event.clientY; menu1.style.display=""; menu1.setCapture(); } function switchMenu() { el=event.srcElement; if (el.className=="menuItem") { el.className="highlightItem"; } else if (el.className=="highlightItem") { el.className="menuItem"; } } function clickMenu() { menu1.releaseCapture(); menu1.style.display="none"; el=event.srcElement; if (el.id=="AddFavorite") { window.external.AddFavorite("http://xxx","秘密"); } else if (el.id=="reload") { location.reload(); } else if (el.id=="hisback") { history.back(); } else if (el.id=="hisfor") { history.forward(); } } //--> </SCRIPT> </HEAD> <BODY class="clickableSpan" oncontextmenu="displayMenu();return false"> <div id=menu1 onclick="clickMenu()" onmouseover="switchMenu()" onmouseout="switchMenu()" style="position:absolute;display:none;width:200;background-Color:menu; border: outset 3px gray"> <div class="menuItem" id=AddFavorite>お気に入り登録</div> <div class="menuItem" id=reload>リロード</div> <div class="menuItem" id=hisback>前に戻る</div> <div class="menuItem" id=hisfor>次に進む</div> </div> </BODY> </HTML> こんな感じ？
お礼
本当にありがとうございます(>_<) ネスケは少し動作が不安定でしたが同じ効果がだせました。 ネスケではできないと思っていたのでとても驚きました！ >それと、コンテキストメニュー内の文字列に >マウスと移動すると背景色が元に戻ってしまうんです。 >これは原因は分かっていて対処もできるんですが >とりあえず、できるということで。 ありがとうございます。試行錯誤して好きな色に変更することができました(^_^) 重ねての質問で申し訳ないですが私にはどう考えても不可能なので質問です(^^; ショーットカットメニューの上からマウスが離れたらメニューが自動的に消える効果をだせないでしょうか。 メニューがでたままだとリンクが機能しないということをしらず、リンクがなくなってるとあせってしまったので(^^; 私の見たサイトではあとでみたら出来ていたのでぜひと思い(^^; それから右クリックのメニューのかっこいいスタイルをスタイルだけ適用させることは可能なのでしょうか？ もし独自に追加する形でする場合「画像の保存」「コピー」「貼り付け」などは追加できるのでしょうか。 わからないといつまでも悩んでいそうなのでいろいろ質問してしまって申し訳ないですがよろしくおねがいします(^^;