Has*_*nah 1 javascript text image highlight getelementbyid
我希望在以下网站上获得相同的效果:
http://www.kpf.com/projectlist.asp?T=4
在鼠标悬停图像时,相应的文本突出显示,反之亦然.
我在论坛上找到了一个Javascript解决方案.因为我的帖子中不能包含2个超链接,所以我复制粘贴了以下解决方案:
div代码
<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中的图像和文本.我的图像和文本位于两个独立的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 - Good.
在Text2鼠标悬停时,它突出显示Text2和Image1 - 它应突出显示Text2和Image2.
在Image1鼠标悬停时,它仅突出显示Image1 - 它应突出显示Text1和Image1.
在Image2鼠标悬停时,它仅突出显示Image1 - 它应突出显示Text2和Image2.
我在定制Javascript方面经验很少; 尝试过Googling getElementbyId,但这一切都可能是希腊语.真的希望有人能帮助我解决这个问题.
非常感谢你.
//编辑
我忘了提到我已经尝试添加名为textspan2和imgsrc2的第二个唯一元素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>
getElementById是其中一个实际上做了它所说的电话.:-)它通过其id属性获取DOM元素.由于id必须是唯一的,因此它会为您提供一个特定元素,然后您可以与之交互(例如,设置其样式属性).
所以问题的一部分是你有两个ID为"textspan"的元素,以及两个ID为"imgsrc"的元素,这意味着浏览器会做一些未定义的事情,因为你不能这样做.
在事件处理程序中,this将指向您放置处理程序的元素.因此,在您highlight和removeHighlight函数中,您可以使用this(而不是getElementById)获取对imgDOM元素的引用.这只留下了文本.
您可以使用命名约定(例如"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";
}
...或者您可以data-text在img标签上使用属性(例如),该标签提供与其链接的文本字段的ID; 你可以从这样的DOM元素中获取一个属性:
var textid = this.getAttribute("data-text");
自定义属性在HTML4及更低版本中无效,但我从未遇到过与它们有问题的浏览器.在HTML5及更高版本中,您可以拥有自定义属性,只要它们data-如上所述.因此,如果验证是您的工作实践的一部分(并且通常是一个好主意),您可能会考虑开始使用HTML5文档类型,除非您有特殊原因留在前一个(例如,您使用起来很不舒服) 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";
}
...您onmouseover和onmouseout属性更改为:
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>
现在,你正在观看这些事件的跨度中有一个元素.这意味着,当用户的鼠标从左向右移动时,你会看到一系列的mouseover事件,当鼠标移动到文本上"11(空间)",那么你的代码会看到一个mouseout事件当鼠标移过成"Gurney"这个词.为什么会这样？因为鼠标已经移动了的span,并进入所述strong元件.然后它会立即看到另一个mouseover,因为鼠标正在strong元素上移动并且mouseover事件在DOM上冒泡,所以我们在它上面看到它span.当鼠标移入和移出strong元素时,这可能会导致闪烁.
Internet Explorer具有mouseenter和mouseleave事件,它们更适合您正在做的事情 - 但是谁想要使用仅限于一个品牌浏览器的事件？好吧,大多数优秀的JavaScript库甚至在本机不支持它们的浏览器上模拟这些事件,这让我...
偏离话题1:
如果你刚刚开始在浏览器上使用JavaScript,请注意:有许多浏览器不一致和笨拙(如果这是一个单词),像jQuery,Prototype,YUI,Closure或其他几个库这样的库可以顺利为你而来.对于你在这个问题上所做的事情,恩,他们不会带来巨大的价值.但对于更复杂的东西,它们可以为您节省大量时间和麻烦,利用许多其他人在您之前所做的出色工作.例如,就像模拟mouseenter和mouseleave不支持它们的浏览器一样.:-)我知道jQuery和Prototype都可以为你做这件事,我怀疑其他人也这样做.
题外话题2:
这是"亮点",而不是"高光".如果有人需要在以后维护您的代码,那个错字(这是一致的,所以不是错误!)可能会让他们绊倒.另外,标准练习(您可以自由忽略!)是函数名称中的camelCase单词,removeHighlight而不是removehightlight.FWIW.