Swap Sidebox Heading Image

[aussiewench]

I am using an image in my sidebox headings and I want to be able to have that image swap to another on mouseover but only for the headings which are links, as in the Reviews. I've looked at so many things I'm going crosseyed.

Total n00b when it comes to ZC and CSS I'm getting there....having fun with lots of boo boos along the way. Here's what I have so far. I've only just started so there is little content or little of anything for that matter. http://www.ibond2u.com/fbi/

Thanks in advance for any and all assistance

[jacdesigner]

If you are a newbie to CSS this might take some practice but here is how I would do it... setup a new style in your style sheet for a new link style that has a hover state with the alternate image. For example:

a.linkstyletwo:link {
all of your css attributes will be here
}

a.linkstyletwo:hover {
all of your attributes for this state will be here including the image url
}

Then, within the link code (href) for that particular link, you just need to assign that style.

Hope this is a plausable solution for you. Best of luck.

[aussiewench]

jacdesigner

Practice is an understatement hahaha Thanks for the help hun, I'm sure it is plausable once I understand half of it Damm I only just got html down pat just about....css is confusing me somewhat as is php and having to put things all over the place in different folders to make things work. I do love zencart though Now Im back to making boo boos so I can eventually get a handle on this step.

[jacdesigner]

Don't worry, I understand completely. Although I am a professional designer, there was a time when CSS made my head spin. I will say that I have not tried to implement the link style I suggested into a Zencart stylesheet before, but I can't think of a reason that it would not work since it is standard CSS technique.

Perhaps it would be more helpful if I show you some examples from the web, from resources that I have sometimes referred to..

Here is a basic intro to how link styles work:
http://www.echoecho.com/csslinks.htm

Then, if you can imagine that each additional link style will just have another name following a dot, like this:

a.linkstylename:link

As for the attributes of the style, I think a format like this will probably work:

A.catagory-top:link {
background-image: url('/images/image.gif');
text-decoration: none;
color: #FFFFFF;
display: block;
}

A.catagory-top:visited {
background-image: url('/images/image.gif');
text-decoration: none;
color: #FFFFFF;
display: block;
}

A.category-top:hover {
background-image: url('/images/image_over.gif');
text-decoration: none;
color: #FFFFFF;
display: block;
}

...
The way I have it here, it is using a background image and then a text link on top of that. The color attribute is the color for the text link. The "none" just means that the link will not be underlined, so it won't look as "texty". This was the easiest way I could think to make this work. There are a lot of other attributes in the styles that you might need to add or play with to get it looking just right, such as padding or margins. I suggest searching the web for tutorials to help you with that as you go.

I am not 100% certain since I am not testing this right now, but I think that the "catagory-top" style in Zencart represents those top links in the boxes....and I think that's what you wanted....you might have to try this out on different things to see what happens.....just save backups as you go. :)

I hope this helps to get you moving in the right direction at least.

-Jackie

-----
PS: This is just one way I could think to accomplish link minipulation with CSS techniques....but you could also do what some others have done and mess with javascript rollovers and such...I won't try to right a tutorial on that though.

Good luck!

[aussiewench]

Jackie

Couldn't get it working. But have saved the thread to favorites for reference as I WILL master it. Thank you for your help on this, much appreciated. As I'm learning and this is my first attempt at CSS and a shopping cart of any description, my ideas are changing rapidly as I figure things out. I dont have actual products to sell, only one document, but that one document is the centerpiece of my project and zen cart seems to suit my purposes all round. A masterpiece in process.......just wonder how long it will take to reach that status hahaha.

Curious, when you said 'mess with javascript', where would I put that code, do you know? (finally a term I understand)

Lorelle

[jacdesigner]

Hey, Lorelle,

I just hope that some of my explanation proves useful in the future. As for the javascript, I won't pretend to be a javascript expert. I have some experience with creating some basic javascripts and using rollover scripts, but I have never attempted to reference them in a ZenCart template.

I might suggest looking for a template that another person has designed with javascript rollover elements in it and referencing that as a starting point. I am sure a lot of designers/developers on this community offer either free templates or example templates.....at least, that would be neato for practicing!

The best I can guess is that you would save the script in a separate .js file somewhere in your custom template directory and then reference to that file through the stylesheet....or through the php template for that specific sidebox?.....I am sure that is the general direction...one can hope.

Good luck - share your design with us when you are finished!