使用jQuery將圖像與另一個圖像疊加（wordpress）

Question

我有以下標記：

<a href="#"><img src="sample-article-img.jpg" alt="Mri Machine" title="medical" class="alignright size-medium wp-image-3109"></a>

我需要用另一個圖像（放大按鈕）覆蓋它： images/article-zoom.png

問題1，我無法更改標記。 問題＃1，我在<a>上沒有課程或ID

我的想法是完全使用jquery，將zoom.png放到第一張圖片（客戶端）旁邊，將位置放在絕對位置。 但是這里的問題是主要圖像將浮動，因此我的放大按鈕將不會隨之移動。

有任何想法嗎？

Answer 1

您確實沒有提供很多細節要處理，但是作為入門者，添加新圖像相當簡單。

對於演示，假設我們要添加任何以wp-image開頭的類wp-image 。 如果僅添加到特定圖像，則將需要有關該圖像和/或其父元素的更多詳細信息

還需要有關定義現有圖像位置的更多詳細信息。 我假設以現有圖像為中心。

/* adjust accordingly*/
var buttonW = 120,/* button width*/
    buttonH = 40, /* button height*/
    $button = $('<img>', {src:  'drop zoom.png'});

var $image = $('img[class ^= "wp-image"]'),
    $image_link = $image.parent().css('position ', 'relative ');

var currImgPosition = $image.position(),
    currImgH = $image.height(),
    currImgW = $image.width();

var buttonCss = {
    position: 'absolute',
    zIndex : 10,
    width: buttonW,
    height: buttonH,
    top: currImgPosition.top + currImgH / 2 - buttonH / 2,
    left: currImgPosition.left + currImgW / 2 - buttonW / 2
}

$image_link.append( $button.css(buttonCss) );

編輯：jsfiddle.net中的一些實時HTML具有足夠的CSS來模仿現有元素，這也將有所幫助