A 回答 (4件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
n=y*8+y
キック? 私のほうが勉強不足なようで、意味がわかりません;_;
イベントトラップみたいな?
document.onmousemove = imagePopup;
か?
あちこちマウスイベントをつけるより
このほうがトレンド?!
No.2
- 回答日時:
解説する気力はありません。
自分で解析してみてね<html>
<body>
<p>
<img src="hoge.jpg" id="imgmenu" width="600" height="400">
</p>
<div id="popup" style="border:1px #f00 solid;display:none;position:absolute;background-color:#fee">
<a href="" id="plink"></a><br><img src="" width="120" height="80" id="pimg">
</div>
<script>
document.onmousemove = imagePopup;
var map=[];
map[7]='右上の文字,./img/xxx7.gif,htp:ww.xx.co.jp';
map[32]='左下の文字,./img/xxx7.gif,htp:ww.xx.co.jp';
function imagePopup(e){
var bx=8,by=5;
var o=e?e.target:event.srcElement; if(o.id!='imgmenu') return;
e=e?e:window.event;
var n=((e.clientY-o.offsetTop)/o.offsetHeight*by|0)*8+((e.clientX-o.offsetLeft)/o.offsetWidth*bx|0);
if(map[n]){
var buf=map[n].split(',');
document.getElementById('plink').href=buf[2];
document.getElementById('plink').innerHTML=buf[0];
document.getElementById('pimg').src =buf[1];
document.getElementById('pimg').alt =buf[1];
document.getElementById('popup').style.left=e.clientX+'px';
document.getElementById('popup').style.top=e.clientY+'px';
document.getElementById('popup').style.display='block';
} else {
document.getElementById('popup').style.display='none';
}
}
</script>
この回答への補足
ご回答ありがとうございます。
map[7]='右上の文字・・ホット・スポットの右上の座標?
でしょうか。
マウスオーバーしたとき、このjavascriptはどこでキックされるのでしょうか。
ありがとうございました。
No.1
- 回答日時:
>画像の矩形のホットスポット
とは、画像全体にonmouseoverしてよいのでしょううか、それとも画像の一部に
ホットスポットをおきたいのでしょうか?
また、popup自体、別のウィンドウをひらいてHTMLを開くのでしょうか、
それともdivなどで表示できればよいのでしょうか?
もっとも単純なのは・・・
<img src="hoge1.jpg" onmouseover="window.open('hoge2.jpg')">
ちなみにpopup自体、もっとも嫌われるweb技術の一つですから、
あまり多用するとアクセス率が急激に落ちる可能性もあります。
この回答への補足
画像の一部に複数のホツトスポツトを設けてあります。
別のウインドウを開くのではなく、ホットスポットにマウスオーバーしたときに画像のみpopupさせたいのですが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript JavaScriptでゲームプログラミングをしています。 次のように画像に動きをつけたいのですが、ど 1 2022/09/29 20:06
- その他(ソフトウェア) IrfanView で画像のスクロール?できますか 1 2022/08/31 13:57
- マウス・キーボード ロジクールのマウスでの不具合について 2 2022/10/26 12:04
- Windows 10 Win10の起動画面でフリーズすることがあります。どのような原因が考えられますか? 3 2023/04/26 20:21
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- ノートパソコン Snipping Toolで切り取った画像への、(きれいな)丸の入れ方を教えて下さい 5 2023/04/02 17:24
- マウス・キーボード PC画面に表示されているHPなどを上下にスライドさせたい 7 2023/03/17 11:05
- C言語・C++・C# 画像の画素値を変えるC言語のプログラムで指定された画像の中に白い三角形を右上に表示させるにはどのよう 3 2022/10/30 01:16
- 物理学 R直列回路の波形をオシロスコープで測定した時、写真の矩形波のような波が観測されるますがなぜこのような 2 2022/09/23 23:31
- 物理学 写真図3の回路の入力電圧CH1と出力電圧CH2の波形をオシロスコープで測定しました。発振器を使って矩 3 2022/09/25 14:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の座標位置取得
-
タイマーをデジタル時計風にす...
-
divの背景画像を、徐々に表示さ...
-
画像をクリックすると別ウイン...
-
画像と文字を同時に切り替えたい
-
htmlの記述で link rel=styles...
-
MAX関数を使ってからLEFT JOIN...
-
div要素を半透明にして且つ外枠...
-
複数の要素へ appendchild でき...
-
以下のタグはクリックすると画...
-
Javascript初心者|jQueryの.va...
-
Javaの正規表現でimgタグのalt...
-
SEO対策としての画像リンクなど...
-
【java】背景画像を一定時間で...
-
【HTML5】【canvas】【js】...
-
画像にマウスを乗せた時のJava ...
-
jQueryで同じクラス名のものを...
-
診断の作り方
-
JavaScript スクロール制御
-
サムネイルをクリックして背景...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
【jQuery】複数の画像の読み込...
-
複数のバナーをリロードする度...
-
jQueryで画像を重ねる
-
一定時間ごとにgif画像の切...
-
画像をクリックすると別ウイン...
-
JavaScriptで画面サイズによっ...
-
HTMLページ内のタグに対しての...
-
HPに複数の画像をクリックで切...
-
【javascript】ロールオーバー...
-
画像の入れ替え
-
javascriptによるランダム画像...
-
画像と文字を同時に切り替えたい
-
JavaScriptで画像置換えてクリ...
-
連続したURLへのwindow.openの...
-
リンク切の場合リンクしない
-
戻り読みの代わりとなる正規表...
-
複数のボールの落下、バウンド...
-
<img>タグの alt= の値をキャプ...
おすすめ情報