使用javascript在新选项卡中打开图像和文本

问题描述 投票:0回答:2

我有几个数字对于我的 HTML 页面来说太大了。

因此,我想要的操作是,在 HTML 中显示一个缩略图,当用户单击该缩略图时,会打开一个包含图像、图形标题和文本的新选项卡(例如,标题 =“这是我的标题”)。

但是,我确实想要拥有一堆包含我所有图形的新HTML页面,并且我确实想要拥有一堆小尺寸和全尺寸图像。相反,我想要一些“更干净”的东西

我下面的代码有一个图形(原始大小),但将图像显示为缩略图,当您单击时,它会在新选项卡中打开该图形。

是否有一种简单的方法来添加我的标题文本(并允许我将其重复用于我的所有图形和标题)?

<a href='#' onClick=window.open('js/Figures/BI_Figure1.png','_blank');>
  <img src='js/Figures/BI_Figure1.png' alt=&#34;thumb&#34; width=100px;height=100px/>
</a>
javascript html image tabs
2个回答
2
投票

我最终不得不编写一个可以处理这个问题的 JavaScript 函数

该函数如下所示:

function imagePopup(myImage, myTitle, myCaption, mySource) {
   var myWindow = window.open("", myTitle, "_blank", "toolbar=no,scrollbars=no,resizable=yes");
   myWindow.document.write("<head><title>" + myTitle + "</title></head>");
   myWindow.document.write("<big><b>Figure Caption:</big></b>" + myCaption + "<p>");
   myWindow.document.write("<big><b>Figure Source:</big></b>" + mySource + "<p>");
   myWindow.document.write("<img src=" + myImage + ">");
   return myWindow;
};

然后当我想使用它时,我称它为:

<a href="#" onClick=imagePopup(&#39;PATH_TO_FIGURE&#39;,&#39;FIGURE_TITLE&#39;,&#39;FIGURE_CAPTION&#39;,&#39;FIGURE_SOURCE&#39;);><img src="PATH_TO_FIGURE" alt="thumb" width=100px;height=100px/></a>

PS - 所有

&#39;
都被使用,因为代码嵌入在 JSON 数组中


0
投票

这都是从数据库中提取的吗?我需要这样的东西。我有一个在 Muse 中完成的巨大页面,现在 Muse 甚至不让我使用该程序,但我有 100 多张图像,这些图像都包含文本信息,当您单击时会转到个人简介页面和社交媒体链接。我需要它非常干净且易于更新,我正在自学所有这些,但不知道代码中的 myImage、myCaption 内容来自哪里。感谢您提供任何信息或方向,您也可以指出我。

© www.soinside.com 2019 - 2024. All rights reserved.