- ベストアンサー
フルスクリーン表示についての応用
はじめまして。どこを探しても出ていなく、どうしても教えていただきたいので投稿させていただきました。初心者なので宜しくお願いします。 「フルスクリーンで表示する方法」についての質問なのですが、よく紹介されているのは「フルスクリーン表示」などという文字をクリックすることでフルスクリーン表示になるのは知っているのですが、文字をクリックでなく 「jpgで保存した画像」をクリックすることでフルスクリーンにするにはどのようなソースにすれば良いのか、詳しく教えてください。
- milleh
- お礼率53% (14/26)
- JavaScript
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
オンマウスはIMGタグでもできますので、この方法でも良いです。(この方法の方が分かりやすいかもしれませんね。) まず、IMGタグによるオンマウスのソースです。 <img src="最初の画像URL" width="100" height="100" border="0" onmouseover="this.src='マウスをのせた時のもう1つの画像のURL'" onmouseout="this.src='最初の画像のURL'"> これを応用して以下のようなソースでNo.5と同じ感じになります。 ------------------------------------------------ <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>フルスクリーン＆オンマウスで表示する方法パート２</TITLE> </HEAD> <BODY> <A HREF="javascript:void(0);" onclick="oWin=window.open('1.html','','fullscreen=yes, scrollbars=yes');"><img src="1.jpg" width="100" height="100" border=0 onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'"> <A HREF="javascript:void(0);" onclick="oWin=window.open('2.html','','fullscreen=yes, scrollbars=yes');"><img src="3.jpg" width="100" height="100" border=0 onmouseover="this.src='4.jpg'" onmouseout="this.src='3.jpg'"> <A HREF="javascript:void(0);" onclick="oWin=window.open('3.html','','fullscreen=yes, scrollbars=yes');"><img src="5.jpg" width="100" height="100" border=0 onmouseover="this.src='6.jpg'" onmouseout="this.src='5.jpg'"> </BODY> </HTML>
その他の回答 (5)
- thanks39
- ベストアンサー率61% (1189/1944)
var imagefile = new Array("1.jpg", "2.jpg"); を、 var imagefile = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"); のように、初めに表示させておく画像を奇数番目に、マウスを乗せたときに表示させる画像をその直後に持ってきてください。 更に、 <A HREF="JavaScript:onClick=FullScreen();" onMouseOut="ImageChange('img1', 0)" onMouseOver="ImageChange('img1', 1)"> <IMG NAME="img1" SRC="1.jpg" width="100" height="100" BORDER="0"> </A> の部分の「('img1', 0)」、「('img1', 1)」、「IMG NAME="img1" SRC="1.jpg"」を変更して追加します。以下のようなソースになります。規則性をお分かり頂けるでしょうか？ フルスクリーンの方も変更してますので注意してください。フルスクリーンの方は「'1.html'」、「'2.html'」、「'3.html'」がそれぞれの画像をクリックしたときに飛ぶページです。 ------------------------------------------------- <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>フルスクリーン＆オンマウスで表示する方法</TITLE> <SCRIPT TYPE="text/javascript"> <!-- var imagefile = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"); var image = new Array(imagefile.length); for(count = 0; count < (imagefile.length - 1); count++){ image[count] = new Image(); image[count].src = imagefile[count]; } function ImageChange(id, kind){ window.document.images[id].src = imagefile[kind]; } //--> </SCRIPT> </HEAD> <BODY> <A HREF="javascript:void(0);" onclick="oWin=window.open('1.html','','fullscreen=yes, scrollbars=yes');" onMouseOut="ImageChange('img1', 1)" onMouseOver="ImageChange('img1', 2)"> <IMG NAME="img1" SRC="1.jpg" width="100" height="100" BORDER="0"> </A> <A HREF="javascript:void(0);" onclick="oWin=window.open('2.html','','fullscreen=yes, scrollbars=yes');" onMouseOut="ImageChange('img2', 3)" onMouseOver="ImageChange('img2', 4)"> <IMG NAME="img2" SRC="3.jpg" width="100" height="100" BORDER="0"> </A> <A HREF="javascript:void(0);" onclick="oWin=window.open('3.html','','fullscreen=yes, scrollbars=yes');" onMouseOut="ImageChange('img3', 5)" onMouseOver="ImageChange('img3', 6)"> <IMG NAME="img3" SRC="5.jpg" width="100" height="100" BORDER="0"> </A> </BODY> </HTML> ------------------------------------------------ オンマウスの方は、一個目＝img1、二個目＝img2、三個目＝img3…で、SRCが初めに表示させる画像、img*, の後ろの値は0→1→2→3→4→5→6と増えます。この数字は「var imagefile = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg");」の順番を指し、0＝"1.jpg"、1＝"2.jpg"…です。[kind]の部分を[kind - 1]とすると、1＝"1.jpg"、2＝"2.jpg"…となるのでその方が分かりやすいかもしれません。(下記ソース参照) また、onMouseOutがマウスを放した時、onMouseOverがマウスが乗った時と言う意味です。 ------------------------------------------------- <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>フルスクリーン＆オンマウスで表示する方法</TITLE> <SCRIPT TYPE="text/javascript"> <!-- var imagefile = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"); var image = new Array(imagefile.length); for(count = 0; count < (imagefile.length - 1); count++){ image[count] = new Image(); image[count].src = imagefile[count]; } function ImageChange(id, kind){ window.document.images[id].src = imagefile[kind - 1]; } //--> </SCRIPT> </HEAD> <BODY> <A HREF="javascript:void(0);" onclick="oWin=window.open('1.html','','fullscreen=yes, scrollbars=yes');" onMouseOut="ImageChange('img1', 1)" onMouseOver="ImageChange('img1', 2)"> <IMG NAME="img1" SRC="1.jpg" width="100" height="100" BORDER="0"> </A> <A HREF="javascript:void(0);" onclick="oWin=window.open('2.html','','fullscreen=yes, scrollbars=yes');" onMouseOut="ImageChange('img2', 3)" onMouseOver="ImageChange('img2', 4)"> <IMG NAME="img2" SRC="3.jpg" width="100" height="100" BORDER="0"> </A> <A HREF="javascript:void(0);" onclick="oWin=window.open('3.html','','fullscreen=yes, scrollbars=yes');" onMouseOut="ImageChange('img3', 5)" onMouseOver="ImageChange('img3', 6)"> <IMG NAME="img3" SRC="5.jpg" width="100" height="100" BORDER="0"> </A> </BODY> </HTML>
- thanks39
- ベストアンサー率61% (1189/1944)
あの、思ったんですけど、画像をクリックした際に表示されるフルスクリーンのページ(リンク先)はjpgじゃなくていいのでしょうか？ それなら下記の方法でできると思います。 マウスを乗せる前に表示させて置く画像のパスを、下のソースの var imagefile = new Array("1.jpg", "2.jpg"); と <IMG NAME="img1" SRC="1.jpg" width="100" height="100" BORDER="0"> の 1.jpgの2箇所に指定してください。マウスを乗せた時に表示させる画像のパスを上の2.jpgの1箇所に指定してください。 2.jpgをクリックした際にフルスクリーンで表示させるページのパスを、 window.open("http://～.html", "", "fullscreen=yes, scrollbars=yes"); の http://～.htmlに指定してください。パスは相対パスでも絶対パスでもかまいません。 --------------------------------------- <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>フルスクリーンで表示する方法</TITLE> <SCRIPT TYPE="text/javascript"> <!-- function FullScreen(){ window.open("http://～.html", "", "fullscreen=yes, scrollbars=yes"); } //--> var imagefile = new Array("1.jpg", "2.jpg"); // var image = new Array(imagefile.length); // for(count = 0; count < (imagefile.length - 1); count++){ image[count] = new Image(); image[count].src = imagefile[count]; } function ImageChange(id, kind){ window.document.images[id].src = imagefile[kind]; } //--> </SCRIPT> </HEAD> <BODY> <A HREF="JavaScript:onClick=FullScreen();" onMouseOut="ImageChange('img1', 0)" onMouseOver="ImageChange('img1', 1)"> <IMG NAME="img1" SRC="1.jpg" width="100" height="100" BORDER="0"> </A> </BODY> </HTML> --------------------------------------- フルスクリーン先のページのソースに、 --------------------------------------- <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>ウィンドウを閉じる方法</TITLE> </HEAD> <BODY> <FORM> <img src="自作の画像.jpg" width="100" height="100" border="0" onClick="window.close()"> </FORM> </HTML> --------------------------------------- のように記入してください。 width="100" height="100"や、画像の位置は適当に変えてください。 こんな感じでしょうか？
補足
ありがとうございます。大成功です。マウスオーバーで画像も変わり、フルスクリーン表示され、リンク先のページにある画像をクリックすると、ページも閉じれました。結構ウェブに詳しい人に聞いても分からないと言われ、諦めていました。ありがとうございました。 それと、マウスオーバーによって変わるボタンを２つ、３つと追加して、それぞれのボタンをクリックすると、それぞれのページに飛ぶようにするには、どのソースを同じように入れていけば良いのですか？ 教えて下さい。
- thanks39
- ベストアンサー率61% (1189/1944)
＞このソースのどこを変えればいいのでしょうか？ <HEAD>～</HEAD>の間に、 <SCRIPT TYPE="text/javascript"> <!-- function FullScreen(){ window.open("http://～.jpg", "", "fullscreen=yes, scrollbars=yes"); } //--> </SCRIPT> を記述し、 <BODY>～</BODY>の間に、 <A HREF="JavaScript:onClick=FullScreen();"> <IMG src="http://～.jpg" width="50" height="50" border="0" ></A> を記述してください。 http://～.jpg２カ所と、width="50" height="50" border="0"は適宜変更してください。 ワイドでは試してないですが、お気に入りや、ツールバーは表示されませんでした。
補足
<HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>フルスクリーンで表示する方法</TITLE> <SCRIPT TYPE="text/javascript"> <!-- function FullScreen(){ window.open("http://～.jpg", "", "fullscreen=yes, scrollbars=yes"); } //--> </SCRIPT> </HEAD> <BODY> <A HREF="JavaScript:onClick=FullScreen();"> <IMG src="http://～.jpg" width="50" height="50" border="0" ></A> </BODY> </HTML> 返答が遅くなりましてすみません。 日本を離れていました。 これでフルスクリーン成功しました！ jpg ２箇所に違う画像を入れれば「マウスオーバーで画像が変わる」ということですか？ 急いで試してみたので上の１つしか入れてみなかったのですが・・・ それと、どうやってページを閉じてよいのかわかいませんでした。 また「閉じる」ボタンを自作の画像jpgを用意し、 そこをクリックによってページを閉じたいのですが どこにどのようなソースを入れればよいのでしょうか？すみません。教えて下さい。
言われているフルスクリーンとは違うかもしれませんが， 下のスクリプトは自分自身のウィンドウをモニタの幅に合わせるHTMLです。 --------------------------------------- <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>フルスクリーン</title> <script language="JavaScript"> <!-- function FullScreen(){ w = screen.availWidth; h = screen.availHeight; moveTo(0,0); resizeTo(w,h); } // --></script> </head> <body> <!-- ↓ これがテキストの場合 ↓ --> <a href="JavaScript:onClick=FullScreen();">フルスクリーン表示</a> <br> <br> <!-- ↓ これが画像の場合 ↓ --> <a href="JavaScript:onClick=FullScreen();"> <img border="0" src="http://oshiete1.goo.ne.jp/images/goo.gif" width="71" height="37"> </a> <br> <br> </body> </html> --------------------------------- JavaScriptの内容はどうでも良いのですが， 上の例だと， 「これがテキストの場合」 のとき， フルスクリーン表示 となっている部分がありますね。 これが表示されているテキストで， この フルスクリーン表示 となっている部分を ↓ <img border="0" src="○○.jpg" ～～> に変えれば，その ○○.jpg をクリックするとJavaScriptが実行されるようなものになります。 そういうことでしょうか？
補足
ご丁寧にソースを分かりやすくありがとうございます。すみません。私は１７インチのワイド画面なのですが、クリックしてみたところ、ワイドでなく通常の画面１７インチの大きさに開きました。また、「左側のお気に入り」の表示ですとか、上のツールバーも全て消えて欲しいのですが、どういうソースにすればいいのでしょうか。 これはマウスオーバーによって変化する画像で、クリックするとフルスクリーン表示になります。 ↓ http://www.esterio.com/ 最終的にはこれをやりたいのですが、まずは初心者なのでマウスオーバーする画像でなくて構いません。 どこのソースに何を記述すればよいのですか？ もう一度お願い致します。
- thanks39
- ベストアンサー率61% (1189/1944)
クリックした時のリンク先に、画像ファイルのアドレス「"http://～.jpg"」を指定し、 文字の所に、「<IMG src="http://～.jpg">」を持ってきたらどうでしょうか？
補足
参考URLを拝見しました。このようにフルスクリーン表示をしたいのですが、自作の画像（jpg)をクリックしたときにフルスクリーンにしたいのです。参考URLからコピーしてきたのですが、このソースのどこを変えればいいのでしょうか？初心者ですみません。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>フルスクリーンで表示する方法</TITLE> <SCRIPT TYPE="text/javascript"> <!-- function FullScreen(){ window.open("./", "", "fullscreen=yes, scrollbars=yes"); } //--> </SCRIPT> </HEAD> <BODY> <A HREF="JavaScript:onClick=FullScreen();">(フルスクリーン表示)</A> </BODY> </HTML> 応用としてもし出来ればこちらのサイトのようにしたいのです。これはマウスオーバーする画像をクリックによって フルスクリーン表示になります。 これは難しいでしょうか？ ↓ http://www.esterio.com/
お礼
この方法は本当に分かりやすいです。ご丁寧に教えて下さいまして本当にありがとうございました。 本にも書いてなく、ウェブのお仕事をしている何人もの人に聞いても、みんな「分からないよ」と言われ、困っていました。もう諦めていました。thanks39さんに感謝します。感激です。すごいですね！本当にありがとうございました。また、この続きで分からないことが出てきた時にはまた教えて下さい。