如何在悬停和右键单击（复制链接位置）而不是单击时伪造URL？

Question

我的网站正在运行Wordpress，并且使用fancybox很好地加载了图像和图像库。 我的Wordpress循环输出的清理版本最终看起来像这样：

<article>
 <a href="image1.jpg" id="1460" rel="fancybox-1460"><img src="image1-thumbnail.jpg" /></a>
 <div class="nodisplay">
 <a href="image2.jpg" rel="fancybox-1460">&nbsp;</a>
 <a href="image3.jpg" rel="fancybox-1460">&nbsp;</a>
 <a href="image4.jpg" rel="fancybox-1460">&nbsp;</a>
 </div>
</article>

当用户单击image1链接时，图库会通过fancybox启动，这很棒。 我还可以提供此画廊的直接网址：

http://www.visualise.ca/#1460

我的问题是，当人们访问我的网站时，他们有时会右键单击缩略图以复制画廊的链接，最终他们将以下内容提供给其他人：

http://www.visualise.ca/image1.jpg

代替：

http://www.visualise.ca/#1460

因此，我想伪造该URL，以确保人们将正确的URL赋予他人（带有哈希的URL）。 我必须确保将image1.jpg的网址悬停并更改为[http://www.visualise.ca/#1460][7]，然后右键单击，但不要单击本身。

我也认为javascript或jQuery代码必须在循环内完成，因此我可以使用以下代码：

<?php bloginfo('url'); ?>/#<?php the_ID(); ?>

要从Wordpress获得此信息：

http://www.visualise.ca/#1460

非常感谢您的时间和帮助。

Answer 1

您可以调整fancybox脚本以将图像用作背景，并将其链接为所需的链接。

像这样

<a href="http://www.visualise.ca/#1460" id="1460" style="background: url('image1-thumbnail.jpg');"></a>

这样，将不会显示“复制图像位置”，并且“复制链接位置”将复制所需的URL。

或者

1. 您可以使用javascript跟踪所做的右键单击，隐藏上下文菜单，然后将位置复制到剪贴板中，并向用户发出有关它的提示。 （不太友好）

2. 最后一个选项是提供一个按钮，例如“复制图像URL”，单击该按钮会将URL复制到剪贴板。