Clickable Background Image - How To?

[DBB1]

This is driving me insane... I have a shopping cart image that is located in the header. It is defined as as a background image in stylesheet.css. All I'm trying to do is to allow it to be click-able to take the user to the cart page, in much the same way as clicking on the shop logo returns one to the home index page.

The forum posts that I could find relative to the subject all seem to reference the Xavisys site, as an example on how to do this.

I have tried and tried, but have not been successful. About the only thing I can discern at this point is that accomplishing this will involve editing both the stylesheet.css and tpl_header.php files.

Has anyone gotten this to work, or have some more concise instructions for a newb like me to follow?

Thanks,
-DBB1

[stiggy100]

All I did to do this was install this module from the zen team:

http://www.zen-cart.com/index.php?ma...roducts_id=345

Follow the instructions. Once it is installed change this in your tpl_header.php from:

<div id="navMainCartSummary"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></div>

to:

<div id="navMainCartSummary"><a href="https://www.yourshoppingcarturl.com"><img class="cartIcon" src="includes/templates/YOUR_TEMPLATE/images/cartheader.gif"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></a>

Then you add .cartIcon {} to position the image.

Hope this helps

[DBB1]

All I did to do this was install this module from the zen team:

http://www.zen-cart.com/index.php?ma...roducts_id=345

Follow the instructions. Once it is installed change this in your tpl_header.php from:

<div id="navMainCartSummary"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></div>

to:

<div id="navMainCartSummary"><a href="https://www.yourshoppingcarturl.com"><img class="cartIcon" src="includes/templates/YOUR_TEMPLATE/images/cartheader.gif"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></a>

Then you add .cartIcon {} to position the image.

Hope this helps

Cool! As mentioned, everything I've found on the forum largely deals with header logo image maps, and doesn't really address any secondary images in the header, that I could tell.

Plus, I have a custom template that defined the shopping cart image as a background:url in the CSS file, which must really bury the image, as none of the developer tools are even able to report on it.

I'll definitely give this a try - seems crazy not to be able to click on the actual cart image.

Thanks!
-DBB1

[stiggy100]

If you follow as the above - it should do the trick. To be sure it is what you want y site is in my signature and that is what you'll get (the cart is in the top right hand corner of the header)

Might be best to check before you go to the effort.

If you have any problems, post back up and I'll keep an eye out...

[DBB1]

All I did to do this was install this module from the zen team:

http://www.zen-cart.com/index.php?ma...roducts_id=345

Follow the instructions. Once it is installed change this in your tpl_header.php from:

<div id="navMainCartSummary"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></div>

to:

<div id="navMainCartSummary"><a href="https://www.yourshoppingcarturl.com"><img class="cartIcon" src="includes/templates/YOUR_TEMPLATE/images/cartheader.gif"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></a>

Then you add .cartIcon {} to position the image.

Hope this helps

Nope, this didn't work, Stiggy...

It placed the cart info in the EZPage navigation section, not up in the actual header. My custom template already has cart content displayed along with the cart icon and "shopping cart" link in the actual header. Don't know why the template author would not go ahead and make the icon clickable, along with the link. Seems like a basic design/usability consideration...

Thanks for replying!

-DBB1

[stiggy100]

Id think it good practice to remove the template authors code regarding the cart in the tpl_header and replace it with the above in the exact same place? Id think A: This is where you want the above code and B: There could be a conflict/duplication of interests.

Obviously be sure to back up your files as always before attempting

[davewest]

Has anyone gotten this to work, or have some more concise instructions for a newb like me to follow?

Background images are grate for placing other elements in front of the wallpaper, but normally not clickable... You can create a image map and make areas clickable, some use a transparent image over the background wallpaper and make it clickable.... kind of defeats the use of wallpaper!

But if all you want is to make the entire background click-able without moving it to the foreground, then all you need do is create a normal text link in the space where your background image would of been.... be sure to use the ID tag in the link... (id="nolinkImage")

<a href="http://www.mysite.com" title="my web site name or SEO" id="nolinkImage">my web site name or SEO title</a>

remove the background image in the stylesheet you already have for that space and add the ID tag for the link. We will create a box for the link.... you need this box to be the same size of ether the space or the image... say my image is 850 wide and 98 high, then so should be my box. next, we don't want to see the words, so we move them off stage...

#nolinkImage {
 background-image:url(mybackground.jpg);
background-repeat: no-repeat;
display:block;
height:98px;
width:850px;
text-indent:-9999px;
}

The link goes in your template includes\templates\MY_TEMPLATE\common\tpl_header.php
and the style goes in your includes\templates\MY_TEMPLATE\css\stylesheet.css

[DBB1]

Background images are grate for placing other elements in front of the wallpaper, but normally not clickable... You can create a image map and make areas clickable, some use a transparent image over the background wallpaper and make it clickable.... kind of defeats the use of wallpaper!

But if all you want is to make the entire background click-able without moving it to the foreground, then all you need do is create a normal text link in the space where your background image would of been.... be sure to use the ID tag in the link... (id="nolinkImage")

<a href="http://www.mysite.com" title="my web site name or SEO" id="nolinkImage">my web site name or SEO title</a>

remove the background image in the stylesheet you already have for that space and add the ID tag for the link. We will create a box for the link.... you need this box to be the same size of ether the space or the image... say my image is 850 wide and 98 high, then so should be my box. next, we don't want to see the words, so we move them off stage...

#nolinkImage {
 background-image:url(mybackground.jpg);
background-repeat: no-repeat;
display:block;
height:98px;
width:850px;
text-indent:-9999px;
}

The link goes in your template includes\templates\MY_TEMPLATE\common\tpl_header.php
and the style goes in your includes\templates\MY_TEMPLATE\css\stylesheet.css

Thanks, stiggy100 and davewest.

Davewest, unless you're referring to my background cart image, I'm not trying to make my whole background clickable, just the 30px X 30px cart image. It sits to the right of my header logo (I want the header logo to continue to point to Home when clicked, but the little cart logo needs to take the customer to their cart).

Here's a screenshot. The blue "Shopping Cart, Home, and Login" texts are links, but I can't do a thing with that blasted image..! lol

I'll try what you suggested, in case you were in fact referring to the image.

Thanks again, everyone!

-DBB1

[DBB1]

Here's a screenshot. The blue "Shopping Cart, Home, and Login" texts are links, but I can't do a thing with that blasted image..! lol

So, the thing to do it seems, would be to remove the cart graphic from CSS, and add it alongside my logo header graphic, in tpl_header, and try to address it there, correct?

-DBB1

[davewest]

So, the thing to do it seems, would be to remove the cart graphic from CSS, and add it alongside my logo header graphic, in tpl_header, and try to address it there, correct?

-DBB1

basically, yes... Not seeing the code or how its laid out other then your image makes it kind of hard...

This is how I did mine... look for the shopping cart code, it should be in includes\templates\MY_TEMPLATE\common\tpl_header.php

should look something like this...

<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>

I added a image in front of the shopping cart text, the bit in red...

<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES .'cart.png', 'Shopping Cart') . '&nbsp;' . HEADER_TITLE_CART_CONTENTS; ?></a>

On mine I have everything in one long line, you may have to do the image by its self are play around a bit to get things lined up right.