HP作成／ジャバスクリプトの記載方法

2023/08/03 05:44

このQ&Aのポイント

HP作成初心者のためのジャバスクリプトの記載方法について解説します
サムネイル画像をクリックすると別窓で拡大表示する方法を紹介します
別窓で右クリックを禁止するためのコードの記載場所についてアドバイスをお願いします

ベストアンサー

HP作成／ジャバスクリプトの記載方法

2006/01/04 16:14

こんにちは。HP作成初心者です。下記のタグ（サムネイル画像をクリックすると、別窓で拡大表示）なんですが、別窓を開いた際に <BODY oncontextmenu="alert('右クリック禁止です');return false;">を記載して別窓内の右クリックを禁止させたいんですが、下記文章内のどのスペースに禁止タグを貼付ければよいか解らずに困っています。よろしければアドバイス御願します。サムネイル別窓ソース↓ a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('s.t.gif','sample','width=400,height=400')" border="0"> <img src="s.t.gif" width="80" height="80" border="0"> <a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('member1.jpg','sample','width=400,height=400')" border="0"> <img src="member1.jpg" width="80" height="80" border="0"></a> <a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('member1.jpg','sample','width=400,height=400')" border="0"> <img src="member2.jpg" width="80" height="80" border="0"></a>

npsr
お礼率53% (333/622)

Mac
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

harawo
ベストアンサー率58% (3742/6450)

2006/01/04 16:42 回答No.2

HTMLの基本タグはご存じですか？ <html> <head> </head> <body> </body> </html> <head>と</head>の間には、ページのタイトルや、文字コードなどを記述します。 <body>と</body＞の間には、ページの内容を記述します。アンカータグや、画像のタグなども、ここに記述します。あなたの質問は「BODYタグはどこに書けばいいのですか？」と書き換えてかまいません。とりあえずJavaScriptは関係ありません。 BODYタグは、ページの内容の先頭に開始タグ（<body>）を、ページの内容の終了に閉じタグ（</body>）を記述します。

質問者

お礼 2006/01/04 17:03

harwo様、ありがとうございます！超がつくほどの初心者の為、明らかな勉強不足でした！勉強になりました！ありがとうございます！

その他の回答 (1)

BLUEPIXY
ベストアンサー率50% (3003/5914)

2006/01/04 16:35 回答No.1

例えば、 <a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('s.t.gif','sample','width=400,height=400')" border="0"> を <a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('s.t.gif','sample','width=400,height=400');tempWin.document.body.oncontextmenu=function(){alert('右クリック禁止です');return false};" border="0"> のようにすればいいかと思いますでもイメージツールバーが出るような気がしますが、それはいいんでしょうか

質問者

お礼 2006/01/04 17:05

BLUEPIXI様、ありがとうございます！わざわざタグも記載して頂き感謝です！早速おこなってみます！また何かあればよろしく御願します！ツールバーはOKです！

関連するQ&A

javascriptでのポップアップウィンドウが開かなくて困っています＞＜
初歩的な質問ですいません。 <script language="JavaScript">  </script> <a href="javascript:OpenWin()"><img src="img/1.jpg" width="60" height="60" onClick="MM_openBrWindow('sample.html','sample','scrollbars=yes,width=460,height=460')" border="0"></a> 上のスクリプトで下のリンクで開こうとする時に、どうしても開けません。＞＜どうしてなのでしょうか！？どこかが間違えているのでしょうか！？誰か助けていただけませんでしょうか；＞＜；；
- ベストアンサー
- JavaScript
画像の枠線に色をつける方法を探しています。
画像の枠線に色をつける方法を探しています。現在無料HP作成サイトでHPを作っているのですが、ポップアップウィンドのjavascriptを設定したところ画像の枠線が消えてしまいました。入力したのが↓です。 <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> border="1"になっているのに表示されないんです。色がついていないのか。枠線自体が表示されていないのか。分からず、調べたところ、色をつけるにはスタイルシートを指定し直接書く方法があるとのことで style="border:solid 5px #000000" をつければ色をつけられるという事を発見しました。それで、下記のように入力したところ <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" style="border:solid 5px #000000" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> 枠線が太くなって表示されました。どう書けば枠線を表示できるのでしょうか。希望はborder="1"の時の太さがいいです。 HP作成初心者なのでタグがめちゃくちゃだと思います。色々なサイトから引用したため。勉強不足で申し訳ありません。よろしくお願いします。
- ベストアンサー
- HTML
文字サイズ変更のjavascriptが動かない
現在、サイトを文字サイズ変更できるようにトライしているのですが、javascriptは全くの初心者なのでよくわかりません。ページによって動かないので、何がいけないのかアドバイスお願いします！動くのは http://○○.jp/○○.html 動かないのは　http://○○.jp/○○/○○.html　のページです。以下の記述は動かない方に設定しているものです。 ************* javascript ************* function imgver(num){ var element =document.getElementById("fontSize"); var writeHtml = ''; if( num == 0){ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } else{ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } element.innerHTML = writeHtml; } ************* html ************* <ul id="fontSize"><li><a href="javascript:void(0)" onclick="font('16px');imgver(0)"><img src="../common/l.png" alt="大" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('12px');imgver(1)"><img src="../common/m.png" alt="中" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('9px');imgver(2)"><img src="../common/s.png" alt="小" width="25" height="26" border="0" /></a></li></ul> ******************************************** 画像は表示されるのですが、全く動きません。よろしくお願いします！
- 締切済み
- JavaScript
JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript">  </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript
JavaScript:メインページからサブウィンドウページを遷移させる際
メインページにボタン画像3つを配置して、それぞれからサブウィンドウを任意のサイズで開こうとしています。サブウィンドウの中身はそれぞれ別のものですが、サイズは同じなのでサブウィンドウ内でwinNameを同一にして、遷移させようとしています。ただ、遷移自体はうまくいくのですが、最初のクリックでサブウィンドウはメインウィンドウより前にでますが、そのまま２つ目のボタンで遷移させようとするとサブウィンドウはメインウィンドウの後ろにいってしまいます。どうしたら、サブウィンドウを絶えずアクティブにできるのでしょうか。メインぺージのＪＳにwindow.focus();をいれたり、サブウィンドウのbodyにonBlur="focus()"をいれたり、サブウィンドウのＪＳにwindow.focus();をいれてもうまくいきませんでした。どうぞよろしくお願いいたします。メインページのＪＳ <script language="JavaScript">  </script> ボタン画像のＪＳＡボタン：<A href="javascript:void(0); " onClick="MM_openBrWindow('a.html','LA','width=320,height=255')"><IMG SRC="images/t_large.jpg" ALT="Large" WIDTH="120" HEIGHT="28" VSPACE="5" border="0"></A> Bボタン：<A HREF="javascript:void(0); " onClick="MM_openBrWindow('b.html','LA','width=320,height=255')"><IMG SRC="images/t_large.jpg" ALT="Large" WIDTH="120" HEIGHT="28" VSPACE="5" BORDER="0"></A>
- ベストアンサー
- その他（インターネット・Webサービス）
changeImgによる画像の入れ替え時のIEにおける不安定さ
changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。何処がおかしいのでしょうか？どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
親htmlから小画面を表示させる方法
親htmlのクリックで、jpg小画面を多数表示させるJavaScriptで悩んでいます。どなたかの知識で、お助けください。 http://amenti.usamimi.info/windowopen.html にあるものを応用しました。<body><div><table>の<tr><td>部に横に並べた4個のサムネイルのjpg画像に、ｊpg元画像へのリンク指示をしています。 ■問題点 1. 最初のサムネイルをクリックすると、ｊpg元画像と「ファイルが見つかりませんでした」のエラーメッセージも同時に出る。 2. 2番目のサムネイルをクリックしても、最初と同じｊpgを表示してしまう。3/4番目は正常に表示する。 ■記述状態 1. <head>～</head>部は、～windowopen.htmlにある記述をそのまま移しました。以下です。 <script type="text/javascript"> </script> 2. <body><div><table>の<tr><td>部に横に並べた4個のサムネイルのjpg画像に、リンク指示をしています。～windowopen.htmlにある記述を少し変えただけです。以下です。（style 記述省略） <a href="album/aaaa.jpg" onclick="m_win(this.href,null,656,496); return false;"> <img src="album/aaaa_thumb.jpg" width="120" border="0" alt="ああああ"></a> <a href="album/bbbb.jpg" onclick="m_win(this.href,null,656,496); return false;"> <img src="album/bbbb_thumb.jpg" width="120" alt="いいいい"></a> <a href="album/cccc.jpg" onclick="m_win(this.href,null,656,496); return false;"> <img src="album/cccc_thumb.jpg" width="120" alt="うううう"></a> <a href="album/dddd.jpg" onclick="m_win(this.href,null,656,496); return false;"> <img src="album/dddd_thumb.jpg" width="120" alt="うううう"></a> ■変更点と疑問 1. ～windowopen.htmlでは、<a href="～"は、htmlですが、上記では直接jpgになっています。 2. onclick="m_win(this.href,null,656,496); return false;"　文は、オリジナルは第1のリンクが、具体名ですが、上記ではすべて null にしました。変更点が少ないのにエラーが出て困っています。小画面の表示される位置など、自分にとってジャストなJavaScriptなので、何とかこれをきちんと使いたいので、どこが悪いか教えてください。
- ベストアンサー
- ホームページ作成ソフト
noscriptをどうすれば？
大小の画像を２枚用意してクリックすると大画像が別ウィンドウで表示できるようになりました。 javascripがOFFの時にnoscriptで別窓表示させるようにもしました。最初はnoscriptを別に置いたのですが、これだとjavascripがOFFの時に最初から小画像が２つ表示されてしまいます・・・ <a href="javascript:void(0)" onclick=" window.open('big.jpg', '_blank', 'width=600,height=600,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <img src="mini.jpg" width="300" height="300" alt="画"> </a> <noscript><a href="big.jpg"> <img src="mini.jpg" width="300" height="300" alt="画"></a> "></noscript> そこで、下記のようにしましたが・・・動作はできるみたいです。でもnoscriptのHTMLでの位置で何か変な感じです。正しい方法をご教授ください。 <a href="javascript:void(0)" onclick=" window.open('big.jpg', '_blank', 'width=600,height=600,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <noscript><a href="big.jpg"></noscript> <img src="mini.jpg" width="300" height="300" alt="画"> </a> これ１枚の画像だけなのでライブラリを使いたくないのです。
- ベストアンサー
- JavaScript
ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
javaでサムネイルをクリックして別窓で表示したいのですが…
はじめまして！たつやです。現在ＯＳはＸＰでビルダー９を利用して画像アルバムのホームページを作成してますが、サムネイルと元画像はhtmlファイルとして用意し、それぞれのサムネイルをクリックするとタイトルバーなどが無い別画面で表示したいと考えております。別画面はクリックした画像の数だけ開くようにしたいとも考えています。ヘッド部には <script Language="JavaScript"></script> と記入して、ボディー部には <A href="jpeg/001.html" onclick="nwin1()"><IMG src="jpeg/s001.jpg" width="90" height="68" border="0"></A> <A href="jpeg/002.html" onclick="nwin2()"><IMG src="jpeg/s002.jpg" width="90" height="68" border="0"></A> と記載下のですが、ｕｐすると、 auto；blank　と出てうまくいきません。どのように対処すればよいでしょうか？取り急ぎご回答をお待ちしています。
- ベストアンサー
- ホームページ作成ソフト

HP作成／ジャバスクリプトの記載方法

HP作成／ジャバスクリプトの記載方法