创建可点击的图像并将点击事件监听器应用于它 [英] creating a clickable image and applying an click event listener to it
本文介绍了创建可点击的图像并将点击事件监听器应用于它的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试建立一个有人物肖像的网站，并且用户将能够单击肖像以查看有关该人物的更多信息.下面将有一个文本框，当单击每个配置文件时，该文本框将更改文本描述.
I am trying to make a website where there are portraits of people and a user will be able to click on a portrait to see more information about that person. There will a text box underneath that will change text description when each profile is clicked.
我试图使图像成为某种按钮，然后通过java脚本应用click事件以更改描述文本.
I am trying to make the image a button of sorts then apply a click event via java script to change description text text.
我的以下代码是:
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;
}
我在正确的轨道上，从这里到哪里去?任何帮助将不胜感激
Am I on the right track and where do go from here? any help would be appreciated
推荐答案
@Math感谢您的帮助，您的解决方案运行完美.但是我一直在玩它，并想到了:
@Math Thanks for your help, your solution worked perfectly. However I kept playing with it and came up with this:
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;
};
};
}
})();
这篇关于创建可点击的图像并将点击事件监听器应用于它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
