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

【问题标题】：Using javascript to open image and text in new tab使用 javascript 在新选项卡中打开图像和文本
【发布时间】：2016-08-11 01:38:11
【问题描述】：

我有几个对我的 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

【解决方案1】：

我不得不编写一个可以处理这个问题的 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;s 都被使用，因为代码嵌入在 JSON 数组中

【讨论】：