- 締切済み
クリックしてハート型画像表示可能ですか
web初心者です。 クリックしてその場にハートオブジェクトpng画像にしたものを表示する事は可能でしょうか。 もし、出来るのであれば、どんな方法がありますか。 回答よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 35fa8e3c
- ベストアンサー率39% (9/23)
<script> function ShowHeart(){ var elm = document.getElementById("img_heart"); elm.style.left = event.x; elm.style.top = event.y; elm.style.display = "block"; } function HideHeart(){ var elm = document.getElementById("img_heart"); elm.style.display = "none"; } </script> <!--<body onmousedown="ShowHeart()">--> <body onmousedown="ShowHeart()" onmouseup="HideHeart()"> <img src="heart.png" style="position:absolute;display:none" id="img_heart"> <!--<button onclick="HideHeart()">私のハートを抹消する</button>--> <xmp> 出したハートは消す必要も出てくると思うので，ボタンでとは限らずHideHeart関数を呼び出してみては． と，ボタンにハート抹消機能を付けてみたけれど，クリックするとハートが出る→ハート抹消ボタンをクリックするとせっかく消えたのにクリックに反応するとまた出るのでマウスアップにハート抹消を付けまつげ
- askaaska
- ベストアンサー率35% (1455/4149)
JavaScriptで次の流れでできます １）onclickイベントハンドラーの中で ２）クリックされた座標を取得 ３）<img>オブジェクトを作成し ４）２）で取得した座標の位置に表示する
お礼
簡潔な回答ありがとうございます。 普段別の仕事をしていて回答に関するお礼が遅れてしまい、すみません。 2)の座標取得方法が解らなく、てこずってます。 もう少し、がんばります。
補足
HTML,CSSはわかりますが、javascriptに関してはサイトからコピーして画像などの差し替えをする素人レベルです。最近jQueryを勉強し始めました。
お礼
お礼が大変遅れてすみません！ 本業の方が忙しく、こちらに不慣れでして。 説明されている意味は理解できますが、ちょっと自分の理解度に難ありで、もう少し勉強します。 ありがとうございます。