问题
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.
I am trying to make the image a button of sorts then apply a click event via java script to change description text text.
The following code i have is:
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
回答1:
You can assign an id to your image like this :
<img id="myImage" src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
and then in the javasript you can get the element by its ID and assign it a click event like this :
document.getElementById("myImage").onclick = function() {
//your code here
}
EDIT :
In your case, what you can also do is replace all your <button> tags by <img> tags with the source of your image and a call to a javascript function to replace the description by sending it in argument directly in the img tag attributes.
For exemple :
In the html, do this for all your profiles :
<img src="Images/JimRaynor.png" onclick="changeDescription('Write the description of Jim HERE')"/>
And in the javascript, you can write a single function that receive a string in argument and change the description in your page :
function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}
回答2:
@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;
};
};
}
})();
回答3:
First of all, I think you should use type attribute when use a button tag. And second, I think you can use <a> tag instead of button and call function on it with a parameter that will carry the name of the portrait so that you can use that parameter as condition in the function and change the description text. Follow this:
Here is the HTML:
<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>
<a href="javascript:void(0)" onclick="changeDescription(jim)" id="jim" class="profile"></a>
<a href="javascript:void(0)" onclick="changeDescription(arcturus)" id="arcturus" class="profile"></a>
<a href="javascript:void(0)" onclick="changeDescription(sarah)" id="sarah" class="profile"></a>
<a href="javascript:void(0)" onclick="changeDescription(jaina)" id="jaina" class="profile"></a>
<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>
Here is the function:
function changeDescription(name) {
var descriptionTag = document.getElementById('description');
if(name == 'jim') {
descriptionTag.innerText = 'This is jim';
}
else if(name == 'arcturus') {
descriptionTag.innerText = 'This is arcturus';
}
}
And so on.. I hope you got my point.
来源：https://stackoverflow.com/questions/52792414/creating-a-clickable-image-and-applying-an-click-event-listener-to-it