Clickable Background Image - How To?

[gjh42]

If you already have a text link next to the background icon you want to make clickable, you can use your stylesheet to spread out the clickable area as desired. Say the link has a classname of shoppingcartLink, you could do

.shoppingcartLink {
    display: block;
    height: 30px;
    width: 66px;
    position: absolute;
    left: 123px;
    top: 42px;
    }

or several other ways of locating it in the correct position.

[DBB1]

basically, yes... look for the shopping cart code, it should be in includes\templates\MY_TEMPLATE\common\tpl_header.php ...you may have to do the image by its self are play around a bit to get things lined up right.

Wow, I think I finally got it. I took pretty much the same approach that you outlined here, but I couldn't get the image to line up - it bumped up against the cart text link, and caused it to wrap down, so I went back to the drawing board. Here's how I resolved it:


1). Commented the image reference out of stylesheet.css:

/*background: url(../images/cart_bg.png) no-repeat; */

2). Found the bit of code in tpl_header.php that created the Shopping Cart link (as shown in the attached image of my previous post). In the case of my custom template, it is...:

<div id="cart_top"><a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>index.php?main_page=shopping_cart"><?php echo BOX_HEADING_SHOPPING_CART; ?></a><br /><?php echo $_SESSION['cart']->count_contents();?> item(s) - <?php echo $currencies->format($_SESSION['cart']->show_total());?></div>

3). ...and created a new <div> immediately before the above line. This new <div> contained my new cart image source and link:

<div id="cart_img"><a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>index.php?main_page=shopping_cart"><?php echo zen_image(DIR_WS_TEMPLATE.'images/cart_bg.png'); ?></a></div>

4). Finally, I referenced the new <div> in stylesheet.css to set the absolute position of the cart image:

#cart_img {
	position: absolute;
	right: 115px;
	top: 44px;
	}

Whew! I've been image-mapping, and trying to link background images for some time, now... Once you had me thinking in a different direction, it forced me to step back from the trees and take a fresh look at it. It all seems so logical, now!

Thanks for all the input!

-DBB1