0

我用谷歌搜索了翻转代码，发现一个似乎应该在这个地址工作的代码：http ://www.dnolan.com/code/js/rollover/ 。它可能有效，但是……嘿嘿……我不知道如何“为文档中的任何图像创建翻转状态”。诺兰先生给出指令的方式意味着它比在文档标题中安装代码更简单，因此不需要解释，但遗憾的是，我的情况并非如此。

我的导航栏需要它，它由一排 8 个圆形图像组成，在悬停时用相同大小和形状但颜色不同的图像替换。

你们中的任何一个有才华的人都可以填写缺失的信息吗？我只需要没有相应示例的部分——我在标签和标题中找到了部分，并对图像的名称进行了适当的更改。或者，如果你能成为一个真正的桃子，一步一步地给我整件事，我将永远感激不尽。

  <div id="header">
    <div id="home"><a href="feather.html"><img src="images/buttons/home.png" width="89"     height="89" alt="Home"></a></div>
    <div id="security"><a href="security.html"><img src="images/buttons/security_o.png" width="89" height="89" alt="Security"></a></div>
    <div id="phase_1"><a href="phase_1.html"><img src="images/buttons/phase_1.png" width="89" height="89" alt="Phase 1"></a></div>
    <div id="phase_2"><a href="phase_2.html"><img src="images/buttons/phase_2.png" width="89" height="89" alt="Phase 2"></a></div>
    <div id="phase_3"><a href="phase_3.html"><img src="images/buttons/phase_3.png" width="89" height="89" alt="Phase 3"></a></div>
    <div id="basic_package"><a href="basic_package.html"><img src="images/buttons/basic_package.png" width="89" height="89" alt="Basic Package"></a></div>

#header  {
background-image: url(images/complete_header.jpg);
background-repeat: no-repeat;
height: 391px;
width: 900px;
position: relative;
}

#home  {
width: 89px;
height: 89px;
position: absolute;
top: 199px;
left: 91px;
}

其他 7 个按钮的 CSS 完全相同，除了左侧位置。

4

2 回答 2

2

只需进一步阅读您的链接：

对于文档中的任何图像，您都需要为其创建翻转状态，此图像的唯一要求是它的名称与原始图像完全相同，但名称末尾需要 _o。

因此，如果您有一个图像foo.jpg，它希望您有一个foo_o.jpg在翻转中替换它。

当然，使用 css 和 sprites 会更好。谷歌搜索应该会带来很多结果。这是我想到的第一个例子。

于 2013-02-07T21:36:10.417 回答
0

我认为您应该为imgover要使用翻转的每个图像添加一个类。

例如<img src="sample.jpg" alt="Some Image">，在您的代码中替换为<img src="sample.jpg" alt="Some Image" class="imgover">并创建一个 sample_o.jpg 图像

于 2013-02-07T21:35:17.563 回答