javascript内でのhtmlのID取得
実現したいこと:
クリックされたa(アンカー)のIDによって、次に表示されるHTML内でのデフォルト処理を変えたい。
test1.html : AとBいう文字にtest2.htmlへのリンクが記載されている。
<a href="http://test2.html" id="test_1" title="A">A</a>
<a href="http://test2.html" id="test_2" title="B">B</a>
test2.html : 地図C、文字A、文字Bが記載されている
(文字Aにマウスを持ってくるとマウスオーバーによって、地図C上のDという位置の画像が光るようになっている。逆もしかり、地図C上のDという位置にマウスをもってくると文字Aが光る)
(文字Bにマウスを持ってくるとマウスオーバーによって、地図C上のEという位置の画像が光るようになっている。逆もしかり、地図C上のEという位置にマウスをもってくると文字Bが光る)
test2.html--------
<!-- 地図-->
<div id="mapimg">
<IMG id="myIMG1" src="../img/map/1f/map.jpg" width="433" height="469" border="0" usemap="#chizu"></div>
<a href="http://○○○.html" id="test_1" onMouseover=" ChengeColorOn('test_1'); image1.start(1);" onMouseout=" ChengeColorOff('test_1'); image1.stop(0);" title="A">A</a>
<a href="http://○○○.html" id="test_2" onMouseover=" ChengeColorOn('test_2'); image1.start(1);" onMouseout=" ChengeColorOff('test_2'); image1.stop(0);" title="B">B</a>
<map name="chizu">
<AREA shape="rect" coords="137,105,148,116" href="http://○○○.html" title="TEST1" onMouseover=" ChengeColorOn('test_1'); image1.start(1);" onMouseout=" ChengeColorOff('test_1'); image1.stop(0);" >
<AREA shape="rect" coords="137,105,148,116" href="http://○○○.html" title="TEST1" onMouseover=" ChengeColorOn('test_2'); image2.start(1);" onMouseout=" ChengeColorOff('test_2'); image2.stop(0);" ></map>
javascript--------
var ToggleImage = function(d,w){
var c=0,t,o,m=0,g=[];while(o=arguments[2+m])(g[m++]=new Image).src=o;
this.start = function(n){h(n)||(c=n),this.stop(c),t=setInterval((function(_){return function(){_.next()}})(this),w)};
this.next = function(n){c=h(n)?c+1:n,document.getElementById(d).setAttribute('src',g[c*=c<m].src)};
this.stop = function (n){h(n)||this.next(n);t&&clearInterval(t),t=0};
function h(n){return'undefined'===typeof n}
};
var image1 = new ToggleImage( 'myIMG1', 300, '../img/map/1f/map.jpg', '../img/map/1f/7.jpg', '../img/map/1f/map.jpg' );
var image2 = new ToggleImage( 'myIMG1', 300, '../img/map/1f/map.jpg', '../img/map/1f/36.jpg', '../img/map/1f/map.jpg' );
//地図から文字への反転 IDを取得し、文字色と背景を変更する
function ChengeColorOn(ID){
document.getElementById(ID).style.color = "#ffffff";
document.getElementById(ID).style.backgroundColor = "#09F";}
自分なりに考えた流れ:
test1.html
1)A文字又はB文字(a(アンカー))がクリックされた時、javascript内でクリックされたa(アンカー)のIDを取得。
2)クリックされてaのhrefに記載されていたURL(test2.html)に飛ぶ時に1)で取得したIDを一緒に飛ばす。
test2.html
3)javascriptで2)で飛ばしたIDを取得。
4)元々はページ内でマウスオーバーによって変わる処理をIDによってonload(Aという文字をクリックしてtest2.htmlページを開いたときにデフォルトで地図C上のDが光るように)処理する。
ちなみにtest1.htmlには上記に記載したスクリプト以外に
prototype.js effects.js の2つを使っています。
以上を実現したいのですが私では力不足です。
助けてください。ご授言をよろしくお願いいたします。
お礼
ありがとうございます こういうことです^^ 引数にthisが使えるんですね javascript始めたばかりなので勉強になります さっそく使ってみます