堆栈内存溢出
  繁体   English   中英

单击图片时，如何使文字显示在图片旁边？

[英]How do I make text show up next to my picture when I click on it?

 原文  2020-05-27 19:38:46  0   2    javascript/ html/ css

问题描述

我试图在我选择每张图片后在每张图片旁边显示一段文字。 目前，我所拥有的只是点击后显示的图像。 我不知道如何在图像旁边添加仅在单击时显示的文本。 我是编程新手，所以任何事情都可以提供帮助。 如果你们需要更多信息，请告诉我。 谢谢。 

 function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); expandImg.src = imgs.src; imgText.innerHTML = imgs.alt; expandImg.parentElement.style.display = "block"; }
 @font-face { font-family: 'futuralight'; src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tekoregular'; src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'playfair_displayregular'; src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0px; padding: 0px; border: 0px; }.topnav { background-color: rgb(84, 104, 217); overflow: hidden; font-family: 'futuralight'; font-weight: 900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left: 2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.column { float: left; width: 25%; padding: 10px; } /* Style the images inside the grid */.column img { opacity: 0.85; cursor: pointer; }.column img:hover { opacity: 1; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } /* The expanding image container */.container { position: relative; display: none; width:50%; } /* Expanding image text */ #imgtext { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px; } /* Closable button inside the expanded image */.closebtn { position: absolute; top: 10px; right: 15px; color: white; font-size: 35px; cursor: pointer; }.row{ position: absolute; top:600px; }.testtext{ color:black; background-color: grey; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/styleprojects.css" /> <script src='../Javascript/script.js'></script> <title>Projects</title> </head> <body> <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="active-menu" href="projects.html">Projects</a> <a class="link" href="communityservice:html">Community Service</a> </header> <div style="text-align:center"> <h2>Tabbed Image Gallery</h2> <p>Click on the images below.</p> <div class="container"> <span onclick="this.parentElement.style;display='none'" class="closebtn">&times:</span> <img id="expandedImg" style="width:100%"> <div id="imgtext"></div> </div> </div> <div class="row"> <div class="column"> <img src="https.//miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A:jpeg" alt="Nature" style="width;100%" onclick="myFunction(this):"> </div> <div class="column"> <img src="https.//s.yimg.com/ny/api/res/1:2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https.//s.yimg.com/uu/api/res/1:2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https.//media.zenfs.com/en/prnewswire:com/d908212583d777d158af74cb171ec897" alt="Snow" style="width;100%" onclick="myFunction(this):"> </div> <div class="column"> <img src="https.//engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768?jpg:RenditionID=1" alt="Mountains" style="width;100%" onclick="myFunction(this):"> </div> <div class="column"> <img src="https.//techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard:jpg" alt="Lights" style="width;100%" onclick="myFunction(this);"> </div> </div> </body> </html>

2 个解决方案

解决方案1
 0 已采纳  2020-05-27 19:55:52

我做了一些更改和添加。 这是旁边有段落部分的扩展图像：

在此处输入图像描述

带有侧边段落的新扩展图像块：

  <div id="expanded-wrapper">
    <div class="container">
      <span onclick="this.parentElement.style.display='none'"
        class="closebtn">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>
    <div id="img-paragraph">
      <p>image paragraph content goes here</p>
    </div>
  </div>

加上对 CSS 的一些更改和添加。

有关完整详细信息，请参阅代码段。 

 function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); var imgParagraph = document.getElementById('img-paragraph'); expandImg.src = imgs.src; imgText.innerHTML = imgs.alt; // use 'display:table-cell' to keep elements side-by-side expandImg.parentElement.style.display = "table-cell"; imgParagraph.style.display = 'table-cell'; }
 * { margin: 0px; padding: 0px; border: 0px; }.topnav { background-color: rgb(84, 104, 217); overflow: hidden; font-family: 'futuralight'; font-weight: 900; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 20px 21px; text-decoration: none; font-size: 19px; position: relative; left: 2%; }.topnav a:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.topnav a:hover:before { visibility: visible; transform: scaleX(1); }.topnav a.active-menu:before { content: ""; position: absolute; width: 84%; height: 2px; bottom: 6px; left: 8%; background-color: white; visibility: visible; transform: scaleX(1); transition: all 0.3s ease-in-out 0s; }.column { float: left; width: 25%; padding: 10px; } /* Style the images inside the grid */.column img { opacity: 0.85; cursor: pointer; }.column img:hover { opacity: 1; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } /* The expanding image container */.container { position: relative; display: none; width: 50%; } /* Expanding image text */ #imgtext { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px; } /* image paragraph */ #img-paragraph { display: none; width: 30%; outline: 1px solid red; padding: 0.5rem; vertical-align: top; text-align: left; } /* Closable button inside the expanded image */.closebtn { position: absolute; top: 10px; right: 15px; color: white; font-size: 35px; cursor: pointer; }.row { position: absolute; top: 600px; }
 <header class="topnav" id="topnav"> <a class="link" href="../index.html">Home</a> <a class="link" href="#Academics">Academics</a> <a class="active-menu" href="projects.html">Projects</a> <a class="link" href="communityservice.html">Community Service</a> </header> <div style="text-align:center"> <h2>Tabbed Image Gallery</h2> <p>Click on the images below:</p> <div id="expanded-wrapper"> <div class="container"> <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span> <img id="expandedImg" style="width:100%"> <div id="imgtext"></div> </div> <div id="img-paragraph"> <p>image paragraph content goes here</p> </div> </div> </div> <div class="row"> <div class="column"> <img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Nature" style="width:100%" onclick="myFunction(this);"> </div> <div class="column"> <img src="https://s.yimg.com/ny/api/res/1.2/Petngc9GmDGVfvqWtZW1uw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTcwNTtoPTM4MC43/https://s.yimg.com/uu/api/res/1.2/p2FH9i2oATkHA6O0ucuC9A--~B/aD0yMTY7dz00MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/prnewswire.com/d908212583d777d158af74cb171ec897" alt="Snow" style="width:100%" onclick="myFunction(this);"> </div> <div class="column"> <img src="https://engineering.wustl.edu/news/PublishingImages/141020_jwb_brookings_007-1915x768.jpg?RenditionID=1" alt="Mountains" style="width:100%" onclick="myFunction(this);"> </div> <div class="column"> <img src="https://techcrunch.com/wp-content/uploads/2019/01/McKelvey-courtyard.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);"> </div> </div>

解决方案2
 0  2020-05-27 20:09:54

首先确保图像没有占用容器内的所有空间，方法是移除其宽度 100%：

<img id="expandedImg" style="width:100%">

改成：

<img id="expandedImg">

然后，您可以为 css 中的图像设置不同的宽度，并从文本中删除绝对定位。

这里有很多选项可以让它们并排显示，但是要在图片周围环绕文字，您可以使用浮动。

也不要忘记更改文本颜色，因为在白色背景上显示为白色时将看不到它。

图像和文本的最终 css：

#imgtext {
  color: black;
  font-size: 20px;
  float:left;
}
#expandedImg{
  float:left;
  width:50%;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我尝试制作一个Tampermonkey用户脚本，该脚本在出现时自动单击图片 如何修复单击删除时不显示的删除模式 <button>单击按钮时，如何在 console.log 中显示特定文本？</button> 如何让我的 div 在动态创建时显示出来？ 当我的链接被访问时，如何显示一个表单？ 如何使用 Javascript 制作密码提示，以显示带有正确密码的图片或文本？ 当我的数组包含一个特定的单词时，我该如何做到这一点？ 如何让我的密码提示只在我打开我的网站时出现一次，而不是每次我重新加载页面或重新访问它时出现 当我点击它时，如何让我的阅读更多按钮显示更多文本（javascript/css/html）？ 如何使HTML元素被JavaScript隐藏，并在单击按钮时显示？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM