【问题标题】:How to change pictures without leave the webpage in html?如何在不将网页留在html中的情况下更改图片?
【发布时间】:2014-04-06 13:24:59
【问题描述】:

我正在制作一个 html 页面,其中左侧有几个垂直排列的小按钮图片,右侧有一个巨大的图片。当点击左侧按钮图片时,右侧的大图应该会变成与按钮对应的东西。

我知道通过使用我可以展示不同区域的图片。但是我不知道如何通过单击另一张图片来更改图片。怎么做?

【问题讨论】:

标签: html css


【解决方案1】:

我现在知道怎么改了!通过查看我自己几个月前编写的 html 代码,我有了这个想法。

您可以简单地在 标签中添加一个目标属性以指向 iframe 目标! 然后你可以点击图片或txt来改变iframe中的内容。

例如:

<a href="/html/pink.html" target="iframe">Pink World</a>

当点击“Pink World”文字时,你会将iframe的内容变成/html文件下pink.html的内容。

就这么简单!

【讨论】:

  • 是的,但这很复杂,您必须为每张图片创建一个完整的文档。改为使用选项卡式内容,这更容易。
  • @mdesdev,谢谢,我决定学习 javascript 作为我的第二编程语言。
【解决方案2】:

您可以使用 JavaScript 来执行此操作,方法是使用图片的 DOM 中的事件来更改页面 HTML,从而更改图片。

【讨论】:

  • 哦,我只剩下3个小时来完成这项工作,学习javascript够吗?我完全没有关于 javascript 的经验。只是一些关于python的经验。
  • 您无需学习 所有 JavaScript,只需完成所需的部分即可。
  • @Zen 我认为你也可以只使用 CSS 但它可能比尝试开始使用 javascript 复杂得多,这对于初学者来说非常容易(解决你的问题)。
【解决方案3】:

点击按钮时使用javascript改变巨大的,这里有两个初学者教程,第一个用于click事件,第二个用于更改图像src

onClick Event
change img src

结合这两个代码来实现你的目标

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-04-18
    • 1970-01-01
    • 2016-06-09
    • 1970-01-01
    • 2022-01-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多