Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

2.3.1: A "How To..." Road Map...(NO QUESTIONS, JUST HOW TO'S PLEASE)


ErikMM

Recommended Posts

71. (or 34 update). Product Attributes for 2.3.x (works on 2.3.3) that are not laborious. Awesome. here: http://addons.oscommerce.com/info/4063

Web Developer, Firebug, and Notepad++ are powerful free tools for web design.

Link to comment
Share on other sites

  • Replies 52
  • Created
  • Last Reply

72. Store logo swap image on hover. When customers hover over your store logo, this will swap the logo image for any other image you want, like another color of the same logo etc.. When they mouse over the logo your store's logo will disappear and be replaced by another image or different version of your logo:

 

catalog/stylesheet

#homeheaderswap:hover {
background:url(http://yourimage.png or jpg etc);background-size: 420px 68px; background-repeat:no-repeat; background-position:center;
}/*background-size only needed if you want to shrink to match store logo size--best to just do with photoshop beforehand*/


#storeLogo {
margin-top: 5px;
text-align:center
;}/*magin is up to you*/

#storeLogo:hover {
text-indent:-9999px;
}/*hides logo when hover image appears*/

 

cat/includes/header

replace this

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

with this

<a href="index.php" title="home" alt="link to home page"><div id="homeheaderswap"><div id="storeLogo"><?php echo tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME); ?></div></div></a>

Web Developer, Firebug, and Notepad++ are powerful free tools for web design.

Link to comment
Share on other sites

73. This is a simpler way to change your logo on hover as in #72, but just uses opacity:

 

just add this to your cat/stylesheet (prefrably below #storeLogo {margin-top: 5px; text-align:center;} )

#storeLogo:hover {
opacity:0.6;
}

 

you can play with opacity settings

0.1 is almost transparent, 0.9 is almost opaque

 

You can go backwards too, in other words starting with a more transparent logo (0.6), and going normal on hover

like this

#storeLogo {
margin-top: 5px; text-align:center; opacity:0.6;
}
#storeLogo:hover {
opacity:1;
}

Web Developer, Firebug, and Notepad++ are powerful free tools for web design.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...