是否有可能通過CSS中的背景圖像創建鏈接

Question

嘿，我有一個我一直在建設的電子商務網站，他們決定在我的後續商標中加入一個PayPal賬單，其中大約有900個。所以我剛創建了一個背景圖片放置在添加購物車按鈕的下方。我這樣做了，所以我不需要通過900多種產品的整合。

那麼我可以創建一些代碼或其他東西來鏈接它嗎？這將是一個通用鏈接，對於每個產品上的每個圖像都是一樣的。

CSS代碼：

.singular .pricing { 
    padding-left:0; 
    padding-bottom: 4em; 
    background-image: url(http://www.prodjsoundlighting.com/wp-content/uploads/2012/12/render.png); 
    background-position: bottom left; 
    background-repeat: no-repeat; 
    background-size: 15em; 
} 

所以我想創建上述背景圖像變成可點擊的鏈接，而不要去到每一個產品，並創建一個鏈接它。

聖誕快樂!!!

更新：

樣本HTML

<div class="prodslideshow"> 
<div class="slidecontainer"> 
[superzoomgallery] 
</div> 
</div> 
<div class="item-post"><a href="/"> 
<div class="prod-image-cont"> 
<img src="" alt="" width="145px" height="160px" /> 
</div></a> 
<div class="discription"></div> 
<div class="pricing"> 
<h2 class="producthover"></h2> 
<h2></h2> 
[wp_cart:led-par-56-24-uvb:price:329.99:end] 
</div> 
</br></br></br></br></br> 
<div class="prodinfo"> 
<h3 style="color:black; font-weight:bold;">About:<br/></h3> 

<br/> 
<h3 style="color:black; font-weight:bold;">Features:<br/></h3> 

<br/> 
<h3 style="color:black; font-weight:bold;">Specifications:<br/></h3> 
</div> 
</div> 

背景圖像會在這裏：

<div class="pricing"> 
    <h2 class="producthover"></h2> 
    <h2></h2> 
    [wp_cart:led-par-56-24-uvb:price:329.99:end] 
    </div> 

這是每一個個體產品的HTML模板。

HTML模板爲每一個產品在所有影響每一個是這樣的：

<div id="primary"> 
      <div id="content" role="main"> 
       <div class="singlepostcontent"> 
       <?php while (have_posts()) : the_post(); ?> 

        <nav id="nav-single"> 
         <h3 class="assistive-text"><?php _e('Post navigation', 'twentyeleven'); ?></h3> 
         <span class="nav-previous"><?php previous_post_link('%link', __('<span class="meta-nav">&larr;</span> Previous', 'twentyeleven')); ?></span> 
         <span class="nav-next"><?php next_post_link('%link', __('Next <span class="meta-nav">&rarr;</span>', 'twentyeleven')); ?></span> 
        </nav><!-- #nav-single --> 

        <?php get_template_part('content', 'single'); ?> 

        <?php comments_template('', true); ?> 

       <?php endwhile; // end of the loop. ?> 
       </div><!-- .singlepostcontent --> 
      </div><!-- #content --> 
     </div><!-- #primary --> 

Answer 1

可能沒有必要這樣做，因爲所有900個產品都將使用單個模板作爲其標準信息。所以找到使用的模板並添加一個購買按鈕。然後你會看到它出現在所有產品下。

然後，如果您用來顯示按鈕的代碼包含鏈接查詢中的一些產品信息，則可以通過鏈接發送唯一的產品數據。

Answer 2

您可以使用CSS的背景圖像包裝DIV的鏈接。例如，雖然有很多：

<style type="text/css"> 
.myspan { 
    display: block; 
} 
</style> 
<a href="#"><span class="myspan">text</span></a> 

Answer 3

這是一個巧妙的小竅門，它允許您使用CSS在任何背景圖像上創建多個可點擊區域。對我來說，這比在HTML中使用圖像映射更容易。

加上一個背景圖像元素的網頁

上下面是這個盒子的CSS。請確保您給出框位置：相對或鏈接將無法正常工作。

.box1 { 
    position: relative; 
    margin: 20px 0 20px 40px; 
    padding: 5px 0; width: 300px; 
    height: 100px; 
    background-image: url(images/background.jpg); 
    background-repeat: no-repeat; 
    } 

然後創建一個透明的盒子，絕對定位，適合就在你想點擊的背景圖像部分的頂部。給這個盒子一個邊框比較容易，所以當你把它放到位置時你可以看到它。它應該看起來像這樣：

這裏是CSS的框。操作上，左，寬度和高度像素，直到你把它放在任何你想它（不要忘了刪除邊框，如果你不希望用戶看到它）：

#box-link { 
    position: absolute; 
    top: 8px; 
    left: 20px; 
    width: 83px; 
    height: 83px; 
    background-color: transparent; 
    border: 1px solid yellow; } 

這裏的HTML對於這個盒子的最終版本的鏈接：

<div class="box1"> 
    <a id="box-link" href="#"></a> 
    <p>The background of this box is an image.</p> 
    </div> 

我希望這有助於！使用這種技術，您可以在任何背景圖像上製作任意數量的可點擊區域。

Answer 4

jsFiddle DEMO

只需使用一個jQuery .each()方法遍歷所有的產品圖片。

這樣做會將貝寶徽標附加到可點擊的div元素中。

的jQuery：

$(document).ready(function(){ 

    $('.product').each(function(){ 
     $(this).append('<div class="paypal" />'); 
    }); 

    $('.paypal').click(function(){ 
     alert('Paypal Logo clicked!'); 
    }); 

}); 

然而，隨着WilliamK answer此頁面上的提示，我同意他用最好的方法是改變使用任何模板。最近對你的問題進行了更新，看來你應該有一個PHP模板來根據需要進行修改。