CODEWITHSUNDEEP
jqueryhtmlcss
David Biga
David Biga

Reputation: 2801

Is it possible to create a link from a background image in CSS

Hey guys I have a Ecommerce site I have been building and they decided to have a paypal bill me later logo into every product and their is about 900 of them. So I just created a background image to be placed underneath where the add cart button is. I did this so I would not have to go through 900+ products integrating myself.

So can I create some code or something to link it? This would be a universal link that would be the same for every single image that is on every product.

CSS code:

.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;  
}

So I want to create the above background-image into a clickable link without going into every product and creating a link for it.

Merry Christmas!!!

UPDATED:

Sample 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>

The background image goes under here: 

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

This is the HTML template for every single individual product.

The HTML Template for the every product over all that effects every single one is this: 

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

Upvotes: 1

Views: 875

Answers (4)

arttronics
arttronics

Reputation: 9955

jsFiddle DEMO

Simply use a jQuery .each() method to iterate over all your product images.

Doing so will attach the Paypal Logo into a clickable div element.

jQuery: 

$(document).ready(function(){

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

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

});

However, as WilliamK answer on this page suggests, I agree with him that the best method to use is to alter any template in use. And with the recent update to your Question, it seems you should have a PHP template to modify as needed.

Upvotes: 2

WilliamK
WilliamK

Reputation: 781

There is probably no need to do this because all 900 products will have used a single template for it's standard information. So find the template that is used and add a single purchase button to it. Then you will see it appear under all products.

Then if the code you use to display the button includes some product info in the link query, you can send your unique product data with the link.

Upvotes: 3

saidesh kilaru
saidesh kilaru

Reputation: 748

This is a neat little trick that will allow you to create multiple clickable areas over any background image using CSS. This is easier, to me, than making image maps in HTML used to be.

First add a background image to an element on your page

Here's the CSS for this box. Make sure you give the box postion: relative or the link will not work properly.

    .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; 
    }

Then create a transparent box, absolutely positioned, that fits right over the top of the section of background image you want to make clickable. It's easier to give this box a border so you can actually see it while you’re getting it into position. It should look like this:

Here's the CSS for box. Manipulate the top, left, width and height pixels until you get it positioned where you want it (don't forget to remove the border if you don't want users to see it):

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

Here's the HTML for this final version of the box with its link:

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

I hope this helps! You can make any number of clickable areas on any background image with this technique.

Upvotes: 4

jsteinmann
jsteinmann

Reputation: 4782

You can make a link of the wrapping div that uses css for a background image. For example, although there are many:

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

Upvotes: 2

Related Questions