javascript - 创建一个可点击的图像并对其应用点击事件监听器
问题描述
我正在尝试制作一个网站,其中有人物肖像,用户将能够单击肖像以查看有关该人的更多信息。单击每个配置文件时,下面会有一个文本框,它将更改文本描述。
我正在尝试使图像成为各种按钮,然后通过 java 脚本应用单击事件来更改描述文本文本。
我的以下代码是:
HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>About</title>
<link rel="stylesheet" type="text/css" href="Styles.css" />
<script src="Scripts/jquery-3.3.1.intellisense.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<header>
<img src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
<h1 id="title">
CompTech Inc. 2018 Conference
</h1>
</header>
<nav id="navbar">
<span>
<a href="Indedx.html">Home</a>
<a href="Program.html">Program</a>
<a href="About.html" class="inactivelink">About</a>
<a href="Registration.html">Registration</a>
<a href="Sitemap.html">Sitemap</a>
</span>
</nav>
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<button id="jim" class="profile"></button>
<button id="arcturus" class="profile"></button>
<button id="sarah" class="profile"></button>
<button id="jaina" class="profile"></button>
<div id="descriptioncontainer">
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</div>
</section>
</article>
</div>
</main>
<footer>
<img src="Images/Logo.png" id="logofooter" class="logo" alt="CompTech Logo" />
<p>
<strong>© Copyright CompTech Inc.</strong> <br />
<address>123 Knotareal Pl, Sydney CBD, NSW, 2018</address>
customerservice@comptech.org <br />
(02) 6258 7412
</p>
</footer>
<script src="About.js"></script>
</body>
</html>
JS
(function clickEvent() {
var portraits = document.getElementByClassName("profile");
var counter;
for (counter = 0; counter < profile.length; counter++) {
portraits[counter].onclick = function () {
}
}
})
CSS
button.profile.active, button.profile:hover {
cursor:pointer;
}
.profile {
width: 250px;
height: 250px;
display: inline-block;
margin-top:2%;
}
#jim {
background-image: url('Images/JimRaynor.png');
}
#arcturus {
background-image: url('Images/ArcturusMensk.png');
}
#sarah {
background-image: url('Images/SarahKerrigan.png');
}
#jaina {
background-image: url('Images/JainaProudmore.png');
}
#descriptioncontainer {
border-style:solid;
border-color:whitesmoke;
padding:5px;
min-height:100px;
}
我在正确的轨道上,从这里开始吗?任何帮助,将不胜感激
解决方案
@Math 感谢您的帮助,您的解决方案运行良好。但是我一直在玩它并想出了这个:
HTML5
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<img src="Images/ArcturusMensk.png" id="arcturus" class="profile" />
<img src="Images/JainaProudmore.png" id="jaina" class="profile"/>
<img src="Images/JimRaynor.png" id="jim" class="profile"/>
<img src="Images/SarahKerrigan.png" id="sarah" class="profile"/>
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</section>
</article>
</div>
</main>
JS
(function () {
var profiles = document.getElementsByClassName('profile');
var counter;
var description;
for (counter = 0; counter < profiles.length; counter++) {
profiles[counter].onclick = function () {
description = this.id;
switch (description) {
case 'jim':
document.getElementById('description').innerHTML = "text";
break;
case 'arcturus':
document.getElementById('description').innerHTML = "text";
break;
case 'sarah':
document.getElementById('description').innerHTML = "text";
break;
default:
document.getElementById('description').innerHTML = "text.";
break;
};
};
}
})();
推荐阅读
- javascript - 从不同页面重定向后显示相关帖子
- html - 是否可以隐藏破折号视频源网址?
- python-3.x - 如何记录我的屏幕,将其编码为 HEVC,然后将其插入 webrtc 以使用 aiortc-python 进行流式传输
- python - 使用 Python 和 Selenium 抓取 Fidelity.com 的网页无法单击按钮
- ruby-on-rails - Ruby on Rails 6 Postgres upsert_all 区分更新和插入
- mysql - 仅加入最相似匹配行的联接
- c - 关于“int”的问题。整数与 C 中的初始化
- mysql - 如何在多个客户数据库上创建/更改 mysql 表
- postgresql - postgresql 和 jpa:关系不存在
- python - 模块'pandas'没有属性'corr'