1

次の Web サイトにあるのと同じ効果を達成したいと思います。

http://www.kpf.com/projectlist.asp?T=4

画像にマウスオーバーすると、対応するテキストが強調表示され、その逆も同様です。

フォーラムで JavaScript ソリューションを見つけました。以下のソリューションをコピーして貼り付けました。

分割コード

<div style="width:400;height:500;" onmouseover="hightlight()" onmouseout="removehightlight()"><span id="textspan" >This is a test div to show mouseover</span><img id="imgsrc" src="/images/test.gif" /></div>

JavaScript

<script language="javascript">
function hightlight() 
{   
document.getElementById("textspan").style.color = "blue";
document.getElementById("imgsrc").style.border = "1px solid blue";
//document.getElementById("textspan").setStyle("color","blue");
//document.getElementById("imgsrc").setStyle("border","1px solid blue");
}
function removehightlight() 
{
document.getElementById("textspan").style.color = "black";
document.getElementById("imgsrc").style.border = "0px solid blue";
}    
</script>

ただし、この解決策は、同じ div 内の画像とテキストに対するものです。私の画像とテキストは、次のように 2 つの個別の div に存在します。

JavaScript

function hightlight() 
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
}
function removehightlight() 
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
}

文章 

<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br /></a>
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br /></a>
</p>
</div>
</div>

画像 

<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>

私の問題

11 Gurney Drive - Text1 と11-gurney-drive.jpg - Image1
78 LAD - Text2 と78-lad.jpeg - Image2 を呼び出しましょう。

私の問題:

Text1 をマウスオーバーすると、Text1 と Image1 の両方が強調表示されます - 良い。
Text2 をマウスオーバーすると、Text2 と Image1 が強調表示されます - Text2 と Image2 が強調表示されます。
Image1 をマウスオーバーすると、Image1 のみが強調表示されます - Text1 と Image1 が強調表示されます。
Image2 をマウスオーバーすると、Image1 のみが強調表示されます - Text2 と Image2 が強調表示されます。

Javascript をカスタマイズした経験はほとんどありません。グーグルでgetElementbyIdを試しましたが、すべてギリシャ語である可能性があります。

編集

textspan2 と imgsrc2 という 2 番目の一意の要素 ID を追加しようとしたことを忘れていましたが、うまくいかなかったようです。私がしたこと：

JavaScript

function hightlight() 
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
document.getElementById("textspan2").style.text = "underline";
document.getElementById("imgsrc2").style.border = "5px solid #005596";
}
function removehightlight() 
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
document.getElementById("textspan2").style.text = "none";
document.getElementById("imgsrc2").style.border = "5px solid white";
}

文章 

<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br /></a>
<a href="#" class="btn-list"><span id="textspan2" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br /></a>
</p>
</div>
</div>

画像 

<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc2" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>
4

1 に答える 1

5

getElementById実際にそれが言うことを行う呼び出しの1つです。:-) 属性によって DOM 要素を取得しidます。一意である必要があるためid、操作できる特定の要素を 1 つ取得します (たとえば、スタイル プロパティの設定)。

したがって、問題の一部は、IDが「textspan」の2つの要素と、IDが「imgsrc」の2つの要素があることです。これは、ブラウザーが未定義のことを行うことを意味します。

イベント ハンドラー内で、ハンドラーthisを配置した要素を指します。したがって、highlightandremoveHighlight関数では、this( ではなく) を使用してDOM 要素getElementByIdへの参照を取得できます。imgそれはテキストのものだけを残します。

命名規則 (「textspan1」と「imgsrc1」、「textspan2」と「imgsrc2」など) を使用できるため、ハンドラーは次のようになります。

function hightlight() 
{   
    var textid = this.id.replace("imgsrc", "textspan");
    var text = document.getElementById(textid);

    text.style.color = "blue";
    this.style.border = "1px solid blue";
}
function removehightlight() 
{
    var textid = this.id.replace("imgsrc", "textspan");
    var text = document.getElementById(textid);

    text.style.color = "black";
    this.style.border = "0px solid blue";
}

...または、タグにリンクされたテキスト フィールドの ID を与える属性 (たとえば、data-text) を使用することもできます。img次のように DOM 要素から属性を取得できます。

var textid = this.getAttribute("data-text");

カスタム属性は HTML4 以下では無効ですが、それらに問題があるブラウザーに会ったことはありません。HTML5 以降では、上記のように始まるカスタム属性を使用できますdata-。したがって、バリデーションが作業慣行の一部である場合 (通常は良い考えです)、以前のものを使用し続ける特別な理由がない限り (たとえば、まだ候補の推奨段階に達していない HTML5 のバージョンの doctype です)。私たちの多くは、今、前進するのに十分満足しています。

thisハンドラーを接続する方法の要素ではありません。忘れていましたが、ハンドラーを接続する DOM0 の方法を使用してから長い時間が経ちました ( onmouseover=)。しかし、以下は機能します：

または、ハンドラーをアタッチする方法のために、関数に引数を渡して、処理しているものを伝えることができます。

function hightlight(index) 
{   
    var img  = document.getElementById("imgsrc" + index);
    var text = document.getElementById("textspan" + index);

    text.style.color = "blue";
    img.style.border = "1px solid blue";
}
function removehightlight(index) 
{
    var img  = document.getElementById("imgsrc" + index);
    var text = document.getElementById("textspan" + index);

    text.style.color = "black";
    img.style.border = "0px solid blue";
}

... onmouseoverandonmouseout属性が次のように変更される場所:

onmouseover="hightlight(1);" onmouseout="removehightlight(1);"
onmouseover="hightlight(2);" onmouseout="removehightlight(2);"

これが実際の例です。

サイドノート:あなたが見つけたコードはmouseover、mouseoutイベントを使用しています。それらはあなたが期待していることを完全に実行しないことに注意してください.あなたがそれらを使用している特定の方法はほとんど問題ありませんが. しかし、マークアップが少し変更されたとします。

<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 <strong>Gurney</strong> Drive</span><br /></a>

これらのイベントを監視しているスパン内に要素があります。つまり、ユーザーのマウスが左から右に移動すると、マウスがテキスト「11(スペース)」の上を移動すると一連のmouseoverイベントが表示され、マウスがテキスト「11(スペース)」の上に移動するとコードにイベントが表示mouseoutされます。 「ガーニー」という言葉。なぜこれが起こるのですか？マウスが要素の外に移動spanしたためです。次に、マウスが要素の上を移動し、イベントがDOMをバブルアップするため、すぐに別のが表示されます。これにより、マウスが要素に出入りするときにちらつきが発生する場合があります。strongmouseoverstrongmouseoverspanstrong

Internet Explorer にはmouseenterとmouseleaveイベントがあり、これらは実行している内容により適していますが、1 つのブランドのブラウザーだけに限定されたイベントを使用したい人はいますか? まあ、ほとんどの優れた JavaScript ライブラリは、これらのイベントをネイティブにサポートしていないブラウザーでもこれらのイベントをエミュレートします。

トピック外 1 :

ブラウザーで JavaScript を使い始めたばかりの場合は、警告の言葉: jQuery、Prototype、YUI、Closure、またはその他のいくつかのライブラリのようなライブラリがスムーズにすることができるブラウザーの不整合やぎこちなさ (一言で言えば) が多数あります。あなたのために。この質問であなたがしていることについては、ええと、それらは大きな価値をもたらさないでしょう。しかし、より複雑なものについては、他の多くの人が行った優れた作業を利用して、多くの時間と手間を節約できます。たとえば、それらをサポートしていないブラウザーでエミュレートしますmouseenter。mouseleave:-) 私は、jQuery と Prototype の両方があなたのためにそれを行うことを知っています。

オフトピック 2 :

「ハイライト」ではなく「ハイライト」です。後で誰かがあなたのコードを保守する必要がある場合、そのタイプミス (これは一貫しており、バグではありません!) がつまずく可能性があります。これとは別に、標準的な慣行 (これは無視してかまいません!) は、関数名では単語をキャメルケースにすることremoveHighlightですremovehightlight。ふぅ。

于 2010-12-28T09:37:21.320 に答える