【JS】画面サイズによって変化するareaタグのcoordsの初期値を保持したいです。

Question

初投稿です。

画面のサイズに合わせて、area id="map_area"のcoordsの値を適切な値に調整する、
というスクリプトを書いています。
実際の値の調整は、外部スクリプトのrwd_map()という関数で実行しています。

<script type="text/javascript">
	$(window).on('load',function(){
		map = document.getElementById('map_area'); //areaのid名
		img_map = document.getElementById('map'); //mapを利用する画像のid名
		rwd_map(map,img_map);//rwd_map.jsを呼び出し
	});
	$(window).on('scroll resize',function(){
		rwd_map(map,img_map);//rwd_map.jsを呼び出し
	});
</script>

<img src="img/test_01.jpg" id="map" usemap="#map"/>
<map name="map"><area id="map_area" onmouseover="changeMapImage('img/test_01_hover.jpg')" onmouseout="changeMapImage('img/test_01.jpg')" shape="rect" href="http://" coords="349,537,980,627"></map>

画面サイズを変更したり、スクロールしたり、ページを読み込んだ時に
area id="map_area"のcoordsの値を動的に変更する、という処理は出来ました。

ただ、初期値のcoordsの値を保持していないと、scrollやresizeが起こるたびに
どんどん値がズレていってしまうため、ページの読み込みが完了した際に
HTML側で設定したmap_areaの値をグローバル変数mapに格納し、初回の関数呼び出しを行い、
scroll時やresize時でもグローバル変数を使って関数を呼び出す、という記述で、
初期値のcoordsの値を保持しようとしてみました。

しかし、scrollやresizeが発生すると、グローバル変数であるmapの値も
動的に変化していってしまい、うまくいきません。

なんとか初期値のcoordsの値を保持する方法はないでしょうか。

よろしくお願いいたします。

Answer 1

map_areaの値をグローバル変数mapに格納し

というのは map = document.getElementById('map_area') でしょうか？

これだと HTML の要素のオブジェクトの参照を保持しているだけで coords の値 "349,537,980,627" は保持されていません

window.initial_coords = document.getElementById('map_area').coords

のように値を保持すれば良いと思います

値が固定なら 直接 JavaScript のコードで初期値をリテラルで入れてもいいと思います

window.initial_coords = "349,537,980,627"

Comments

[katsuo_isono]

ありがとうございます、windowオブジェクトとすることで無事に動作致しました。
「HTML の要素のオブジェクトの参照を保持しているだけ」というのも知らない知識でしたので、参考になります。
ありがとうございました。

Answer 2

「coordsの値を適切な値に調整する」部分のコードがないので詳細は分かりませんが、

map = document.getElementById('map_area');
mapOrig = $(map).clone()

とかではダメなんでしょうか？

Comments

[Lhankor_Mhy]

訂正をしました。

[katsuo_isono]

そちらの方法だとmapが画面サイズ変動時に変化してしまうため、map0rigの値もcloneの際に変化してしまいました。
ご回答頂いたのに申し訳ありません。