- 締切済み
画像上のクリックした場所が分かるようにマーク表示
画像上をクリックした際、どこをクリックしたか分かるようにマークのようなものを画像の上に表示させたいと考えています。 マークはあくまで表示のみで、元の画像は加工しないようにしたいと考えています。 言語はＨＴＭＬとＪａｖａＳｃｒｉｐｔでお願いします。 お分かりの方、どうぞよろしくお願いします。
- kupipooh8
- お礼率66% (6/9)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
HTML5 のCANVAS要素への描画で作って見た。 canvas内をクリックすると、1,2,3,...と番号ラベルのついた丸を そこに描画していく。番号を指定してそこまで画面を戻せるようにした。 ※Ver8以下のIEでは使えません! javascriptのソースは、 https://gist.github.com/748157 です。 HTMLマークアップ例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Marker Canvas</title> <script type="text/javascript" src="MarkerCanvas.js"></script> </head> <body> <h1>Marker Canvas</h1> <canvas id="MarkerCanvas" style="border:1px solid gray;"></canvas> <form> <button type="button" onclick="markerdel(this.form.elements['markerindex'].value)">削除</button> マーカー番号：<input name="markerindex" value="" size="5"></input> </form> <script type="text/javascript"> var myMarkerCanvas = new MarkerCanvas( {doc:document, id:"MarkerCanvas", width:640, height:480, imagesrc:"/image/yahagi.png" } ); function markerdel(index){ myMarkerCanvas.markerdel(index); } </script> </body> </html>
- my--
- ベストアンサー率89% (91/102)
お願いされましたが、ちょっと漠然とした感じが。。。 <style type="text/css"> .hoge { position: absolute; width: 20px; height: 20px; background-image: url(background.gif); } </style> <script type="text/javascript"> document.onclick = eventHandler; var divs = []; var count = 0; function eventHandler(e) { e = e || window.event; var target = e.target || e.srcElement; if (target.tagName !== 'IMG') return; var doc = document; var pageOffset = typeof window.pageXOffset === 'number'; var root = /BackCompat/i.test(doc.compatMode) ? doc.body : doc.documentElement; var scrollLeft = pageOffset ? window.pageXOffset : root.scrollLeft; var scrollTop = pageOffset ? window.pageYOffset : root.scrollTop; var div; if (divs.length === count) { div = doc.createElement('div'); div.className = 'hoge'; divs.push(div); count++; } else { div = divs[count++]; } doc.body.appendChild(div); div.style.left = e.clientX + scrollLeft - 10 + 'px'; // width: 20px; div.style.top = e.clientY + scrollTop - 10 + 'px'; // height: 20px; } function remover() { var elem, i = 0;; while (elem = divs[i++]) { var parent = elem.parentNode; if (parent) parent.removeChild(elem); } count = 0; } </script> <div> <img src="img.jpg" alt=""> <button type="button" onclick="remover();">クリア</button> </div> とりあえず試してみて下さい。
関連するQ&A
- クリックで画像表示、さらに画像の一部をクリックで閉じる
今、Javascriptを使用したページを立ち上げようと しており、以下のようなことをしたいと思っています。 (1) あるテキスト（または画像）をクリック (2) 説明用の画像が表示 (3) (2)で出た画像内の×マークをクリックすると、 その画像が消える。 イメージとしては、GOOGLEローカルのように、 マーカーをクリックすると、 説明文（画像）が出てきて、 ×を押すと閉じるといった内容です。 Javascriptのonclickとかをうまく使えば…と思うのですが、 ホントに初心者なので、分からないことだらけです。 すいませんが、教えていただけないでしょうか。
- 締切済み
- JavaScript
- HTMLで画像を表示させようと思ったのですが表示さ
HTMLで画像を表示させようと思ったのですが表示されません､なんか画像の形の枠？は出ていて上に紙が破れたマークがあります。対処法を教えてください
- ベストアンサー
- その他（インターネット・Webサービス）
- 画像表示のタグについて
いい例が手元に無かったので以下のURLで失礼します。 ttp://www.vector.co.jp/soft/win95/art/se144188.html 最近たまに目にする画像表示の仕方について質問させてください。 上のページに行って頂けるとわかると思うのですが "スクリーンショット（画像クリックで拡大）"という所のサムネイル画像をクリックすると 画面が薄暗くなり同一ページ上にサムネイルが大きくなった画像が表示されます。 最初はflashか何かかな、と思ったのですが右クリック等をしてみる限りそうでもなさそうですし ソースを拝見させて頂いたのですがいまいちわかりません。 これはHTMLでできる技なのでしょうか？ それともjavascriptでしょうか？ どなたかご存知の方、教えていただけると助かります。 宜しくお願い致しますm(__)m
- ベストアンサー
- HTML
- クリックするとウインドウ表示
webサイト製作初心者です。 いろんなところを見ながらHTML・CSSで作成していっています。 今回新しいページを作成するに当たり、 メニューの各ボタンをクリックすると真ん中にウインドウを表示したいと思いました。 どう説明していいのかわからなかったので、画像を添付しました。 画像は上のメニューの「CAST」をクリックした図です。 初期画面・「TOP」を押した際はウインドウは非表示の状態にしたいです。 説明不足で申し訳ありませんが、教えていただけるとうれしいです。 HTML・CSSで作れる方法だとうれしいです。
- ベストアンサー
- CSS
- WORDの画像クリック時、■マークで囲まれるのは何故？
WORD2000を使用しています。 画像を貼り付けた際に、その画像をクリックすると、 ４隅が「□（中が白い四角マーク）」で囲まれる画像と ４隅が「■（黒い四角）」で囲まれまる画像があります。 「□」の時には右クリックで「図の書式設定」から「レイアウト」→「前面」を選択する事で 画像を好きな位置に微調整で動かす事ができますが、 「■」の時には右クリックの選択肢に「図の書式設定」が出てきません。 また、知り合いにWORD文章を送ったところ（WORD2000使用）、 「■」で囲まれる画像が表示されず、印刷もされなかったとの事です。 （他の知り合いには正常に閲覧できる人もいます） WORDで画像を扱う際に「□」で囲まれる画像と「■」で囲まれる画像は何が違うのでしょうか？ また、「■」で囲まれる画像を「□」で囲まれる画像に変更したり、 常に「□」で囲まれる画像として貼り付け・表示するような事はできないでしょうか。 書類に印鑑ソフトの画像を貼り付けて回す為、非常に困っています。 よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
- 一部画像が表示されません
こんばんわ。 良い壁紙を見つけたので、縮小表示されているものをクリックしました。すると、元の大きさになって、そこから右クリックして壁紙に設定できるとは思うのですが、クリックすると、縮小された時には表示できていたものの、元の大きさになると画像が「×」マークで表示されませんでした。 原因がわからないのでどなたか教えて下さい。 回答お待ちしております。
- 締切済み
- その他（インターネット・Webサービス）
- Sleipnir mixiで画像がクリックして表示できない
Sleipnir（2.8.4）でmixiの画像をクリックして拡大できなくなってしまいました。 IE8なら大丈夫でした。 日記の画像をクリックして画像だけを表示させようとしても開きません。 右クリック→リンクを新しいタブで開くをしても 真っ白なページが開き、アドレスには「javascript:void(0)」となっています。 前はこんなことなかったです。 私だけでしょうか？どうしちゃったんでしょう？
- ベストアンサー
- ブラウザ
- 画像をクリックすると、詳細の画像が表示される。
最近よくこの画面を見るのですが、ページにう小さい画像がたくさん表示されていて、一つの画像をクリックすると、画像がスーっと大きく表示され、後ろの画面が自動的に暗くなります。 http://kumikofuse.ciao.jp/w_works.html これは何のソフトを使用しているのでしょうか？ あるいは、ソフトでなく、JavaScriptなのでしょうか？その場合どのようにして制作しているのかどなたかわかりますでしょうか？ たとえば、Dreamweaverの機能なのでしょうか？ 私が持っているのは「８」なのですが、単に別ウィンドウで画像が表示されるだけです。「CS３」にすればできる機能なのでしょうか？ どなたかよろしくお願いします。
- ベストアンサー
- JavaScript
- 画像が表示されません
趣味でＨＴＭＬ作りをしています。 <img src>タグで、画像が表示されないことがあります。 ファイルのパス、ファイル名、拡張子が正しいことを確認しました。 開かれない画像は、小さな□に×印で表示されます。 このマークを右クリック、プロパティをしてみたら 種類や、サイズ、更新日などが「使用不可」となっていました。 これを治す（？）にはどうしたらいいでしょうか
- 締切済み
- その他（インターネット・Webサービス）
- 画像をクリックして別の画像を表示させたい
現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 （下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。） ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で５枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか？ 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。
- ベストアンサー
- JavaScript
