innerHTMLに入れたリンクが反応しない

どのジャンルで質問しようか迷ったのですが、ここでお願いします。

次のようにしてマウスオーバーした時にリンクが現れるようにしたのですが、
たしかにyahooのリンクは現れたのですが、クリックしても反応がありません・・・
どうすればリンクを機能させることができるのでしょうか？


<STYLE TYPE="text/css">
<!--
DIV.sample {
　background-color:#FFFFFF;
　position: static;
　display:'block';
}
-->
</STYLE>
<SCRIPT language="JavaScript"><!--
function do_sample(){
　document.getElementById('sample').innerHTML = "<a href=http://www.yahoo.co.jp>yahoo</a>";
}
// --></SCRIPT>

<div id="sample" class="sample" onMouseOver="do_sample()">ココ</div>

No.3 ベストアンサー 回答者： steel_gray 回答日時： 2007/08/05 23:56

要素が入れ子になっている部分でonmouseover,onmouseoutを使うとややこしい（上位でのイベント処理が下位層でのイベントの発生を邪魔する）のでこうしました。

マウスを乗せるまでリンクに見せたくないとかであればCSSで解決してはどうでしょう。

function do_sample(){
var Sample = document.getElementById('sample');
Sample.onmouseover='';
Sample.onmouseout=out_sample;
Sample.innerHTML = 'yahoo';
}
function out_sample(){
var Sample = document.getElementById('sample');
Sample.onmouseover=do_sample;
Sample.onmouseout='';
Sample.innerHTML = 'ここ';
}

<div><a href="http://www.yahoo.co.jp" id="sample" onmouseover="do_sample()">ココ</a></div>

この回答へのお礼

ご返答ありがとうございます。
理想とする結果になり満足しています。ありがとうございました。

お礼日時：2007/08/06 01:20

No.2 回答者： leap_day 回答日時： 2007/08/05 20:37

こんにちは

onMouseoverをずっとやっているような感じ？（理由はよくわからないです）だと思うので別にしてみたらいい
試しにonClick使ってみたのですが文字部分はクリック効きませんでしたので・・

<div id="sample" class="sample">
<a href="" onMouseOver="do_sample()">ココ
</a>
</div>

この回答へのお礼

ご返答ありがとうございます。
なるほど、このやり方でもできました。
そこでleap_dayさんにも#1の再質問を考えていただけないでしょうか？
お願いします。

お礼日時：2007/08/05 22:00

No.1 回答者： steel_gray 回答日時： 2007/08/05 20:33

innerHTMLで内容を書き換ても、onmouseoverが効くので

うまく動作しないのでは。

一度書き換えたらそれっきりなら
function do_sample(){
　document.getElementById('sample').innerHTML = ～;
　document.getElementById('sample').onmouseover='';//追加
}
と、でもしてonmouseoverを無効化してしまってはどうでしょう。

この回答へのお礼

ご返答ありがとうございます。
たしかにリンクが効きました。
そこで追加で申し訳ないのですが、マウスをその場所から外したら
また「ココ」に戻すやり方はどのようになるか分かりますか？
つまり
マウスオーバーしたら→ヤフーリンク（クリックできる）
マウスアウトしたら→ヤフーリンクが消え、ココが現れる
という状態です。
onMouseOutを使うと思うのですが、次のようにやったのですがうまくいきませんでした・・・


<STYLE TYPE="text/css">
<!--
DIV.sample {
　background-color:#FFFFFF;
　position: static;
　display:'block';
}
-->
</STYLE>
<SCRIPT language="JavaScript"><!--
function do_sample(){
　document.getElementById('sample').innerHTML = "<a href=http://www.yahoo.co.jp>yahoo</a>";
　document.getElementById('sample').onmouseover='';//追加
}
function out_sample(){
　document.getElementById('sample').onmouseover='do_sample()';
　document.getElementById('sample').innerHTML='';
}
// --></SCRIPT>

<div id="sample" class="sample" onMouseOver="do_sample()" onMouseOut="out_sample()">ココ</div>

お礼日時：2007/08/05 21:57