- 締切済み
クリックで画像表示、さらに画像の一部をクリックで閉じる
今、Javascriptを使用したページを立ち上げようと しており、以下のようなことをしたいと思っています。 (1) あるテキスト（または画像）をクリック (2) 説明用の画像が表示 (3) (2)で出た画像内の×マークをクリックすると、 その画像が消える。 イメージとしては、GOOGLEローカルのように、 マーカーをクリックすると、 説明文（画像）が出てきて、 ×を押すと閉じるといった内容です。 Javascriptのonclickとかをうまく使えば…と思うのですが、 ホントに初心者なので、分からないことだらけです。 すいませんが、教えていただけないでしょうか。
- beshing
- お礼率14% (4/27)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- abacabu
- ベストアンサー率37% (250/663)
私はNO,1さんとは違い単なるサブウィンドウだと思ったので 書き方を書いておきます <html> <head> <title></title>の下に記述 <script language="JavaScript"> <!-- function OpenWin(){ win=window.open("サブウィンドウに表示するURL" ,"new","width=480,height=350"); win.moveTo("left～値,top～値"); <!-- 例: win.moveTo("100,100"); --> } //--> </script> <!--複数設置の場合は function OpenWin1(){ win1=window.open("サブ画URL","new1","width=480,height=350"); win.moveTo("left～値,top～値"); } と記述する。--> <body> <a href="javascript:OpenWin()">画面表示される文字</a> <!--もしくは--> <form> <imput type="button" value="画面表示される文字" onClick="OpenWin()"> </form> <!--こちらも同様に--> <a href="javascript:OpenWin1()">画面表示される文字</a> <!--もしくは--> <form> <imput type="button" value="画面表示される文字" onClick="OpenWin1()"> </form> </body> </html> こんな感じで参考になりましたでしょうか？？
- yambejp
- ベストアンサー率51% (3827/7415)
「クリッカブルマップ」とgoogleで調べてみて下さい
関連するQ&A
- クリックによる画像の入れ替え処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)Aがクリックされたら、AをA2に置き換える (2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。 クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でできるような気がするが、サンプルとなるものがなく、書き方がわからない。 （調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした） 上記について、ご回答よろしくお願いします。
- 締切済み
- JavaScript
- 画像クリックにて自分自身を別画像に入れ替えるには？
ホームページを作成中なのですが、メニュー欄をそれぞれ画像にて表示し、画像クリックにて対象ページに飛ぶようにしております。 このたび、選択されたメニューを識別できるように、クリックされた画像を別画像に入れ替えて表示させようとしています。 onMouseOverやonMouseOut時に一時的に画像を入れ替えるロールオーバーのサンプルはよく見かけますが、できればロールオーバー的なものではなく、onClick時に自分自身の画像を入れ替えし、別の画像がクリックされるまで、ずっと入れ替えた画像を表示しておきたいのです。 JavaScript、CSSなど方法は問いません。 なお、テキストエディタにて作成しています。 どなたかよきアドバイスをお願いいたします。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 画像がクリックされたら画像が切り替わる方法を同一ページ内に複数 設置
JavaScriptを使用して、画像がクリックされたら画像が切り替わる方法を同一ページ内に複数 設置したいため、以下のページを参考にしました。 http://www.sumnet.ne.jp/domp/jsbs/kaisetsu/image3.htm http://javascript.eweb-design.com/0801_cci.html (Sample1) １つだけなら設置できるのですが、複数行おうとすると、１つだけしか起動しなかったり、クリックした画像以外の画像が切り替わるなどしてしまいます。(nameは各々変えています) これを解決するには何をすればよろしいのでしょうか？？ 初心者のため上手に伝えれず申し訳ございません。これが解決できず困っております。ご指導のほど、お願いいたします。
- ベストアンサー
- JavaScript
- 画像上のクリックした場所が分かるようにマーク表示
画像上をクリックした際、どこをクリックしたか分かるようにマークのようなものを画像の上に表示させたいと考えています。 マークはあくまで表示のみで、元の画像は加工しないようにしたいと考えています。 言語はＨＴＭＬとＪａｖａＳｃｒｉｐｔでお願いします。 お分かりの方、どうぞよろしくお願いします。
- 締切済み
- JavaScript
- クリックでメニューを表示
初心者で申し訳ないのですがお答えいただけたらと思います。 親メニューに当たる画像orテキストをクリックして 指定箇所に子メニューを表示させ、 その子メニューをクリックしてリンクさせたいと思っているのですが JavaScriptでできるのかどうか、 もしできるのであればどう組めばいいのか よろしくお願いします。 形的には、 http://www.ozaki-gasrange.co.jp/cso_q1-3.html ↑ページのような感じで、 マウスを置いた時ではなく、クリックして 下にメニューを表示させて さらにそのメニューをクリックして右枠にページを 表示させたいと思います。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 画像で作成したボタンの処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cを一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)画像Aがクリックされたら、画像Aを画像A2に置き換える (2)画像A2が表示されている状態で、画像Bをクリックすると、画像A2は画像Aとなり、画像Bは画像B2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみ画像A2となり、カーソルが離れると画像Aに戻ってしまうが、クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でif文でできるような気がするが、サンプルとなるものがなく、書き方がわからない…。 上記について、ご回答よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 画像集、小画像をクリックすると大画像を中央表示するには？
画像集を作ってるのですが、 テーブルの中に小さな画像の一覧があり、 クリックするとその大きな画像が表示され、 なおかつページの真ん中に表示されるものを作成中です。 自分が思うに、width=100% height=100% のテーブルの中に画像リストのテーブルを入れ テーブル名を table とするなら、 そこにある小さな画像を onclick すると document.table.location.href = picture; または document.table.src = picture; のようなイメージでテーブルと大画像を置き換えれば できると思うのですが、うまくいきません。 なにかアドバイスありますでしょうか？ もちろん 写真ごとにセンター寄せの web page を作り 普通にリンクという方法もありますが、写真が増えると あまり効率が良いとは言えず。。。
- ベストアンサー
- JavaScript
- クリックしたらJavaScriptで数カ所に一度に画像を表示させたい
以下のようなことがJavaScriptでできるでしょうか？ できる場合、関数等のヒントをいただけないでしょうか。 webページにおいて、 「画像を表示」というリンク、あるいは同様のボタンをクリックすると、 同ページ内の複数の場所（特定）に、それぞれ指定した画像を一度に表示させる。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptでクリックしたリンクテキストを取得するには？
javascriptを用いてクリックしたリンクのテキストを取得するにはどうすればいいでしょうか？ ページ読み込み時(onload)にリンクにonClickイベントをつけてクリックしたときにurlなどを取得することはできるのですが、リンクテキストをどうしても取得できません。 ページ内のそれぞれのリンクタグにそれぞれ異なるid要素をつけられればよさそうなのですが。。。 ページ内のリンクタグにidがついていないことしてください。
- ベストアンサー
- JavaScript
- 画像を貼り出してその後、その画像をクリックすると大きく表示されるように
画像を貼り出してその後、その画像をクリックすると大きく表示されるようにしたいのですが、どうしたら良いかわかりません。 <html> <head> <title>画像を大きくする</title> <script type="text/javascript"> <!-- var imagetachi = 5; //イメージの切り替え function kirikae(num){ document.main.src = "big/photo" + num + ".jpg"; } // --> </script> </head> <body> <center> <script type="text/javascript"> <!-- //サムネールの書き出し for (i=1; i <=imagetachi; i++) { document.write('<img src="small/photo' + i + '.jpg" onclick="kirikae(i)">'); } // --> </script> <hr> <img src="big/photo1.jpg" name="main"> </center> </body> </html> どうやらkirikae(i)をkirikae(' + i +')にすれば良いとまではわかったのですが、なぜ(' + i +')にしないといけないのかがわかりません。 (' + i +')にすると関数の処理が document.main.src = "big/photo" + + i + + ".jpg";になってしまいませんか？？ 初心者なので+ i +の意味がよくわかりません。 よろしくお願い致します。
- 締切済み
- JavaScript
