自動在每張圖片上放置一個標誌

Question

我有一個wordpress網站，我想在任何帖子的任何圖片的右下角放置同樣的小png圖標。

問題在於帖子是動態的，因爲html是根據用戶的內容生成的（所以在撰寫文章之前沒有可以篡改的html）。 因此，我不能說這些照片是小的，大的，左右對齊的，我無法預測它們的位置。更不用說，每次檢測到圖片時，我也必須動態地生成徽標img標籤，因爲我無法預測帖子內出現的數量。

我相信要走的路將是在一篇文章中定位任何「img」標籤，並附加一個標誌img標籤，之後很容易實現。 但我發現檢測用戶圖片位置以將其應用於徽標的唯一方法是使用「clientWidth」和「clientHeight」。

它的工作原理，但它有一個嚴重的缺陷，當涉及到clientWidth：因爲它是一個絕對定位與窗口有關，我得到不同的偏移結果根據我使用的瀏覽器（我相信這是因爲每個瀏覽器管理它的滾動條或其他..）。無論如何，這是一個死路一條。

那麼，有什麼方法可以「追蹤」img的相對位置，以便將精確位置應用於另一個位置並保持該位置，無論瀏覽器如何，即使窗口在顯示期間調整大小？

這是我嘗試過（並且幾乎工作）。

 $(".status-publish img").each(function(index) 
     { 
      var theID= 'theID'+index; 
      $(this).attr('id', theID); 
      $(this).after('<img id="log'+index+'" src="logo.png" /> '); 

      var source = $('#theID'+index); 
      var sourceHeight = source.height()-22; 
      var sourcePosition = source.position(); 
      var target = $('#log'+index); 

      var sourceClass=source.attr('class'); 
      var mysplit=sourceClass.split(" "); 
      var first_part=mysplit[0]; 
      var last_part= mysplit.pop(); 

      if((first_part=="alignleft") || (last_part=="alignleft")) 
      { 
       var x  = sourcePosition.left-2; 
       var y  = sourcePosition.top + sourceHeight; 
      } 
      else if((first_part=="alignright") || (last_part=="alignright")) 
      { 
       var x  = sourcePosition.left+10; 
       var y  = sourcePosition.top + sourceHeight; 
      } 

      else if((first_part=="aligncenter") || (last_part=="aligncenter")) 
      { 
       var x  = sourcePosition.left-2; 
       var y  = sourcePosition.top + sourceHeight+2; 
      } 

      else if((first_part=="alignnone") || (last_part=="alignnone")) 
      { 
       var x  = sourcePosition.left-2; 
       var y  = sourcePosition.top + sourceHeight; 
      } 

      x -= (target.outerWidth() - source.outerWidth()); 

      target.css({ 
       position: 'absolute', 
       zIndex: 5000, 
       top:  y, 
       left:  x 
      }); 
     }); 

（可能不是你見過的，但請記住，我不是一個開發商最純淨，最有效的代碼...）

Answer 1

你可以做的是，把主要「 img「轉換爲」div「。然後在該循​​環代碼中，在每個div中創建新的「img」標籤，並將其設置爲「相對」並設置其在您的代碼中的位置。現在，您擁有代碼的每張圖片都會顯示該徽標，並且它們一起移動。

另一種方法可能是使用「畫布」來做到這一點，雖然可能你不想這樣做。