creating a clickable image and applying an click event listener to it

爷,独闯天下 提交于 2021-02-20 04:48:46

问题


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>&#169; 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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!