Javascript Newbie: Wie in verschiedenen divs mit der Maus darüber

Question

Text und Bild markieren würde Ich mag den gleichen Effekt auf der folgende Website erreichen:

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

mit der Maus darüber ein Bild, die entsprechenden Text-Highlights und umgekehrt.

Ich habe eine Javascript-Lösung in einem Forum gefunden. Weil ich nicht 2 Hyperlinks in meinem Beitrag enthalten kann, habe ich Kopie kleistert die Lösung unter:

div Code

<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> 

jedoch diese Lösung ist für ein Bild und Text in der gleichen div. Mein Bild und Text sind in zwei separaten divs wie so:

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"; 
} 

Text

<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> 

Bild

<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> 

PROBLEME

Nennen wir 11 Gurney Drive - Text1 und 11-Bahre-Drive.jpg - Image1
78 LAD - Text2 und 78-lad.jpeg - Bild2.

Meine Probleme:

Auf Text1 Mouseover, hebt es sowohl Text1 und Image1 - Gute.
Bei Text2 mouseover hebt es Text2 und Image1 hervor - es sollte Text2 und Image2 hervorheben.
Bei Image1 Mouseover wird nur Image1 hervorgehoben - es sollte Text1 und Image1 hervorgehoben werden.
In Image2 Mouseover wird nur Image1 hervorgehoben - es sollte Text2 und Image2 hervorgehoben werden.

Ich habe sehr wenig Erfahrung in der Anpassung von Javascript; Ich habe versucht goGelElementbyId auszuprobieren, aber alles könnte auch auf Griechisch sein. Ich hoffe wirklich, dass jemand hier dringend mit mir aushelfen könnte.

Vielen Dank.

// EDIT

Ich vergaß zu erwähnen, dass ich versucht habe, eine zweite eindeutige Element-ID hinzugefügt genannt textspan2 und imgsrc2 aber das scheint nicht zu funktionieren.Was ich tat:

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"; 
} 

Text

<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> 

Bild

<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> 

Answer 1

getElementById ist einer dieser Anrufe, die tatsächlich das tun, was sie sagt. :-) Er erhält ein DOM-Element durch sein id Attribut. Da id eindeutig sein muss, erhalten Sie ein bestimmtes Element, mit dem Sie interagieren können (z. B. Festlegen seiner Stileigenschaften).

So Teil Ihres Problems ist, dass Sie zwei Elemente mit der ID "textspan" haben, und zwei Elemente mit der ID "imgsrc", was bedeutet, dass der Browser etwas undefined tun wird, weil you can't do that.

In einem Event-Handler zeigt this auf das Element, auf das Sie den Handler gesetzt haben. In Ihren Funktionen highlight und removeHighlight können Sie this (anstelle von getElementById) verwenden, um einen Verweis auf die img DOM-Elemente zu erhalten. Das hinterlässt nur die Text-Einsen.

Sie könnten eine Namenskonvention ("textspan1" und "imgsrc1", "textspan2" und "imgsrc2" zum Beispiel) verwenden, so die Handler würde wie folgt aussehen:

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"; 
} 

... oder Sie könnte ein Attribut (z. B. data-text) für die Tags img verwenden, das die ID des damit verknüpften Textfelds angibt; Sie können ein Attribut aus einem DOM-Elemente wie folgt erhalten:

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

Benutzerdefinierte Attribute ungültig in HTML4 sind und unten, aber ich habe noch nie einen Browser, der mit ihnen ein Problem hatte. In HTML5 und höher können Sie benutzerdefinierte Attribute haben, solange sie mit data- wie oben beginnen. Wenn also validation Teil Ihrer Arbeitsmethoden ist (und das ist normalerweise eine gute Idee), sollten Sie erwägen, den HTML5-Doctype zu verwenden, es sei denn, Sie haben einen bestimmten Grund, bei dem vorherigen zu bleiben (z. B. wenn Sie sich nicht wohl fühlen) ein Doctype für eine Version von HTML5, die noch nicht einmal die Kandidatenempfehlungsstufe erreicht hat). Viele von uns sind happy enough to go ahead now.

this ist nicht das Element, wie Sie die Handler anschließen. Ich habe vergessen, es ist lange her, seit ich die DOM0-Methode zum Verbinden von Handlern verwendet habe (onmouseover=). Aber die folgenden Werke:

Oder, wegen der Art und Weise sind Sie die Handler anbringen, können Sie ein Argument in die Funktionen übergeben ihnen zu sagen, was man sie beschäftigen:

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"; 
} 

. ..wo Ihre onmouseover und onmouseout Attribute Änderungen:

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

hier ein live example ist.

Seitennotiz: Der Code, den Sie gefunden haben, verwendet die Ereignisse mouseover und mouseout. Seien Sie sich bewusst, dass diese nicht tun ganz tun, was Sie erwarten können, und es kann Sie beißen, obwohl die spezifische Art, wie Sie sie verwenden ist meist in Ordnung (Sie tun mehr Arbeit als nötig, aber das ist in Ordnung). Angenommen, Ihr Markup änderte sich ein wenig:

Jetzt gibt es ein Element innerhalb der Zeitspanne, die Sie diese Ereignisse beobachten. Das bedeutet, dass, während die Maus des Benutzers von links nach rechts läuft, ein series von mouseover Ereignisse angezeigt werden, während die Maus über den Text "11 (Leerzeichen)" reist, dann wird Ihr Code ein mouseout-Ereignis anzeigen Maus bewegt sich in das Wort "Gurney". Warum passiert das? Da die Maus aus der span und in das strong Element verschoben hat. Dann wird es sofort ein anderes mouseover sehen, weil sich die Maus über das strong Element bewegt und das mouseover Ereignis das DOM aufblubbert, also sehen wir es auf dem span. Dies kann zu Flimmern führen, wenn sich die Maus in das Element strong hinein- und hinausbewegt.

Internet Explorer hat die mouseenter und mouseleave Ereignisse, die besser geeignet sind, was Sie   — tun, aber wer will Ereignisse verwenden, die nur eine Marke von Browser beschränkt sind? Nun, die meisten guten JavaScript-Bibliotheken emulieren diese Ereignisse auch auf Browsern, die sie nicht nativ unterstützen, die bringt mich zu ...

Off-topic 1:

Wenn Sie gerade erst anfangen mit JavaScript auf Browser, ein Wort der Warnung: Es gibt eine Reihe von Browser-Inkonsistenzen und Ungeschicklichkeiten (wenn das ein Wort ist), dass Bibliotheken wie jQuery, Prototype, YUI, Closure oder any of several others für Sie glätten kann. Für das, was Sie in dieser Frage tun, würden sie nicht viel Wert bringen. Aber für kompliziertere Sachen, können sie Ihnen eine Menge Zeit und Mühe sparen, die gute Arbeit, die viele andere vor Ihnen getan haben. Wie zum Beispiel, emulieren mouseenter und mouseleave auf Browser, die sie nicht unterstützen. :-) Ich weiß genau, dass sowohl jQuery als auch Prototype das für Sie tun, und ich vermute, dass andere das auch tun.

Off-topic 2:

Es ist "Highlight", nicht "Hightlight". Wenn jemand Ihren Code später pflegen muss, könnte dieser Tippfehler (der konsistent ist und daher kein Bug!) Sie möglicherweise stolpern. Unabhängig davon ist die Standardpraxis (die Sie frei ignorieren können!), CamelCase-Wörter in Funktionsnamen, also removeHighlight statt removehightlight. FWIW.