javascript内でのhtmlのID取得

解決済

質問者：masa_tokai
質問日時：2009/11/11 12:25
回答数：5件

実現したいこと：
クリックされた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
１）A文字又はB文字(a（アンカー）)がクリックされた時、javascript内でクリックされたa（アンカー）のIDを取得。
２）クリックされてaのhrefに記載されていたURL（test2.html）に飛ぶ時に１）で取得したIDを一緒に飛ばす。

test2.html
３）javascriptで２）で飛ばしたIDを取得。
４）元々はページ内でマウスオーバーによって変わる処理をIDによってonload（Aという文字をクリックしてtest2.htmlページを開いたときにデフォルトで地図C上のDが光るように）処理する。

ちなみにtest1.htmlには上記に記載したスクリプト以外に
prototype.js　effects.js　の２つを使っています。

以上を実現したいのですが私では力不足です。
助けてください。ご授言をよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： yyr446
回答日時：2009/11/11 18:22

サンプルをきちんと書きます。

(完全じゃないですが)
test1.html
<html>
<body>
<a href="http://test2.html?test_1" title="A">A</a>
<a href="http://test2.html?test_2" title="B">B</a>
</body>
</html>
test2.html
<html>
<head>
<script>
window.onload = function(){
var url_str = window.location.href;
// 下は"?"の文字でurl_strを分割してます。
var parm=url_str.split("?");
if (parm.length>0){
alert(parm[1]);
}
}
</script>
</head>
<body>
</body>
</html>

この回答への補足

追記質問があります。
test2.htmlの方で
window.onload = function(){
var url_str = window.location.href;
// 下は"?"の文字でurl_strを分割してます。
var parm=url_str.split("?");
if (parm.length>0){//alert(parm[1]);
}if(parm[1] == "test_1"){
//地図上のDと文字Aが光る処理
ChengeColorOn('7'); image1.start(1);

皆さんのおかげで、上記のソースで光ることはできました。
もう少しで完成です。
今度はtest2.html内で5秒間だけ、もしくはマウスが何かに触れるまで、光り続ける。
つまり、一定時間、又はマウスが動くまで指定の関数を呼び出したいのです。
そういうのは可能でしょうか？

}
}

補足日時：2009/11/11 18:55

通報する

- 0
- 件

通報する

この回答へのお礼

ソースまで付けていただいて感謝いたします。
検証してみたところ完璧にできました。
ありがとうございます。

通報する

お礼日時：2009/11/11 18:43

No.5

回答者： yyr446
回答日時：2009/11/11 20:56

いったんこの質問をクローズして,

整理した上で、イメージ画像を載せたりして
　別件にて、質問した方が回答がつきやすいかと...

いまいちイメージがつかめません。

- 0
- 件

通報する

この回答へのお礼

分かりました。
ありがとうございます。

通報する

お礼日時：2009/11/11 21:17

No.3

回答者： yyr446
回答日時：2009/11/11 15:37

<a href="

http://test2.html?test_1" title="A">A</a>
で呼ばれたtest2.htmlでは
window.onload = function(){
parm = window.location.href.split("?");
alert(test[1]);
}
これで?以降がアラートされます。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
試したのですが、できませんでした。
>parm = window.location.href.split("?");
？の中には何か記述はいるのでしょうか？

クリックしたら、エラーがでてtests2.htmlにも飛びません。

何が原因なのでしょうか？

通報する

お礼日時：2009/11/11 18:05

No.2

回答者： yyr446
回答日時：2009/11/11 13:06

確認

＜＜２）クリックされてaのhrefに記載されていたURL（test2.html）に飛ぶ時に１）で取得したIDを一緒に飛ばす。＞＞
飛ばすのが困難だと思います。
test1.htmlとtest2.htmlは遷移するのですよね。
対処
Ａ.cookieを使う
Ｂ.urlの後ろに＃ｘｘｘとか？ＸＸＸを擬似的に
　付けて、location.hrefで拾う。
Ｃ.PHP等サーバサイドのプログラムで受け渡す。

test1.htmlとtest2.htmlを統合するなり、フレームを使うなり
すれば、他にも方法がある。

- 0
- 件

通報する

この回答へのお礼

早々のご回答感謝いたします。
対処法を3つも書いていただいてありがとうございます。
参考にさせていただきます。

通報する

お礼日時：2009/11/11 13:26

No.1

回答者： steel_gray
回答日時：2009/11/11 12:49

test1.htmlのアンカーにクエリとして情報を書いておけばjavascriptとか使わなくても情報は渡せます。

<a href="http://test2.html?test_1" title="A">A</a>
<a href="http://test2.html?test_2" title="B">B</a>

test2.htmlではdocument.locationでURL中の?以降を取得する事ができます。
http://www.tohoho-web.com/js/location.htm#location

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
こういうやり方もあるのですね。
勉強になります。

しかし、test2.htmlのjavascript内で
$(document).ready(function(){ test = window.location; alert(test); });
又は、
window.onload = function(){test = window.location; alert(test); }
としてみましたが、どちらもアラートが表示されません。
受け取れているのかどうか確認がしたのですが・・・。

prototype.js　effects.jsが関係しているのでしょうか？

通報する

お礼日時：2009/11/11 13:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！