HTML头文件，更改按钮状态

HTML Header file, change button state

本文关键字：按钮 状态 文件 HTML      更新时间：2023-09-26

我目前正在构建一个基础网站。到目前为止，一切都很好，但它变得相当混乱。其中一个原因是，我为每个页面都有一个单独的标题，因为当鼠标悬停或按钮链接到的页面是当前页面时，我没有脚本可以更改按钮。

我有以下按钮状态：

  • _selected_idle（如果按钮链接到活动页面，则为活动页面）
  • _selected_horver（如果按钮链接到当前页面并且用户悬停，则处于活动状态）
  • _default_idle（正常活动）
  • _default_hover（正常活动+悬停）

可以是"家"、"关于"、"注册者"、"产品"、"联系"

所以总共有20个图像。

这是我现在使用的（这在关于页面上）：

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_default_idle.jpg" onmouseover="this.src='/Images/home_default_hover.jpg'" onmouseout="this.src='/Images/home_default_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

这是相同的代码，但在主页上。

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_selected_idle.jpg" onmouseover="this.src='/Images/home_selected_hover.jpg'" onmouseout="this.src='/Images/home_selected_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

非常感谢您的帮助！如果你想看网站，这里有链接。

  • 如果你访问的页面还没有太注意内容，它仍然是一个在制品。编辑：

现在我有五个重要的页面。

  • 主页
  • 关于
  • 联系人
  • 寄存器
  • 产品

所有这些页面都有自己的标题。这些标头位于单独的文件中。我的目标是制作一个适用于所有页面的单个页眉。

然而，我有这么几个头文件是有原因的。我把它们分开了，因为按钮的状态会根据你所在的页面而变化。

假设你在主页上，主页按钮比这张图片要大：-home_selected_idle

如果您将鼠标悬停在该按钮上，则必须更改为：-主页选择悬停

如果你在关于页面上，你会看到主页按钮，它必须是：-home_default_idle

如果您将鼠标悬停在该按钮上，它将变为：-home_default_hover。

基本上我的抑扬格结构是这样的：-页面名称状态使用状态

  • 页面名称
    • 家
    • 关于
    • 产品
    • 寄存器
    • 联系人
  • 州
    • 违约
    • 选定
  • 鼠标状态
    • 空闲
    • 悬停

好的，我会给你一个php中的小例子：

对于标题链接，您将希望使用CSS而不是图像。

您将希望动态更改每个元素的类，如下所示：

<div class="<? if($_SERVER['PHP_SELF']=="home.php"){echo "selected";}else{echo "ghosted";} ?>" > HOME </div>

你只需要为每一个复制粘贴该格式。不需要JQuery库，这太简单了。只需将您的图像修改为CSS，这是标准的，鼠标悬停事件加载图像需要很长时间，CSS更灵活。

我建议您使用jQuery。它可以为你节省很多时间。

例如，当用户悬停在屏幕上时，此源代码会更改屏幕中的所有图像。看看jQuery有多简单。

$('hover',function () { //This function will run every time user over
an image this.src=this.src.replace('idle','hover') }, function () {
//This function will run every time user leave (mouseout) an image.
this.src=this.src.replace('hover','idle') })
相关文章：