1

嘿，伙计们，我有一个我一直在建立的电子商务网站，他们决定在每个产品中都有一个贝宝账单我的标志，他们大约有 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 -->
4

4 回答 4

4

这是一个巧妙的小技巧，可让您使用 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>

我希望这有帮助！您可以使用此技术在任何背景图像上创建任意数量的可点击区域。

于 2012-12-24T06:26:36.423 回答
3

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

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

于 2012-12-24T06:35:08.777 回答
2

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

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
于 2012-12-24T06:23:53.360 回答
2

jsFiddle 演示

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

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

jQuery： 

$(document).ready(function(){

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

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

});

但是，正如WilliamK在此页面上的回答所暗示的那样，我同意他的观点，即最好的方法是更改​​正在使用的任何模板。随着最近对您的问题的更新，您似乎应该有一个 PHP 模板可以根据需要进行修改。

于 2012-12-24T07:18:06.013 回答