JavaScript 图像更改错误

发布于 2023-02-23 00:20:43 字数 689 浏览 18 评论 0原文

今天刚加入就已经喜欢这个网站了。

我的问题是。我正在尝试为我的网站创建 6 个菜单。像例如 { 家，关于我们，服务 ..... } 我希望只要用户鼠标悬停在菜单上，图像就会改变。我实际上是从网上获得了这张纸条。但它是一个图像的例子下面是代码： JavaScript / DHTML / AJAX 语法（切换纯文本）

function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}

以及正文 JavaScript / DHTML / AJAX 语法（切换纯文本）

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

现在我尝试将这五次相乘，（只是重复代码并更改图片名称） - 但每当我将鼠标悬停在图像上时，它们都不会改变。

所以我的问题是：如何将上述代码从一个图像转换器变成 6 个？

谢谢！

原文

just joined today loved this site already.

My Question is that. i am trying to create 6 Menus for my Web. like Eg { home, about us, service ..... } and i want the images to change whenever the users mouse hovers the menu's. I got the scrip actually from online souce. But it was an example for one image Here are the codes:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}

And for the body
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

Now i tried to multiply these five times, ( just repeated the codes and changed the picture name ) - But whenever i hover on the images they do not change.

So my Q - is: How do you make the above code from a one image changer to 6?

Thanks !

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

留一抹残留的笑 2023-03-02 00:20:43

尝试为每个图像使用一个 id（id 必须是唯一的，因此不应该有具有相同 id 的元素）：

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')" onmouseout="roll_over('but1', 'icon1.gif')">
  <IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50" ID="but1" BORDER="0" />
</A>

并且此代码：

function roll_over(img_id, img_src) {
  document.getElementById(img_id).src = img_src;
}

Try using an id for each image (id must be unique, so there should be no elements with the same id):

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')" onmouseout="roll_over('but1', 'icon1.gif')">
  <IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50" ID="but1" BORDER="0" />
</A>

And this code:

function roll_over(img_id, img_src) {
  document.getElementById(img_id).src = img_src;
}

回复收藏 0 原文

死开点丶别碍眼 2023-03-02 00:20:43

好的，我想通了。应该为每个图像设置一个唯一的名称。
试试这个代码
JavaScript / DHTML / AJAX 语法（切换纯文本）

<script>
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>

<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
onmouseout="roll_over('but1', '10-roll.gif')">
<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
onmouseout="roll_over('but2', '1.gif')">
<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
NAME="but2" BORDER="0">
</A>

<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
onmouseout="roll_over('but3', '2.gif')">
<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
NAME="but3" BORDER="0">
</A>

希望这有效

Ok I figured it out. Should set a unique name for every Image.
Try this code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<script>
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>

<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
onmouseout="roll_over('but1', '10-roll.gif')">
<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
onmouseout="roll_over('but2', '1.gif')">
<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
NAME="but2" BORDER="0">
</A>

<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
onmouseout="roll_over('but3', '2.gif')">
<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
NAME="but3" BORDER="0">
</A>

hope this works

回复收藏 0 原文

~没有更多了~