如何在懸停和右鍵單擊（復制鏈接位置）而不是單擊時偽造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復制到剪貼板。