- ベストアンサー
HP 「シフトキー＋クリック」で別の動作がしたい
ホームページ作成で小さな画像を配置し、この画像をクリックすれば元の大きい静止画を表示し、シフトキーを押しながらクリックしたら動画を表示させたいのですがこんなことはできるでしょうか。 現在は下記の通り静止画のみ表示しています。 <a href="静止画.html"><img src=静止画.jpg width="60" height="45"> ご教授方よろしくお願い致します。
- nzmsys
- お礼率85% (49/57)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
以下のような感じのスクリプトで、<form>～</form>内にイメージボタンとして書いてやれば、実現できそうです。 ・クリック時にシフトキー押下を 'yes' または 'no' で表示するスクリプト <input type="button" value="Test" onclick="event.shiftKey ? alert('yes'): alert('no')"> →それぞれのalert() 関数の代わりに、<head>内に書いた画像表示/動画再生をするスクリプトを呼び出すように変更。 ---- しかし、そのようなことはやらない方が良いと思います。 マウスでWebブラウジングしていて、わざわざもう片方の手をキーボードに伸ばさなければならない、 あるいはそもそもShiftキーが無い環境(タブレット・スマホ等)などを考えると、非常にユーザビリティを落とす操作方法であるように思うからです。 労が多い割に、見落とされやすくなるなど、メリットはあまり無いでしょう。 単純に2つボタンを用意する方が、よほどわかりやすく、簡単に操作してもらえます。
関連するQ&A
- 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
- 埋め込み動画の最初の画像を別のものにするには？
youtube等の動画を埋め込み、さらにデフォルトのサムネイル表示（youtube等で再生前に表示される画像）を別の静止画に指定したいのです。さらにその静止画をクリックすれば動画再生されるように。 下記のソースで埋め込みはできるのですが、別の静止画を置き換えるような方法がわかりません。 よろしくお願いします。 ＜iframe src="//www.youtube.com/embed/xxxxxxxxxxxx" width="500" height="300" frameborder="0" allowfullscreen＞＜/iframe＞
- 締切済み
- その他（インターネット・Webサービス）
- javaでサムネイルをクリックして別窓で表示したいのですが…
はじめまして！たつやです。 現在ＯＳはＸＰでビルダー９を利用して画像アルバムのホームページを作成してますが、サムネイルと元画像はhtmlファイルとして用意し、それぞれのサムネイルをクリックするとタイトルバーなどが無い別画面で表示したいと考えております。別画面はクリックした画像の数だけ開くようにしたいとも考えています。 ヘッド部には <script Language="JavaScript"><!-- function nwin1(){ sub=window.open("jpeg/001.html","subwin1","width=480,height=360,scrollbars=no,location=no,menubar=no,left=10,top=30");} function nwin2(){ sub=window.open("jpeg/002.html","subwin2","width=480,height=360,scrollbars=no,location=no,menubar=no,left=10,top=30");} } // --></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作成初心者です。 下記のタグ（サムネイル画像をクリックすると、別窓で拡大表示）なんですが、別窓を開いた際に <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>
- ベストアンサー
- Mac
- 画像が表示できない
ホームページに画像を張りたいのですが、画像が表示できません。<img src="***.jpg" width="100" height="100" alt="***">としたのですが、どこがおかしいのでしょうか。
- ベストアンサー
- その他([技術者向] コンピューター)
- 別フレームにＪＰＧ画像をｈｔｍｌページ無しでセンターに表示する方法
宜しく御願いします。 ページをフレームで縦切り２分割にして、左フレームの画像をクリックすると 右フレームに、画像が大きく表示されるホームページを作っていますが、 右フレームに表示される画像が左上寄りになります。 右フレームに表示される画像を、ｈｔｍｌページを用いて表示すれば センターに出来ることは判っているのですが、ＪＰＧ画像のみの表示で センターにする方法はあるのでしょうか。 左フレームのソースは以下のような物です。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <TABLE width="204"> <TR> <TD nowrap><A href="a.jpg" target="sub"><IMG src="as.jpg" height="100" width="75"></A></TD> <TD nowrap></TD></TR> <TR> <TD nowrap></TD> <TD nowrap><A href="s.jpg" target="sub"><IMG src="ss.jpg" height="75" width="100"></A></TD></TR> <TR> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 以下省略 ご存じの方、宜しく御願い致します。
- ベストアンサー
- HTML
- JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </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
- iPadやiPhoneでFlashが表示されないので代わりの静止画
iPadやiPhoneでFlashが表示されないので代わりの静止画 iPadやiPhoneはフラッシュに対応していませんね？ ホームページを作成する際に、flashを使いたいのですが、 iPadやiPhoneがアクセスした際に、何か別の静止画が表示できるようには出来ないでしょうか？ 今まで、 <noscript><IMG src="img/test.jpg" width="900" height="350" border="0" alt="テスト" /></noscript> という文言を入れて、javaOFFの人には静止画を表示させていましたが、 同じような方法や、別の方法でも何か画像が表示されるような方法は無いでしょうか？ アドバイス下さい。
- 締切済み
- Flash
- アメブロで画像が拡大表示できません。
アメブロで記事を作成して画像を載せましたが、画像をクリックしても拡大表示できません。 人のブログの写真はクリックすると拡大できます。 HTML表示では <a href="http://***.jpg"><img border="0" alt="*" src="http://***.jpg" width="*" height="*" /></a> となっています。 よろしくお願いします。
- 締切済み
- ブログ
- HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。
DreamWeaver8を使いHPをさわってるんですが、IE6で見ると、TOPページの画像と画像の間に空白ができて見えます。DreamWeaver上でもFirefoxでも問題なく表示されるんですが、原因がわかりません。 （当方初心者で、このHPももともと業者さんが作ったものを、途中から簡単な更新等のみを知人からお願いされてしておりますので、CSSやらタグやら勉強中で、まだまだよく解ってないような感じです。そんな人間がHPを触るな！という意見がごもっともだとは思いますが、知人も周りに頼めるような人間もなく私にお願いしてきておりますので、なんとか綺麗に見えるようにしたいのです。） これだけの説明では解りにくいと思いますので、以下におかしいと思われる個所を載せます。 <div class="top-h-left"></div> <div class="top-h-right"> <div class="t-sub-navi"> <ul> <li class="h-home"><a href="../index.html"><img src="../img/top_h_home.jpg" alt="HOME" width="53" height="20" class="imgover" /></a></li> <li class="h-inquiry"><a href="../info/inquiry.html"><img src="../img/top_h_inquiry.jpg" alt="お問い合わせ" width="81" height="20" class="imgover" /></a></li> <li><a href="../info/sitemap.html"><img src="../img/top_h_sitemap.jpg" alt="サイトマップ" width="82" height="20" class="imgover" /></a></li></ul><br clear="all" class="partition" /></div><img src="../img/top_img1.jpg" alt="○○○」" width="410" height="160" /></div> <span class="top-h-left"><a href="http://www./○○○"><img src="../img/logo_top.jpg" alt="○○○" width="340" height="180" /></a></span><br clear="all" class="partition" /> <img src="../img/top_img2.jpg" alt="" width="340" height="209" /><img src="../img/top_img3.jpg" alt="" width="410" height="209" /><br /> <div class="top-global-navi"> この画像のimg1とimg3の間に空白が現れてしまいます。 （○の部分はHPのアドレスや店名等が表示されていましたので、略させて頂きました）
- ベストアンサー
- ホームページ作成ソフト
お礼
早速のご回答ありがとうございました。 ご提案の通り「単純に2つボタンを用意する」方法を選択したいと思います。 お忙しいところ適切なるご回答を頂きましてありがとうございました。 これに懲りず今後ともご指導の程よろしくお願い致します。