Need EzPages Header and Footer Text Links to be Images

[C_R_C]

Alright, I have researched this for hours and hours but I am still not finding a definitive solution to what I want. I want my EzPages Header and Footer Text Links to be images and for them to change to another image when moused over or clicked. LIKE THIS SITE

Not sure if it matters or not, but these links originated as Sidebox items and I linked them to there.

Note that I am a complete NEWBIE, so break it down as much as possible for me. Also, would the best way to prepare the images to be to divide the number of pixels across by the number of images I need to get the spacing right?

As a side, I would also like to know how to do the Image Box with the 3 scrolling Images in there that is clickable LIKE THIS SITE
It was in the Zencart showcase and thought that it was pretty stylish the way the images scrolled and was clickable

I am running Zencart 1.3.8a, my site is http://www.customreflection.com

[C_R_C]

Contacted a zencart site owner that has successfully completed this type of thing. I got it working without mouseover effects, but I am going to change it to this format described in the email I will put below for others to try as well. Thanks to Ginny at Customk9design.com!



changing the text to images is ultimately done thru your css page... you have to assign an image to that spot, additionally, you have to edit the header file.
for example, the code from my tpl_header.php file is: (determine the url for the href by manually going to the ezpage you want, such as 'about us' and noting the url- its the only way to figure out that 'about us' is id=2... for example)

<!--bof-header ezpage links-->
<div id="topbar">
<ul id="topMenuStyle">
<li><a id="item1" href='http://customk9design.com/catalogzen/index.php?main_page=page&amp;id=2'><span class="alt">About Us</span></a></li>
<li><a id="item2" href='http://customk9design.com/catalogzen/index.php?main_page=page&amp;id=3'><span class="alt">Lifetime Guarantee</span></a></li>
<li><a id="item3" href='http://customk9design.com/catalogzen/index.php?main_page=page&amp;id=5'><span class="alt">Eco Friendly</span></a></li>
<li><a id="item4" href='http://customk9design.com/catalogzen/index.php?main_page=contact_us'><span class="alt">Contact Us</span></a></li>
<li><a id="item7" href='http://customk9design.com/catalogzen/index.php?main_page=page&amp;id=10'><span class="alt">FAQ&apos;s</span></a></li>
<li><a id="item5" href='http://customk9design.com/catalogzen/index.php?main_page=advanced_search&amp;search_in_description=1&amp;keyword=Ente r%20search%20keywords%20here'><span class="alt">Search</span></a></li>
<li><a id="item6" href='http://customk9design.com/catalogzen/index.php?main_page=shopping_cart'><span class="alt">Shopping Cart</span></a></li>
</ul>
</div>
<!--eof-header ezpage links-->

and you need to add this to your css (change each 'background url' to your own image):

#topMenuStyle {
margin:0px;
padding-left: 5px;
}
#topMenuStyle li {
display: inline;
list-style-type: none; /*removes the bullets*/
}

a#item1 {
display: block;
width: 112px;
height: 35px;
background: url(/catalogzen/includes/templates/darkness/images/aboutusboth.gif) top left no-repeat;
margin: 0 auto;
float: left;
}
a#item1:hover {
background-position: -112px 0;
}
a#item2 {
display: block;
width: 112px;
height: 35px;
background: url(/catalogzen/includes/templates/darkness/images/lifeguarboth.gif) top left no-repeat;
margin: 0 auto;
float: left;
}
a#item2:hover {
background-position: -112px 0;
}
a#item3 {
display: block;
width: 112px;
height: 35px;
background: url(/catalogzen/includes/templates/darkness/images/ecofriendlyboth.gif) top left no-repeat;
margin: 0 auto;
float: left;
}
a#item3:hover {
background-position: -112px 0;
}
a#item4 {
display: block;
width: 112px;
height: 35px;
background: url(/catalogzen/includes/templates/darkness/images/contactusboth.gif) top left no-repeat;
margin: 0 auto;
float: left;
}
a#item4:hover {
background-position: -112px 0;
}
a#item5 {
display: block;
width: 112px;
height: 35px;
background: url(/catalogzen/includes/templates/darkness/images/searchboth.gif) top left no-repeat;
margin: 0 auto;
float: left;
}
a#item5:hover {
background-position: -112px 0;
}
a#item6 {
display: block;
width: 112px;
height: 35px;
background: url(/catalogzen/includes/templates/darkness/images/shoppingcartboth.gif) top left no-repeat;
margin: 0 auto;
float: left;
}
a#item6:hover {
background-position: -112px 0;
}
a#item7 {
display: block;
width: 112px;
height: 35px;
background: url(/catalogzen/includes/templates/darkness/images/faqboth.gif) top left no-repeat;
margin: 0 auto;
float: left;
}
a#item7:hover {
background-position: -112px 0;
}
a .alt { display: none; }




you will note that the hover just asks the background position to shift by -112px 0; this allows me to use one image, that gets 'slid' back and forth... this prevents slow loading and flickering of images on mouseover. you will have to adjust the pixels in the above code to suit the size of the image you decide to make. if you go to my page and right click on one of those buttons and say 'view image' you will see the whole image, regular and mouseover as one.

[C_R_C]

Worked absolutely Great!

I followed the outline and code given and it worked. The look is awesome.

The only thing that you may look out for is, if you just copy the code over into your files like I did, is that the Item Order was 1,2,3,4,7,5,6 for some reason so don't freak out when two of your images are reversed. Just correct the order. Also, as far as the image preparation goes, to clarify this just a bit since I could not see the images that he told me to look at. Prepare your images side by side, like A next to B like this AB.

Basically what happens with the
a#item1 {
display: block;
width: 112px;
height: 35px;
is it just gives room to display the left part of the image, ie the A. So, for this image you actual prepared image will be 224px X 35px

then the
a#item1:hover {
background-position: -112px 0;
slides the A out of view and shows the right side of the image, ie the B

Hope that makes sense, might be obvious to some but for a newbie like me explanations into great detail are very beneficial.

Note that you must also turn off the EZpages header bar in Admin so that it no longer shows

You can check it out at http://www.customreflection.com