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

这是一个巧妙的小技巧，允许您使用CSS在任何背景图像上创建多个可点击区域。对我而言，这比用HTML制作图像地图更容易。

首先将背景图片添加到页面上的元素

这是此框的CSS。确保你给框postion：relative或链接无法正常工作。

    .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 2

可能没有必要这样做，因为所有900个产品都会使用单个模板来获取标准信息。因此，找到使用的模板并向其添加一个购买按钮。然后你会看到它出现在所有产品下面。

然后，如果用于显示按钮的代码在链接查询中包含一些产品信息，您可以使用链接发送您的唯一产品数据。

Answer 3

您可以创建使用css作为背景图像的包装div的链接。例如，虽然有很多：

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

Answer 4

jsFiddle DEMO

只需使用jQuery .each()方法迭代所有产品图片。

这样做会将 Paypal徽标附加到可点击的div元素中。

jQuery：

$(document).ready(function(){

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

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

});

但是，正如本页WilliamK answer所示，我同意他的观点，即使用的最佳方法是更改正在使用的模板。随着最近对您的问题的更新，您似乎应该根据需要修改PHP模板。

是否可以从CSS中的背景图像创建链接

4 个答案: