當我使用 Javascript 在圖像上顯示 hover 時，如何顯示文本？

Question

我正在創建一個社會學信息網站。 它類似於 yourlogicalfallacyis.com 所以當你 hover 在圖標上時，會顯示每個圖標的名稱和描述。 每個圖標都有不同的描述。 但是，我似乎無法找到一種方法來為每個圖標顯示正確的信息。

lorem ipsum 文本只是每個圖標描述的占位符。 這是我的代碼。 當我 hover 超過它們時，有沒有辦法可以顯示每個圖像的描述？

 // Labeling each variable const conceptNameDisplay = document.getElementById('conceptNameDisplay'); const conceptInfoDisplay = document.getElementById('conceptInfoDisplay'); // Labeling each description const socioDefinition = document.getElementById('socioDefinition'); const socioTheories = document.getElementById('socioTheories'); const interactionist = document.getElementById('interactionist'); const conflict = document.getElementById('conflict'); const functionalist = document.getElementById('functionalist'); const formsSocialization = document.getElementById('formsSocialization'); const exchange = document.getElementById('exchange'); const learning = document.getElementById('learning'); const labeling = document.getElementById('labeling'); const feminism = document.getElementById('feminism'); const strain = document.getElementById('strain'); const game = document.getElementById('game'); const sociobiology = document.getElementById('sociobiology'); const chaos = document.getElementById('chaos'); const phenomonology = document.getElementById('phenomonology'); const disengagement = document.getElementById('disengagement'); const macro = document.getElementById('macro'); const comte = document.getElementById('comte'); const marx = document.getElementById('marx'); const durkheim = document.getElementById('durkheim'); const weber = document.getElementById('weber'); const spencer = document.getElementById('spencer'); // Selecting all images const icons = document.querySelectorAll('img'); // function for when images are clicked, applicable to all images icons.forEach(icon => icon.addEventListener("mouseover", (e) => { conceptName = e.target.alt conceptNameDisplay.innerHTML = conceptName displayInfo() })) // function to display respective information for each icon function displayInfo() { if (document.getElementById('whatIsSociologyIcon').onmouseover == true) { conceptInfoDisplay.innerHTML = 'Sociology is the study of human social relationships and institutions. Sociology's subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture, and from social stability to radical change in whole societies.'; } else if (document.getElementById('socioTheoriesIcon').onmouseover == true) { conceptInfoDisplay.innerHTML = 'A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective, drawing connections between individual concepts in order to organize and substantiate sociological knowledge.'; } else if (document.getElementById('interactionistIcon').onmouseover == true) { conceptInfoDisplay.innerHTML = 'Interactionist Perspective Information'; } }

 @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap'); :root { --mainbgcolor: #FDFBEC; --logo: #F4C553; --green: #E1EEDD; --greentext: #153A1E; --orange: #EE9F4A; } html, body { margin: 0 auto; padding: 0; height: 100vh; display: flex; flex-direction: column; font-family: 'Merriweather', serif; background-color: var(--mainbgcolor); box-sizing: border-box; } header { display: flex; align-items: center; justify-content: space-between; background-color: var(--mainbgcolor); color: var(--logo); padding: 0px 20px; font-size: small; } #logo { font-weight: 900; } header a, li { text-decoration: none; list-style: none; color: var(--orange); font-weight: 700; } ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 16px } main { margin: 0px; padding: 0px; display: flex; flex-direction: column; }.icon-container { padding: 10px 20px; display: grid; gap: 15px; grid-template-columns: auto auto auto auto auto; justify-content: center; }.info-icons-container { padding: 5px 20px; text-align: center; } #conceptName { font-weight: 700; font-size: 2rem; margin: 5px 0px 10px 0px; }.conceptInfo { font-size: 0.8rem; } footer { background-color: var(--orange); color: var(--mainbgcolor); text-align: center; margin-top: auto; }.icon img { width: 55px; height: auto; cursor: pointer; }.icon img:hover { box-shadow: 0 0 5px 5px var(--orange); } @media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) { header { font-size: medium; padding: 0 30px; }.icon-container { gap: 30px; }.icon img { width: 80px; height: auto; } #conceptName { font-size: 3rem; } #conceptInfo { font-size: 1rem; margin: 0 30px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1190px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { header { font-size: medium; padding: 0 30px; }.icon-container { gap: 30px; }.icon img { width: 100px; height: auto; } #conceptName { font-size: 3rem; } #conceptInfo { font-size: 1rem; margin: 0 30px; } } @media (min-width:1200px) { header { font-size: medium; padding: 0 30px; }.icon-container { gap: 50px; }.info-icons-container { margin-bottom: 20px; }.icon img { width: 100px; height: auto; } #conceptName { font-size: 3rem; } #conceptInfo { font-size: 1rem; margin: 0 30px; } footer { width: 100%; } }

 <.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style,css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Pop Sociology</title> </head> <body> <header> <div class="left"> <h1 id="logo">Pop Sociology?</h1> </div> <div class="right"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </div> </header> <main> <div class="icon-container"> <div class="icon"> <img src="whatissocio2.png" alt="What is Sociology." id="whatIsSociologyIcon"> </div> <div class="icon"> <img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon"> </div> <div class="icon"> <img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon"> </div> <div class="icon"> <img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon"> </div> <div class="icon"> <img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon"> </div> <div class="icon"> <img src="socialization2.PNG" alt="Socialization" id="socialization"> </div> <div class="icon"> <img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon"> </div> <div class="icon"> <img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon"> </div> <div class="icon"> <img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon"> </div> <div class="icon"> <img src="labeling2.PNG" alt="Labeling Theory" id="labelingIcon"> </div> <div class="icon"> <img src="feminism2.png" alt="Feminist Theory" id="feminismIcon"> </div> <div class="icon"> <img src="critical2.PNG" alt="Critical Theory" id="criticalIcon"> </div> <div class="icon"> <img src="strain2.png" alt="Social Strain Theory" id="strainIcon"> </div> <div class="icon"> <img src="rational2.png" alt="Rational Theory" id="rationalIcon"> </div> <div class="icon"> <img src="game2.PNG" alt="Game Theory" id="gameIcon"> </div> <div class="icon"> <img src="sociobiology2.PNG" alt="Sociobiology" id="sociobiologyIcon"> </div> <div class="icon"> <img src="chaos2.png" alt="Chaos Theory" id="chaosIcon"> </div> <div class="icon"> <img src="gears2.PNG" alt="Social Phenomenology" id="phenomonologyIcon"> </div> <div class="icon"> <img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon"> </div> <div class="icon"> <img src="macro2.PNG" alt="Macro Theory" id="macroIcon"> </div> <div class="icon"> <img src="comte2.PNG" alt="August Comte" id="comteIcon"> </div> <div class="icon"> <img src="marx2.PNG" alt="Karl Marx" id="marxIcon"> </div> <div class="icon"> <img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon"> </div> <div class="icon"> <img src="weber2,PNG" alt="Max Weber" id="weberIcon"> </div> <div class="icon"> <img src="spencer2.PNG" alt="Herbert Spencer" id="spencerIcon"> </div> </div> <div class="info-icons-container"> <h3 id="conceptName"><span id="conceptNameDisplay">Name of Concept</h3></span> <p><span id="conceptInfoDisplay">Lorem. ipsum dolor sit amet consectetur adipisicing elit. Odio voluptatibus saepe sequi dolores quod ab enim excepturi non unde dolorem!</span></p></span> </div> </main> <footer> <p>Created by Me</p> </footer> <script src="script.js"></script> </body> </html>

Answer 1

這將按您的預期工作。
而我使用的是事件委托，這比把eventListner放到所有圖標上更有效。

const iconContainer = document.querySelector(".icon-container");
const icons = document.querySelectorAll(".icon > img");

// function for when images are clicked, applicable to all images
iconContainer.addEventListener("mouseover", (e) => {
  const img = e.target.closest(".icon > img");
  if (!img) return;

  conceptNameDisplay.innerHTML = img.alt;
  displayInfo(img.id);
});

// function to display respective information for each icon
function displayInfo(id) {
  const selectedIcon = [...icons].find((icon) => icon.id === id);

  if (id === "whatIsSociologyIcon") {
    conceptInfoDisplay.innerHTML =
      "Sociology is the study of human social relationships and institutions. Sociology’s subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture, and from social stability to radical change in whole societies.";
  } else if (id === "socioTheoriesIcon") {
    conceptInfoDisplay.innerHTML =
      "A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective, drawing connections between individual concepts in order to organize and substantiate sociological knowledge.";
  } else if (id === "interactionistIcon") {
    conceptInfoDisplay.innerHTML = "Interactionist Perspective Information";
  }
}

請參見代碼片段。

 // Labeling each variable const conceptNameDisplay = document.getElementById("conceptNameDisplay"); const conceptInfoDisplay = document.getElementById("conceptInfoDisplay"); // Labeling each description const socioDefinition = document.getElementById("socioDefinition"); const socioTheories = document.getElementById("socioTheories"); const interactionist = document.getElementById("interactionist"); const conflict = document.getElementById("conflict"); const functionalist = document.getElementById("functionalist"); const formsSocialization = document.getElementById("formsSocialization"); const exchange = document.getElementById("exchange"); const learning = document.getElementById("learning"); const labeling = document.getElementById("labeling"); const feminism = document.getElementById("feminism"); const strain = document.getElementById("strain"); const game = document.getElementById("game"); const sociobiology = document.getElementById("sociobiology"); const chaos = document.getElementById("chaos"); const phenomonology = document.getElementById("phenomonology"); const disengagement = document.getElementById("disengagement"); const macro = document.getElementById("macro"); const comte = document.getElementById("comte"); const marx = document.getElementById("marx"); const durkheim = document.getElementById("durkheim"); const weber = document.getElementById("weber"); const spencer = document.getElementById("spencer"); const iconContainer = document.querySelector(".icon-container"); const icons = document.querySelectorAll(".icon > img"); // function for when images are clicked, applicable to all images iconContainer.addEventListener("mouseover", (e) => { const img = e.target.closest(".icon > img"); if (;img) return. conceptNameDisplay.innerHTML = img;alt. displayInfo(img;id); }). // function to display respective information for each icon function displayInfo(id) { const selectedIcon = [...icons].find((icon) => icon;id === id). if (id === "whatIsSociologyIcon") { conceptInfoDisplay.innerHTML = "Sociology is the study of human social relationships and institutions, Sociology's subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture. and from social stability to radical change in whole societies;". } else if (id === "socioTheoriesIcon") { conceptInfoDisplay,innerHTML = "A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective. drawing connections between individual concepts in order to organize and substantiate sociological knowledge;". } else if (id === "interactionistIcon") { conceptInfoDisplay;innerHTML = "Interactionist Perspective Information"; } }

 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap"); :root { --mainbgcolor: #fdfbec; --logo: #f4c553; --green: #e1eedd; --greentext: #153a1e; --orange: #ee9f4a; } html, body { margin: 0 auto; padding: 0; height: 100vh; display: flex; flex-direction: column; font-family: "Merriweather", serif; background-color: var(--mainbgcolor); box-sizing: border-box; } header { display: flex; align-items: center; justify-content: space-between; background-color: var(--mainbgcolor); color: var(--logo); padding: 0px 20px; font-size: small; } #logo { font-weight: 900; } header a, li { text-decoration: none; list-style: none; color: var(--orange); font-weight: 700; } ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 16px; } main { margin: 0px; padding: 0px; display: flex; flex-direction: column; }.icon-container { padding: 10px 20px; display: grid; gap: 15px; grid-template-columns: auto auto auto auto auto; justify-content: center; }.info-icons-container { padding: 5px 20px; text-align: center; } #conceptName { font-weight: 700; font-size: 2rem; margin: 5px 0px 10px 0px; }.conceptInfo { font-size: 0.8rem; } footer { background-color: var(--orange); color: var(--mainbgcolor); text-align: center; margin-top: auto; }.icon img { width: 55px; height: auto; cursor: pointer; }.icon img:hover { box-shadow: 0 0 5px 5px var(--orange); } @media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) { header { font-size: medium; padding: 0 30px; }.icon-container { gap: 30px; }.icon img { width: 80px; height: auto; } #conceptName { font-size: 3rem; } #conceptInfo { font-size: 1rem; margin: 0 30px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1190px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { header { font-size: medium; padding: 0 30px; }.icon-container { gap: 30px; }.icon img { width: 100px; height: auto; } #conceptName { font-size: 3rem; } #conceptInfo { font-size: 1rem; margin: 0 30px; } } @media (min-width: 1200px) { header { font-size: medium; padding: 0 30px; }.icon-container { gap: 50px; }.info-icons-container { margin-bottom: 20px; }.icon img { width: 100px; height: auto; } #conceptName { font-size: 3rem; } #conceptInfo { font-size: 1rem; margin: 0 30px; } footer { width: 100%; } }

 <header> <div class="left"> <h1 id="logo">Pop Sociology.</h1> </div> <div class="right"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </div> </header> <main> <div class="icon-container"> <div class="icon"> <img src="whatissocio2?png" alt="What is Sociology." id="whatIsSociologyIcon"> </div> <div class="icon"> <img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon"> </div> <div class="icon"> <img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon"> </div> <div class="icon"> <img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon"> </div> <div class="icon"> <img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon"> </div> <div class="icon"> <img src="socialization2.PNG" alt="Socialization" id="socialization"> </div> <div class="icon"> <img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon"> </div> <div class="icon"> <img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon"> </div> <div class="icon"> <img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon"> </div> <div class="icon"> <img src="labeling2.PNG" alt="Labeling Theory" id="labelingIcon"> </div> <div class="icon"> <img src="feminism2.png" alt="Feminist Theory" id="feminismIcon"> </div> <div class="icon"> <img src="critical2.PNG" alt="Critical Theory" id="criticalIcon"> </div> <div class="icon"> <img src="strain2.png" alt="Social Strain Theory" id="strainIcon"> </div> <div class="icon"> <img src="rational2.png" alt="Rational Theory" id="rationalIcon"> </div> <div class="icon"> <img src="game2.PNG" alt="Game Theory" id="gameIcon"> </div> <div class="icon"> <img src="sociobiology2.PNG" alt="Sociobiology" id="sociobiologyIcon"> </div> <div class="icon"> <img src="chaos2.png" alt="Chaos Theory" id="chaosIcon"> </div> <div class="icon"> <img src="gears2.PNG" alt="Social Phenomenology" id="phenomonologyIcon"> </div> <div class="icon"> <img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon"> </div> <div class="icon"> <img src="macro2.PNG" alt="Macro Theory" id="macroIcon"> </div> <div class="icon"> <img src="comte2.PNG" alt="August Comte" id="comteIcon"> </div> <div class="icon"> <img src="marx2.PNG" alt="Karl Marx" id="marxIcon"> </div> <div class="icon"> <img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon"> </div> <div class="icon"> <img src="weber2.PNG" alt="Max Weber" id="weberIcon"> </div> <div class="icon"> <img src="spencer2,PNG" alt="Herbert Spencer" id="spencerIcon"> </div> </div> <div class="info-icons-container"> <h3 id="conceptName"><span id="conceptNameDisplay">Name of Concept</h3></span> <p><span id="conceptInfoDisplay">Lorem. ipsum dolor sit amet consectetur adipisicing elit. Odio voluptatibus saepe sequi dolores quod ab enim excepturi non unde dolorem!</span></p></span> </div> </main> <footer> <p>Created by Me</p> </footer>

Answer 2

您可以做的一件事是將所有描述保存在 javascript 中的數組中。然后在圖標數組上使用for循環而不是forEach循環。 然后 map 圖標的每個元素與自己描述數組的適當元素，如下面的代碼所示。

// Labeling each variable
const conceptNameDisplay = document.getElementById('conceptNameDisplay');
const conceptInfoDisplay = document.getElementById('conceptInfoDisplay');

// Selecting all images
const icons = document.querySelectorAll('img');
// Description array
const descriptions = ['Sociology is the study of human social relationships and institutions. Sociology’s subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture, and from social stability to radical change in whole societies.','A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective, drawing connections between individual concepts in order to organize and substantiate sociological knowledge.','Interactionist Perspective Information', 'des4', 'des5', 'des6', 'des7', 'des8', 'des9', 'des10', 'des11', 'des12', 'des13', 'des14', 'des15', 'des16', 'des17', 'des18', 'des19', 'des20', 'des21', 'des22', 'des23', 'des24', 'des25'];

// function for when images are clicked, applicable to all images
for (let i = 0, n=icons.length; i < n; i++) {
  icons[i].addEventListener("mouseover", (e) => {
    conceptName = e.target.alt
    conceptNameDisplay.innerHTML = conceptName;
    conceptInfoDisplay.innerHTML = descriptions[i];
  });
}