Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How can I upload a banner w/ links?


Guest

Recommended Posts

Hey everyone!

 

Please take a second and look at my page:: http://www.the-broomcloset.com/catalog/index.php

Thanks :]

 

As you can see, I have a header banner that I was hoping to have links to each page, Facebook, Twitter, etc., but of course as a regular PNG it won't have that without its corresponding HTML code. I was wondering, since this is php-based, how can I re-route the clicks to go to their corresponding pages, rather than the store's home? I tried injecting the HTML where it had the 'store_logo.png' in the header, but that didn't work :P What can I do?

 

Thanks!

-Jennifer J.

Link to comment
Share on other sites

Also, the image was made in Illustrator, the icons are individually linked to the website. I thought I'd add that in, so if you know of another way to save the file in order to have the links working, that would be awesome. Though, I know I'm going to have to somehow override the >index.php link.

Link to comment
Share on other sites

Hi Jennifer,

 

You're not going to be able to make the store logo itself act with each section of the image. Oscommerce treats the logo as a image that links to homepage.

 

If I wanted to implement this design. I'd make just the white text the storelogo. Then the full length color with the witch a background layer inside the header and float my social buttons in a div on top of it.

Basically the default oscommerce has pretty much everything you need to do this you'll just need to slice the layers out with Illustrator / Photoshop then implement some css changes.

 

So it would look something like this

 

catalog/includes/header.php

<div id="header" class="grid_24">

 <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>
 <div id="headerShortcuts">
<?php
 echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
  	tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
  	tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

 if (tep_session_is_registered('customer_id')) {
echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
 }
?>
</div>

 

Which is the default layout for oscommerce. What you'll need to do is replace the div headerShortcuts with the correct php code to render your social bookmarks. You can find examples of this code in your products_info.php page but you'll have to modify it to use your buttons and the google +1.

 

Then the CSS for the header which is located in your stylesheet.css

#header {
 height: 250px; /* This is the height of your background image */
 background-image: url('images/background.png'); /*image name*/
}
#storeLogo {
 float: left;
 margin-top: 15px; /* increase this number to get it to center correctly on the Y axis*/
 margin-left: 10px /* increase / decrease this number to it to center correctly on the X-axis */
}

#headerShortcuts {
 float: left; /* floating left should start the buttons right next to where the storelogo ends */
 margin-top: 15px; /* again this is to align it properly on the Y-axis */
}

Hope it helps.

Link to comment
Share on other sites

You can link different parts of the logo by using an image map.

 

I dowloaded your logo to my WAMP server and modified the /catalog/includes/header.php file to use your logo as an image map.

 

Just change this code:

 

  <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

To:

 

  <div id="storeLogo">

<!-- Image map Start - -->
<?php

// define offsite image map links here
 $link1 = 'http://plus.google.com';
 $link2 = 'http://www.facebook.com';
 $link3 = 'http://twitter.com';
 $link4 = 'http://www.other.com';  // edit this, not familiar with the icon used

// define mouseovers here
 $alt1 = 'Google+';
 $alt2 = 'Facebook';
 $alt3 = 'Twitter';
 $alt4 = 'Other';  // edit this, not familiar with the icon used

?>

<img id="Image-Map" src="images/store_logo.png" usemap="#Image-Map" border="0" width="950" height="250" alt="" />
<map id="Image-Map" name="Image-Map">
<area shape="rect" coords="623,172,648,200" target="_blank" href="<?php echo $link1; ?>" alt="<?php echo $alt1; ?>" title="<?php echo $alt1; ?>" />
<area shape="rect" coords="653,172,680,200" target="_blank" href="<?php echo $link2; ?>" alt="<?php echo $alt2; ?>" title="<?php echo $alt2; ?>" />
<area shape="rect" coords="686,170,715,198" target="_blank" href="<?php echo $link3; ?>" alt="<?php echo $alt3; ?>" title="<?php echo $alt3; ?>" />
<area shape="rect" coords="722,170,751,198" target="_blank" href="<?php echo $link4; ?>" alt="<?php echo $alt4; ?>" title="<?php echo $alt4; ?>" />
<area shape="rect" coords="1,1,948,248" href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>" alt="<?php echo STORE_NAME; ?>" title="<?php echo STORE_NAME; ?>" />
</map>
<!-- Image map End - -->

 </div>

I wasn't familiar with the 4th icon you used so I made the code so you can easily modify it.

 

The coords for the sub-links aren't exactly correct (off a pixel or two I'm sure), but unless you're an absolute stickler for accuracy it won't make a lot of difference.

 

This code worked on my local machine with IE7 and FF3.0 - no runs, no drips, no errors...

 

As always backup what you have before making any edits.

:)

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

That's PERFECT! Thank you so much for your help, and now I've learned how to make other links as well using coordinates. Have a great night!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...