Rollover images in navMain.

[XjamathonX]

So i've been learning quite a bit about the ins and outs of Zen cart customization but have recently ran into a snag.. While I've been able to use CSS roll overs for some main navigation changes in the header for categories and pages, for the life of me I can't figure out how to change the Home, Log In etc links in the header..

I know they are located in the "navMain" div and are structured in the form of an unordered list.. I just can't seem to use a roll over image for them instead of a text link. I've done numerous changes to the tpl_header and css files but just can't seem to get it work.. I've also searched for anyone using any valuable code in the first 5 pages of the showcase, but everything so far seemed fairly stock and even the highly customized stores still have text links for those.. Is it possible to use images for those links with roll overs css or otherwise?

Thanks in advance for any and all help, it's greatly appreciated!
Jonathan

[XjamathonX]

I think I've found ways through searching to replace with a static image, but nothing so far with a roll over.. CSS or otherwise.. Any ideas?

[dbltoe]

Might want to keep in mind that search engines have a difficult time navigating a site with images and dropdowns as links.

[Spo0f]

im lookin to do this but in the catagorie nav, im going insane trying to find out!! no one has any suggestions.

good luck

Elliot

[XjamathonX]

Might want to keep in mind that search engines have a difficult time navigating a site with images and dropdowns as links.

I'll definitely place alt tags to somewhat help the links.. And honestly I'm trying to figure out how to replace "Home" "Log in" and "Log Out" so I don't know how much that would help with search engines anyway..

I've been able to do every trick in my book to figure out how to replace the images with a trsnparent gif then try and attach id's using css rollover background but for whatever reason there is space, like there's text as a place holder pushing my images down even though there shouldn't be any text there.. Anyone EVER been able to make this work?

[XjamathonX]

im lookin to do this but in the catagorie nav, im going insane trying to find out!! no one has any suggestions.

good luck

Elliot

If you're trying to do what I think I was able to simply replace the php links in the tpl_header file with actual image based links and that worked like a champ for me...

Jonathan

[dbltoe]

The are the lines of code in the tpl_header.php file that put the home link at the top of the page.

<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>

The first thing to remember is to save the changes to includes/templates/yourtemplate/common/.
Secondly, you are going to change the php variables to html text. For instance, you might want to change

' . HTTP_SERVER . DIR_WS_CATALOG . '

Notice that php inside html has single quotes to separate the php from the html. Also, note the " . " (space-period-space) on either side of the variable. You would need to replace all of that so that

<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?>

would become

<a href="http://www.wherever.com/somedirectory">

Common mistakes are removing the <li>'s and breaking the un-ordered list AND not removing the php code (in red at both ends of the example above). Either will make your code unattractive in at least IE.
You could give the <li>'s a class so that you could define the hovers, etc.

[XjamathonX]

The are the lines of code in the tpl_header.php file that put the home link at the top of the page.
The first thing to remember is to save the changes to includes/templates/yourtemplate/common/.
Secondly, you are going to change the php variables to html text. For instance, you might want to change
Notice that php inside html has single quotes to separate the php from the html. Also, note the " . " (space-period-space) on either side of the variable. You would need to replace all of that so that would become
Common mistakes are removing the <li>'s and breaking the un-ordered list AND not removing the php code (in red at both ends of the example above). Either will make your code unattractive in at least IE.
You could give the <li>'s a class so that you could define the hovers, etc.

Ahh i think i get it.. So if I am understanding correctly I would need to change the PHP links to more traditional "hardcoded links" to get my css roll overs to work properly? That's what was done to get the normal categories listing to function correctly.. My only problem then would be how do I get the "if" links to show up.. for instance once you add an item to the cart and the extra links pop up.. how would I get them to function with the same roll over coding?

Why is it that the php links don't respond to the same css and class styles that html links do? Is that just the nature of the beast?thanks so much for taking the time to help...
Jonathan

[dbltoe]

Ahh i think i get it.. So if I am understanding correctly I would need to change the PHP links to more traditional "hardcoded links" to get my css roll overs to work properly? That's what was done to get the normal categories listing to function correctly.. My only problem then would be how do I get the "if" links to show up.. for instance once you add an item to the cart and the extra links pop up.. how would I get them to function with the same roll over coding?

Why is it that the php links don't respond to the same css and class styles that html links do? Is that just the nature of the beast?thanks so much for taking the time to help...
Jonathan

I was talking hard-coding since you were wanting images versus text. It's easier when using images to change the links in the header or footer than to start changing all the variables. Plus the header and footer can be saved to your override directory.

Rollover (or hover in CSS) can be done to both php and html. php links are no longer php when they reach the browser. They've been server-side munged to html for presentation to the browser. The problem lies in folks not converting the tpl_ file properly and leaving some php behind or removing the <li>. The leftover portions of php screw up the html presentation.

Sorry if I wasn't clear before.

[XjamathonX]

I was talking hard-coding since you were wanting images versus text. It's easier when using images to change the links in the header or footer than to start changing all the variables. Plus the header and footer can be saved to your override directory.

Rollover (or hover in CSS) can be done to both php and html. php links are no longer php when they reach the browser. They've been server-side munged to html for presentation to the browser. The problem lies in folks not converting the tpl_ file properly and leaving some php behind or removing the <li>. The leftover portions of php screw up the html presentation.

Sorry if I wasn't clear before.

Sorry if I am missing something simple with this, but I've managed to convert the links to hard coded html.. For some reason no matter what technique I use to get my roll overs or even static images to show.. I am not sure if I am doing my path wrong to my images or what but no CSS or even direct linking has been able to produce an image.. I can get text links, but no images..

All of my images are currently under include/templates/custom/images.. Not sure if it's a path problem or what but any help in addition to everything you have already provided would be great.. Thanks again!

Jonathan