こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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つを使っています。

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

投稿日時 - 2009-11-11 12:25:16

QNo.5439086

すぐに回答ほしいです

質問者が選んだベストアンサー

サンプルをきちんと書きます。(完全じゃないですが)
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>

投稿日時 - 2009-11-11 18:22:51

補足

追記質問があります。
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:40

お礼

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

投稿日時 - 2009-11-11 18:43:13

ANo.4

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

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

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

投稿日時 - 2009-11-11 20:56:52

お礼

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

投稿日時 - 2009-11-11 21:17:55

ANo.3

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

投稿日時 - 2009-11-11 15:37:47

お礼

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

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

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

投稿日時 - 2009-11-11 18:05:26

ANo.2

確認
<<2)クリックされてaのhrefに記載されていたURL(test2.html)に飛ぶ時に1)で取得したIDを一緒に飛ばす。>>
飛ばすのが困難だと思います。
test1.htmlとtest2.htmlは遷移するのですよね。
対処
A.cookieを使う
B.urlの後ろに#xxxとか?XXXを擬似的に
 付けて、location.hrefで拾う。
C.PHP等サーバサイドのプログラムで受け渡す。

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

投稿日時 - 2009-11-11 13:06:11

お礼

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

投稿日時 - 2009-11-11 13:26:30

ANo.1

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

投稿日時 - 2009-11-11 12:49:45

お礼

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

しかし、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:25