带有图像的页面导航识别答案

【问题标题】：page navigation identification with images带有图像的页面导航识别
【发布时间】：2010-11-23 06:14:13
【问题描述】：

我的页面上有一个导航元素，包括关于我们、我们做什么、客户、联系我们等等......所有这些都只是图像。不是文字。我可以根据 $selected 的值识别选择了哪个页面。当 $selected==about 时，我希望关于我们的默认图像类似于 about_selected.png 和其他所有内容。我怎样才能做到这一点？我尝试了 javascript，但无法正确处理。这是我页面中的示例代码：

<a href="about.php" class="<?php if($selected =="about"){echo 'selected';}?>" onmouseover="document.about.src='images/About_over.png'" onmouseout="document.about.src='images/About.png'" ><img src="images/About.png" alt="about us" name="about" /></a></li>
 <li><a href="we_do.php" class="<?php if($selected =="do"){echo 'selected';}?>"  onmouseover="document.wedo.src='images/Wedo_over.png'" onmouseout="document.wedo.src='images/Wedo.png'" ><img src="images/Wedo.png" alt="what we do" name="wedo"/></a></li>

【问题讨论】：

你应该为你的<img>元素分配一个id，然后使用document.getElementById('id').src
将代码格式化为不需要水平滚动条会对其他人有所帮助

标签： php html image

【解决方案1】：

解决方案在您自己的代码中。

<img src="images/About<?php if($selected =="about"){echo '_selected';}?>.png"

【讨论】：

【解决方案2】：

您可能需要考虑使用 CSS 来实现这些鼠标悬停效果，而不是您在此处使用的内联 JavaScript。 A List Apart 上面有some useful information。

“选定”类可用于触发背景图像上的第三个“活动”状态。我确实建议您在标签之间放置一段文字，以确保搜索引擎可以索引您的导航。您可以再次使用 CSS 使实际文本不可见（负文本缩进通常是要走的路）

【讨论】：