Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Uploading a sliced up header to my shop - confused


katman1971

Recommended Posts

Hi

Version 2.3.1

I created a header and sliced up the buttons in photoshop. When adding the header via the admin panel it only allows me to select one image. Do I save my header as one .png file (without the slices)? And then do I seperately upload the sliced buttons to the images folder separately?

 

I know I then need to add code like this to my includes/header.php to make the buttons clickable:

<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'button.png') . '</a>'; ?>

 

Thanks

Link to comment
Share on other sites

@

 

The log upload feature is NOT designed to handle sliced images. In fact, the header is only designed to display a logo 257x60. If you are going to use a PSD image, you will need to rewrite portions of the header.php to contain the new image and layout.

 

 

Chris

Link to comment
Share on other sites

@

 

The log upload feature is NOT designed to handle sliced images. In fact, the header is only designed to display a logo 257x60. If you are going to use a PSD image, you will need to rewrite portions of the header.php to contain the new image and layout.

 

 

Chris

 

Thanks Chris. I think I'll leave the sliced images alone. I wouldn't know where to start to re-write the header.php. Could I make the header part of a background image? Would you advise this? Do people do this? Thanks.

Link to comment
Share on other sites

Thanks Chris. I think I'll leave the sliced images alone. I wouldn't know where to start to re-write the header.php. Could I make the header part of a background image? Would you advise this? Do people do this? Thanks.

 

People do that all the time.. Hell I even use my own navigation menu in the header. See rubberstore.com (this is a Live 2.3.1 shop) or my test site at onlinegamekey.com/index/index.php (this has a background image)

Link to comment
Share on other sites

Don

Looks great. With rubberstore.com , did you create the header and the buttons in something like photoshop and slice the image up and then re-write portions of the header.php? Or did you create the header as a single .png file and then create the buttons some other way?

 

Thanks..

Link to comment
Share on other sites

Hi Jim, logo and buttons were made in Photoshop. I just added them with proper linking structure to the header by adding new div layers in the header.php file.

 

It is as easy as coding html and css, javascript, the only thing to note is the way links work in Oscommerce that is you need to use tep_href_link function to ensure you don't lose the Session.

 

See more at ClubOsc here: http://www.clubosc.com/cookies-links-session-ids.html

Link to comment
Share on other sites

Thanks Don. I created a header in photoshop and I sliced up the buttons getting ready to upload to my server but the Store Logo in the admin area only allows me to select one file / image to upload. Do you save the entire header and buttons as one .png file and upload via the admin area, and then manually upload the individual buttons manually to the images folder? How would you recommend I do that? Thanks.

Link to comment
Share on other sites

This is our header.php file.. hopefully it can help..

 

<?php
/*
 $Id$

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2010 osCommerce

 Released under the GNU General Public License
*/
$productno = $cart->count_contents();
$totalprice = $currencies->format($cart->show_total());

 if ($messageStack->size('header') > 0) {
echo '<div class="grid_24">' . $messageStack->output('header') . '</div>';
 }
?>
<script language="Javascript">
function doClear(theText) {
 if (theText.value == theText.defaultValue) {
	 theText.value = ""
 }
}
</script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language=JavaScript>
<!--
function clear_textbox()
{
if (document.u_input.value == "Enter Part Number")
document.u_input.value = "";
}
-->
</script>
<?php /*** Begin Header Tags SEO ***/
if (HEADER_TAGS_DISPLAY_PAGE_TOP_TITLE == 'true') {
?>
<div style="text-align:center; color:#aaa; font-size:10px;"><?php echo $header_tags_array['title']; ?></div>
<?php
}
/*** End Header Tags SEO ***/
?>
<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', (tep_not_null($header_tags_array['logo_text']) ? $header_tags_array['logo_text'] : STORE_NAME)) . '</a>'; ?></div>
 <?php /*** End Header Tags SEO ***/ ?>
<div style="float:right; padding-right:5px;"><span class="defaults_itl">Search by Design Criteria: </span><a href="<?php echo tep_href_link(FILENAME_PRODUCT_SEARCH);?>" target="_self"><img src="images/Index/Product_Search.gif" alt="Orings, Rubber Bellow, Product Search" border="0" width="157" height="20"></a><BR /><BR /></div>
<div style="clear:right;"></div>
<div class="defaults_itl" style="float:right;">Search by Part # <?php echo tep_draw_form('search', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="25" name="input" value="Enter Part Number" onFocus="doClear(this)" maxlength="60" style="color: #a7a6a6;" style="width: ' . (BOX_WIDTH+155) . 'px"') . tep_hide_session_id() .'</form>'; ?></div>
<div style="clear:right;"></div>
<div style="float:right; margin-right:30%; margin-top:-20px;">
<div style="text-align:left;"><?php echo tep_customer_greeting(); ?>  <?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><span class="defaults"><?php echo HEADER_TITLE_LOGOFF; ?></span></a> <?php } ?></div>
</div>
<div style="clear:both;"></div>

<div style="float:left; background-color:#000; height:28px; width:75%;">
<div style="margin-top:-1px"><a href="<?php echo tep_href_link(FILENAME_DEFAULT);?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/Navigation_Template/mn_home_over.gif',1)"><img src="images/Navigation_Template/mn_home.gif" alt="Home -TheRubberStore.com" name="Home" width="79" height="29" border="0"></a><a href="<?php echo tep_href_link(FILENAME_ACCOUNT);?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('MyAccount','','images/Navigation_Template/mn_myaccount_over.gif',1)"><img src="images/Navigation_Template/mn_myaccount.gif" alt="My Account -TheRubberStore.com" name="MyAccount" width="115" height="29" border="0"></a><a href="<?php echo tep_href_link(FILENAME_CONTACT_US);?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/Navigation_Template/mn_contacts_over.gif',1)"><img src="images/Navigation_Template/mn_contacts.gif" alt="Contact Us - RubberStore.com" name="Contact" width="108" height="29" border="0"></a><a href="<?php echo tep_href_link(FILENAME_MADE_TO_PRINT); ?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('MadeToPrint','','images/Navigation_Template/mn_madetoprint_over.gif',1)"><img src="images/Navigation_Template/mn_madetoprint.gif" alt="Made-To-Print Custom Rubber Parts - RubberStore.com" name="MadeToPrint" width="108" height="29" border="0"></a>
</div>
</div>

 <div  style="float:right; margin-left:-1%;  border-top:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; height:26px; width:25%;">
<div style="margin-top:3px; margin-left:10px;">  <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART);?>" target="_self"><img src="images/Navigation_Template/mn_cart-2.gif" alt="Rubber Store - Shopping Cart" border="0"></a></div>
<div style="margin-right:5px; margin-top:-15px; text-align:right;"> Items: <?php echo $productno ?>   Total: <?php echo $totalprice ?> | <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART);?>" target="_self" style="color: #000000; font-family: Arial; font-weight: bold;"> View Cart</a>
</div>
</div>

 <div style="clear:both;"></div>
 </div>
<?php include_once(DIR_WS_INCLUDES . 'sub_header.php'); ?>
<div class="grid_24 ui-widget infoBoxContainer">
 <div class="ui-widget-header infoBoxHeading" style="margin-top:2px;"><?php echo $breadcrumb->trail(' » '); ?></div>
</div>
<?php
 if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr class="headerError">
<td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>
 </tr>
</table>
<?php
 }
 if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr class="headerInfo">
<td class="headerInfo"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>
 </tr>
</table>
<?php
 }
?>

Link to comment
Share on other sites

An alternate approach would be to use a single image and alter the code to use an "image map" for the buttons and other links.

 

It's not that difficult.

 

I could link you to a thread I posted that shows an example if you want.

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

Click Me

 

Of course the image coordinates for your image would be different.

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

@@germ

 

Jim, I had a look at that post and I have a question regarding the coordinates. For example:

 

 

<area shape="rect" coords="623,172,648,200" target="_blank" href="<?php echo $link1; ?>" alt="<?php echo $alt1; ?>" title="<?php echo $alt1; ?>" />

 

Regarding "coords="623,172,648,200". These are obviously the coords of the rectangle button. Do I go to the 4 corners of my rectangle shaped button and take the coords of the 4 corners? These are the pixel coordinates of my 4 corners but they're not in the same format as the coords in your example:

(148,135.... 243,134.....242,174....148,174). Where am i going wrong? Thanks

Link to comment
Share on other sites

The coordinates are taken from the upper/left corner of the image. For a rectangle the coordinates specify the upper/left, lower/right corner of the rectangle. A little explanation here

 

I have also used the online tool here when I was in a hurry a time or two.

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

Archived

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

×
×
  • Create New...