オンマウス→説明文の選択支→リンク先とリンクの方法は?

[新着] Webテンプレートを仮オープンしました

0   名前： nash ： 2006/08/09（水） 10:08  ID:QstspRxG
オンマウス→説明文の選択支→リンク先とリンクをしたいと考えています。
コピペでオンマウスのScriptを貼り付けましたが、選択支を説明文にのっけるとことで？？？です。

具体的にどのように書けばいいかご教授いただけますか？

<BODY bgcolor="#000000">
<CENTER>
<DIV style="display:none;position:absolute;);" ID="set">
<TABLE width=460 border="1" BORDERCOLOR="#C0C0C0" bgcolor="#C0C0C0" cellspacing="1" cellpadding="10">
<TR><TD BGCOLOR="#ffffff"><SPAN ID="te"></SPAN></TD></TR>
</TABLE>
</DIV>
<DIV style="width : 192px;height : 16px;top : 14px;left : 8px;
position : absolute;
z-index : -1;
" id="Layer1"><SCRIPT language="JavaScript">
<!--
function up(text){
document.getElementById('te').innerHTML=text;
set.style.posLeft =document.body.scrollLeft+window.event.clientX+10;
set.style.posTop =document.body.scrollTop+window.event.clientY+10;
document.all('set').style.display="block";}
function kes(){document.all('set').style.display="none";}
//-->
</SCRIPT><A href="http://www.muse.dti.ne.jp/~iba-gold/" onmouseover="up('<img src=http://www.muse.dti.ne.jp/~iba-gold/a001.jpg width=90>テスト<p>')" ; onmouseout="kes()">テスト</a>
1   名前： かふぇおれ ： 2006/08/09（水） 10:08  ID:Ji0blfRq
innerHTML で表記される部分に <a href="#">リンク先</a> を追記したいという事でしょうか？

おそらく「"」が記入されるとエラーになるのではないでしょうか。
それを避けるには、「"」を記入しないか（ｗ
onmouseover="up('src1')"　とかにして、
function up(text){
if( 'src1' == text ){ src1="<img src=http://www.muse.dti.ne.jp/~iba-gold/a001.jpg width=90 align='left'><a href='#'> リンク先1</a><br><a href='#'> リンク先2</a>"; }
document.getElementById('te').innerHTML=src1;
set.style.posLeft =document.body.scrollLeft+window.event.clientX+10;
set.style.posTop =document.body.scrollTop+window.event.clientY+10;
document.all('set').style.display="block";
}
function kes(){
document.all('set').style.display="none";
}

これでどうでしょう？

でも、このままの script だと、ポインタがリンク先へ行く前に、kes() が呼ばれてしまいますよ。
どうなった時に display style を変更するべきか、考えた方が良いと思います。
2   名前： nash ： 2006/08/09（水） 10:08  ID:rn4lGsea
かふぇおれさんコメントありがとうございます。

ホームページの参考画面を用意しました。ご確認ください。http://www.muse.dti.ne.jp/~iba-gold/

ホームページのイメージとしては、商品棚の画像をオンマウスで商品群の画像と説明文が表示されます。
各商品画像と説明文、リンク先にオンマウスで選択枠が表示されます。オンマウス解除で枠が消えます。クリックでリンク先へ移動します。

そこで質問です。

function up(text){
if( 'src1' == text ){ src1="<img src=http://www.muse.dti.ne.jp/~iba-gold/a001.jpg width=90 align='left'><a href='#'> リンク先1</a><br><a href='#'> リンク先2</a>"; }
document.getElementById('te').innerHTML=src1;
set.style.posLeft =document.body.scrollLeft+window.event.clientX+10;
set.style.posTop =document.body.scrollTop+window.event.clientY+10;
document.all('set').style.display="block";
}
function kes(){
document.all('set').style.display="none";
}

○オンマウスででる画像を商品毎に表示したいのですが、具体的にどのように書き換えればいいですか？
○オンマウスででる画像、説明文にオンマウスで選択枠の表示とオンマウス解除で選択枠の非表示をしたいのですが、どのように書き換えればいいですか？

以上、ご教授お願いします。
3   名前： m035 ◆Wpzr1YKOiq ： 2006/08/09（水） 10:08  ［URL］  ID:4KIacXXc
丸投げ反対：
くわしくは私のurlでも見てください。
>>1での指摘が反映されているようには見えません。
>でも、このままの script だと、ポインタがリンク先へ行く前に、kes() が呼ばれてしまいますよ。
>どうなった時に display style を変更するべきか、考えた方が良いと思います。
特に質問していないということは、これに対してはもちろん解決したわけですよね。

一応回答：
まず、if( 'src1' == text )がどうして必要なのか考えれば、分岐を増やすことで「オンマウスででる画像を商品毎に表示」できます。
また、
>オンマウスででる画像、説明文にオンマウスで選択枠の表示とオンマウス解除で選択枠の非表示
とのことですが、
オンマウスで画像、説明文表示→表示された画像、説明文にオンマウスでさらに選択枠の表示
と言うことならば、この突然出てきた選択枠って何のことでしょう？

気になった点：
1.document.allよりもdocument.getElementByIdを使いましょう。
大体、document.allとdocument.getElementByIdを両方使っているなら、より実用的な方で統一すればいいと思うのですが。
2.<SCRIPT language="JavaScript">は<script type="text/javascript">にしましょう。
4   名前： かふぇおれ ： 2006/08/09（水） 10:08  ID:Ji0blfRq
あはっ、m035 さんのご意見は当然の事ですね。私も同感です。
でももう少しだけヒントを。
if( 'src1' == text ){
っていうのは『もし、text（の中身）がsrc1と同じだったら』と読みます。
そしてその後の { に続く部分は『…だったら、src1 の中身はこれだよん』って読んで構いません。
つまり onmouseover="up('src1')" としている部分で『ここはsrc1だよ』と条件（引数）を渡していますから、src2 , src3 , src4 …と変更して、関数内に追記すればどんどん増やす事が出来ます。

頑張れ〜♪
5   名前： nash ： 2006/08/09（水） 10:08  ID:kUChYczt
ｍ035さん、かふぇおれさんコメントありがとうございます。

新たに説明ＨＰ作りました。http://www.muse.dti.ne.jp/~iba-gold/

試そうとしましたが、オンマウスで出た説明文にポインタ（マウスのカーソル）を移せません。
これが、「このままの script だと、ポインタがリンク先へ行く前に、kes() が呼ばれてしまいますよ。
どうなった時に display style を変更するべきか、考えた方が良いと思います。」ということだと思いました。
本屋と検索できっかけを調べてみましたが、オンマウスについて参考になりそうなものが見つかりませんでした。
検索キーワーーﾄﾞや参考図書で思いつくところあれば、教えてください。





6   名前： かふぇおれ ： 2006/08/09（水） 10:08  ID:Ji0blfRq
＞オンマウスで出た説明文にポインタ（マウスのカーソル）を移せません。

はい、意地悪の様ですが当然の仕様です。
え〜と、>>0 の中で関数 kes() は <a> 属性として表記されていますよね。
だから <A 〜略〜>テスト</a> から mouseout したら ID="set" は display="none" となります。
考えてみましょう。
説明文を表示して、ポインタがその範囲を色々と動く事は十分想像出来ますよね。
ならば関数 kes() は>>0 で呼ばれている <a> 属性にしてはいけないという事が解ります。
どこの範囲から外れたら ID="set" が消えても構わないと思いますか？
おそらくそれが答えになると思います。
一覧へ戻る