Question

我制作了一些网页，其功能是显示一些图片。对于链接文本，我们当然使用<a href....>，对于图片链接，我们使用<img src....>。

但是如果我想在点击一些链接文字后显示一些图片怎么样？

<ul>
      <li><a href="#"><span>Tulip</span></a></li>
      <li><a href="#"><span>Rose</span></a></li>
      <li><a href="#"><span>Jasmine</span></a></li>
 </ul>

图片文件

tulip.jpg
rose.jpg
Jasmine.jpg

Answer 1

您可以直接链接到图片文件：

<a href="tulip.jpg"><span>Tulip</span></a>

假设tulip.jpg与包含上述代码的网页位于同一目录中。这将加载一个只显示指定图像的页面。

如果您打算在当前页面上显示图像，点击链接后，您需要使用一些JavaScript来隐藏/显示它。

更新（根据评论）

要在点击链接时在当前页面上显示图像，您可以执行以下操作（JavaScript）：

function showImage(hiddenImgId) {
    document.getElementById(hiddenImgId).style.display = "block";
}

使用与此类似的HTML：

<a href="#" onclick="showImage('hidden1');">Show Image</a>
<div id="hidden1" style="display:none">
    <img src="image.jpg" />
</div>

根据进一步的评论

更新

如果您想使用jQuery，并且已经使用display:none加载并隐藏了图片，如上所示，您只需使用：

$("#imageID").show();

最好的选择可能是默认情况下可以看到图像，并在使用jQuery加载页面时隐藏它们（下面的代码假设要隐藏的所有图像都有imagesToHide类）：

$(document).ready(function() {
    $(".imagesToHide").hide();
});

这意味着任何已禁用JavaScript的用户仍会看到图片（因为隐藏它们的代码将无法运行），并且启用了JavaScript的大多数用户都会按预期看到该页面。

Answer 2

或者你可以制作一个新的html页面，其中包含图片+信息。在这个解决方案中，您可以为页面设置样式，因此它更加用户友好，更有趣。

如果您希望用户留在同一页面上，您还可以使用lightbox JS等脚本：

http://www.huddletogether.com/projects/lightbox/ （尝试点击图片）

通常我不会使用文字链接到图片。

Answer 3

你在@James Allardice的评论中提到了jQuery。

你可以这样做：

$('ul li a').click(function(){
    var img = $(this).attr('href');
    $('#content').html('<img src="' + img + '" />');
    return false;
});

HTML

<ul>
    <li><a href="tulip.jpg" id="tulip">Tulip</a></li>
    <li><a href="rose.jpg" id="rose">Rose</a></li>
    <li><a href="jasmine.jpg" id="jasmine">Jasmine</a></li>
</ul>

<div id="content"></div>

小提琴：http://jsfiddle.net/jasongennaro/K7pTu/

Answer 4

<a href="http://example.com/tulip.jpg">link text here</a>

如何创建链接到图像文件的链接文本？

4 个答案: