堆栈内存溢出
  简体   繁体   English

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

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

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

问题描述

I'm trying to have a paragraph of text appear next to each image after I pick it.我试图在我选择每张图片后在每张图片旁边显示一段文字。 Currently, all I have is the image showing up after I click it.目前，我所拥有的只是点击后显示的图像。 I don't know how to add text next to the image that only shows up when it is clicked on.我不知道如何在图像旁边添加仅在单击时显示的文本。 I'm new to programming so anything could help.我是编程新手，所以任何事情都可以提供帮助。 If you guys need more information, let me know.如果你们需要更多信息，请告诉我。 Thanks.谢谢。 

 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

I made a few changes and additions.我做了一些更改和添加。 Here's the expanded image with the paragraph section next to it:这是旁边有段落部分的扩展图像：

在此处输入图像描述

The new expanded image block with side paragraph:带有侧边段落的新扩展图像块：

  <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>

Plus some changes and additions to the CSS.加上对 CSS 的一些更改和添加。

See the snippet for complete details.有关完整详细信息，请参阅代码段。 

 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

First make sure the image is not taking up all the space inside the container by removing its width 100%:首先确保图像没有占用容器内的所有空间，方法是移除其宽度 100%：

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

change to:改成：

<img id="expandedImg">

Then you can set a different width for your image inside the css and remove the absolute positioning from the text.然后，您可以为 css 中的图像设置不同的宽度，并从文本中删除绝对定位。

You have loads of options here to make them appear side by side but for wrapping text around pictures you can use floats.这里有很多选项可以让它们并排显示，但是要在图片周围环绕文字，您可以使用浮动。

Also don't forget to change the text color as it won't be visible when white on this white background.也不要忘记更改文本颜色，因为在白色背景上显示为白色时将看不到它。

Final css for the image and the text:图像和文本的最终 css：

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

暂无
暂无

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

相关问题 我尝试制作一个Tampermonkey用户脚本，该脚本在出现时自动单击图片 - I try to make a Tampermonkey Userscript that Automatically Click on a picture when show up 如何修复单击删除时不显示的删除模式 - How do i fix my delete modal that doesnt show up when i click delete <button>单击按钮时，如何在 console.log 中显示特定文本？</button> - How do I make a <button> show a specific text in console.log when I click on the button? 如何让我的 div 在动态创建时显示出来？ - How do I make my divs show up when created dynamically? 当我的链接被访问时，如何显示一个表单？ - How do I make one form show up when my link is visited? 如何使用 Javascript 制作密码提示，以显示带有正确密码的图片或文本？ - How do I make a Password Prompt which will show a picture or text with the correct password, with Javascript? 当我的数组包含一个特定的单词时，我该如何做到这一点？ - How do I make it so when my array includes a specific word a text input shows up? 如何让我的密码提示只在我打开我的网站时出现一次，而不是每次我重新加载页面或重新访问它时出现 - How do I make my password prompt only show up once when I open up my website instead of every time I reload the page or revisit it 当我点击它时，如何让我的阅读更多按钮显示更多文本（javascript/css/html）？ - How do I get my read more button to show more text when i click on it (javascript/css/html)? 如何使HTML元素被JavaScript隐藏，并在单击按钮时显示？ - How can I make HTML elements be hidden by JavaScript, and show up when I click a button?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM