PDA

View Full Version : Category Tree Rollovers

wiz88
03-31-06, 04:13 AM
I have the category tree mod from Emporium Plus (William).

I can't seem to find out what the code is or where to put it for rollovers
using the tree mod. He told me that there are two ways of doing this. One using CSS but he is not willing to spell it out for me. The other Jscript.

The first person to help me with this get a Free bottle of hot sauce:D

Wayne
http://www.hotspotalley.com
jason - jmh web services
03-31-06, 04:16 AM
I have the category tree mod from Emporium Plus (William).

I can't seem to find out what the code is or where to put it for rollovers
using the tree mod. He told me that there are two ways of doing this. One using CSS but he is not willing to spell it out for me. The other Jscript.

The first person to help me with this get a Free bottle of hot sauce:D

Wayne
http://www.hotspotalley.com

Use css and not javascript. Surround the category tree with a div statement

<div id="pig">
category tree code
</div>


In the head tag area, define the css for the links

Jason
Bruce - PhosphorMedia
03-31-06, 04:37 AM
I beleive that with William's module, you can assign class statements to the <a href..> tags. For example add class="cat" so that it outputs <a class="cat" href=" the link goes here">Cat Name</a>. Then somewhere above before the actual links are displayed, add:

<style>
a.cat:link { color: #FFFFCE; text-decoration: none }
a.cat:visited { color: #FFFFCE; text-decoration: none }
a.cat:active { color: #CCFFCC; text-decoration: none }
a.cat:hover { color: #FFFF63; text-decoration: none }
</style>

change the color according to your design. You can also use elements such as background-color: blue on the hover to have the whole Cat Name area reverse out in color.

Try implementing the above, and as I mentioned, play with the colors, then consult a CSS guide for more juicy tidbits.
wiz88
03-31-06, 04:42 AM
I still don't see how that gives me a rollover in the category tree?

Wayne
Bruce - PhosphorMedia
03-31-06, 05:09 AM
Who are you replying too? You need to either use Quote, or reply to the post FROM the post itself...perhaps switching to threaded view in your User CP section would help.
wiz88
03-31-06, 05:17 AM
Who are you replying too? You need to either use Quote, or reply to the post FROM the post itself...perhaps switching to threaded view in your User CP section would help.

Thanks, I was replying to you
Bruce - PhosphorMedia
03-31-06, 05:29 AM
Well, it doesn't create a graphical "rollover" but it can produce simular results....try using:

a.cat:link { color: #000000; text-decoration: none }
a.cat:visited { color: #000000; text-decoration: none }
a.cat:active { color: #000000; text-decoration: none }
a.cat:hover { background-color: #FFFF00; color: #FF0000; text-decoration: none }
wcw
03-31-06, 03:10 PM
It was already spelled out when I posted a javascript example to the user list and someone else posted a css example. I told you the css example was the way to go. I don't have my javascript example that I posted handy so here is something similar. Obviously you can use the paths in this example because they are not real domains and they are examples of shortlinks use in my store. So the example is for how to put the mouse on and off in the tag. Start by putting the javascript function at the beginning of the tree.

<script LANGUAGE="JavaScript">

function imgswap(imgNumber, imgsource)
{
document[imgNumber].src = imgsource
}

</SCRIPT>

Then include the onMouseOver and onMouseOut javascript code for each tree link where an image is involved.

<mvt:if expr="NOT ISNULL l.settings:parent:tree_image">

<a href="http://www.xxx.com/c/&mvta:parent:code;/&mvta:parent:name;.html"
onMouseOver="imgswap('&mvte:parent:code;', 'http://www.xxx.com/tk3/&mvte:parent:code;_on.gif'); return true;" onMouseOut="imgswap('&mvte:parent:code;','http://www.xxx.com/tk3/&mvte:parent:code;.gif'); return true;"><img BORDER=0 name="&mvte:parent:code;" ALT="Software" SRC="http://www.xxx.com/tk3/&mvte:parent:code;.gif" return true;></a>

<mvt:else />

<a href="http://www.xxx.com/c/&mvta:parent:code;/&mvta:parent:name;.html">
<u>&mvt:parent:name;</u></a>

</mvt:if>

Then, as I said before, don't use the javasript above and use the css example that was posted by someone else on the user list a couple weeks ago. It was easier to follow and probably more up to date.
AmperorDirect.com
04-01-06, 07:18 PM
CSS is by far your best option. Using Bill's module you can have a setup like:

<div id="vnav">
<ul>
<li>CATEGORY ONE</li>
<li>CATEGORY TWO</li>
<ul>
<li>SUB A</li>
<li>SUB B</li>
<ul>
<li>SUB-SUB 1</li>
<li>SUB-SUB 2</li>
</ul>
<li>SUB C</li>
<li>SUB D</li>
</ul>
<li>CATEGORY THREE</li>
</ul>
</div>

CSS sheet (obviously not formated right)

#VNAV
blah, blah, blah

#VNAV UL
blah, blah, blah

#VNAV UL LI A
blah, blah, blah

#VNAV UL LI A:Hover
blah, blah, blah

#VNAV UL UL
blah, blah, blah

#VNAV UL UL LI A
blah, blah, blah

#VNAV UL UL LI A:Hover
blah, blah, blah

etc... etc... search Google for CSS list manger... lots of good samples
sebenza
04-01-06, 08:30 PM
http://www.btosports.com uses our Category Tree Template (http://www.sebenza.com/products/SS-CATTREE5.html?a_aid=forum) module and CSS for their left nav and it looks pretty good.
wcw
04-01-06, 08:38 PM
The key question is what is the specific css you are using? He has the specific javascript but most agree a css method would be better. He is asking what template code is differentiating whether to show the on or off as it would be the same in all tree templates?
AmperorDirect.com
04-01-06, 09:03 PM
I see what the issue is now... dynamically created menu (using images) that need an image rollover effect.

Ok.. thinking things through while typing...

CSS will need individual entries for each image.... how about this...

CSS Page
.CAT_CODE (hard coded for each of your category codes)
.CAT_CODE A:HOVER
{INSERT BACKGROUND IMAGE syntax and other effects}
.CAT_CODE A:ACTIVE
{INSERT BACKGROUND IMAGE syntax and other effects}

BILL's Module [This requires the use of a background image and a transparent placeholder.]
<img src="&mvt:child1:tree_image;" border="0" class="&mvt:Category_Code=&mvta:child1:code;">

I think that would work... your entries inside your CSS would have to equal your category code... and you would need to add the 'class' syntax to all your image references in Bill's module - child1, child2, child3, etc.

Give it a go! Let me know if it works.
Red Flare
04-02-06, 02:17 PM
It was already spelled out when I posted a javascript example to the user list and someone else posted a css example.

here is the example posted on the user list:
William Weiland
to merchant5-users

The tree rollovers can be done. See
http://www.pinemporium.com/mm5/merchant.mvc?Screen=SFNT&Store_Code=PE
I only have one category image in that tree, but I made it so it is a
rollover.

1) Your category tree images (on and off) need to be some variation of
your category code (case sensitive). So as example you have a category
code of 1AA, you'll need a 1AA.gif and 1AA_on.gif.

2) An odd issue with javeacript in a MM5 template is you cannot use the
html comment tags. Leave off the <!-- and //--> Anybody have any
thoughts on why this is. With the comment tags, the function does not
run. Without, it is fine. So what is the downside of not having the
comment tags?
wiz88
04-02-06, 05:23 PM
I used the code. Pasted the script in at the top of the
category tree. Then pasted this code under the lines you listed.
Then the tree comes upi with 2 columns of buttons?

img is the image directory:

<a href="http://www.hotspotalley.com/c/100A/Hot+Sauces.html" onMouseOver="imgswap('100A', 'http://www.hotspotalley.com/img/100A_on.gif'); return true;" onMouseOut="imgswap('1AA','http://www.hotspotalley.com/img/100A.gif'); return true;"><img BORDER=0 name="100A" ALT="Hot Sauce" SRC="http://www.hotspotalley.com/img/100A.gif" return true;></a>







It was already spelled out when I posted a javascript example to the user list and someone else posted a css example. I told you the css example was the way to go. I don't have my javascript example that I posted handy so here is something similar. Obviously you can use the paths in this example because they are not real domains and they are examples of shortlinks use in my store. So the example is for how to put the mouse on and off in the tag. Start by putting the javascript function at the beginning of the tree.

<script LANGUAGE="JavaScript">

function imgswap(imgNumber, imgsource)
{
document[imgNumber].src = imgsource
}

</SCRIPT>

Then include the onMouseOver and onMouseOut javascript code for each tree link where an image is involved.

<mvt:if expr="NOT ISNULL l.settings:parent:tree_image">

<a href="http://www.xxx.com/c/&mvta:parent:code;/&mvta:parent:name;.html"
onMouseOver="imgswap('&mvte:parent:code;', 'http://www.xxx.com/tk3/&mvte:parent:code;_on.gif'); return true;" onMouseOut="imgswap('&mvte:parent:code;','http://www.xxx.com/tk3/&mvte:parent:code;.gif'); return true;"><img BORDER=0 name="&mvte:parent:code;" ALT="Software" SRC="http://www.xxx.com/tk3/&mvte:parent:code;.gif" return true;></a>

<mvt:else />

<a href="http://www.xxx.com/c/&mvta:parent:code;/&mvta:parent:name;.html">
<u>&mvt:parent:name;</u></a>

</mvt:if>

Then, as I said before, don't use the javasript above and use the css example that was posted by someone else on the user list a couple weeks ago. It was easier to follow and probably more up to date.
wcw
04-02-06, 05:56 PM
The rollover code replaces the line in the template that normally shows the image. So if you have

<a href="http://www.xxx.com/c/&mvta:parent:code;/&mvta:parent:name;.html"
<img BORDER=0 name="&mvte:parent:code;" ALT="&mvta:parent:name;" SRC="http://www.xxx.com/tk3/&mvte:parent:code;.gif"></a>

you replace it with

<a href="http://www.xxx.com/c/&mvta:parent:code;/&mvta:parent:name;.html"
onMouseOver="imgswap('&mvte:parent:code;', 'http://www.xxx.com/tk3/&mvte:parent:code;_on.gif'); return true;" onMouseOut="imgswap('&mvte:parent:code;','http://www.xxx.com/tk3/&mvte:parent:code;.gif'); return true;"><img BORDER=0 name="&mvte:parent:code;" ALT="&mvta:parent:name;" SRC="http://www.xxx.com/tk3/&mvte:parent:code;.gif" return true;></a>

Look at the end of the template and adjust the parent links first, then test to see if you have it correct.

I went to your store and it did not have two columns of buttons so I assume you rolled back the change. Give it a try, this time replacing that link and image.
wiz88
04-02-06, 06:33 PM
Totally confused about the "parent:name" "parent:code
The name of the first category is named " Hot Sauce" with a Category number of "100A"

With this image you only have an underscore? &mvte:parent:code;_on.gif');
wcw
04-02-06, 06:42 PM
Miva Merchant 5.x is a program that is data driven. It holds info about your categories and products in databases. Rather than having to hard code the info in an html file, Merchant dynamically pulls the data from a database to fill into variables. parent:name and parent:code are variables in an array of values pulled from the databases. You put those variable names in the template. As the data array is evaluated from first to last variable, it inserts the values into the template text. Pamela may want to point you to where you can get her book which may go more into detail. There is a learning curve to Miva template editing (just as there is to html and other scripting languages) and it cannot be taught in a forum like this or even email exchanges. You can get the basics, but to do in-depth website design you are going to have to crack the book. You have already created short links in your tree so changing the image display should not be that difficult, given the example I gave you.
wiz88
04-04-06, 12:55 AM
Well I figured out how ro make the rollovers using CSS.

Example:
http://www.hotspotalley.com/test4.htm

I tried placing it in the tree. I had 90 buttons going down the side
where the menu is on :D Well I guess this idea is trashed.




CSS is by far your best option. Using Bill's module you can have a setup like:

<div id="vnav">
<ul>
<li>CATEGORY ONE</li>
<li>CATEGORY TWO</li>
<ul>
<li>SUB A</li>
<li>SUB B</li>
<ul>
<li>SUB-SUB 1</li>
<li>SUB-SUB 2</li>
</ul>
<li>SUB C</li>
<li>SUB D</li>
</ul>
<li>CATEGORY THREE</li>
</ul>
</div>

CSS sheet (obviously not formated right)

#VNAV
blah, blah, blah

#VNAV UL
blah, blah, blah

#VNAV UL LI A
blah, blah, blah

#VNAV UL LI A:Hover
blah, blah, blah

#VNAV UL UL
blah, blah, blah

#VNAV UL UL LI A
blah, blah, blah

#VNAV UL UL LI A:Hover
blah, blah, blah

etc... etc... search Google for CSS list manger... lots of good samples
wcw
04-04-06, 01:47 AM
What is a small snipet of the code you put in the category tree, eg in the parent section at the end?
wiz88
04-04-06, 03:20 AM
I replaced this part like you said with all of the individual links.

replaced:
<a href="http://www.hotspotalley.com/c/&mvta:parent:code;/&mvta:parent:name;.html">
<img src="&mvt:parent:tree_image;" border="0"></a>



With:Linked to the CSS in the (head) tag.

<div id="navbar">
<a id="hs" href="http://www.hotspotalley.com/c/100A/Hot+Sauces.html"><img src="blank.gif" alt="Hot Sauce" border="0"></a>
<br>
<a id="bbq" href="http://www.hotspotalley.com/c/100BQ/BBQ+Sauces.html"><img src="blank.gif" alt="BBQ Sauce" border="0"></a>
<br>
<a id="wing" href="http://www.hotspotalley.com/c/100WG/Wing+Sauce.html"><img src="blank.gif"
alt="Wing Sauce" border="0"></a>
<br>
<a id="sa" href="http://www.hotspotalley.com/c/100S/Salsas.html"><img src="blank.gif"
alt="Salsa" border="0"></a>
<br>
<a id="sp" href="http://www.hotspotalley.com/c/100SP/Spices.html"><img src="blank.gif"
alt="Spices" border="0"></a>
<br>
<a id="sn" href="http://www.hotspotalley.com/c/100thenuts/Snacks.html"><img src="blank.gif"
alt="Snacks" border="0"></a>
<br>
<a id="con" href="http://www.hotspotalley.com/c/100MIX/Condiments.html"><img src="blank.gif"
alt="Condiments" border="0"></a>
<br>
<a id="gf" href="http://www.hotspotalley.com/c/100GIFT/Hot+Gifts.html"><img src="blank.gif"
alt="Hot Gifts" border="0"></a>
<br>
<a id="top" href="http://www.hotspotalley.com/c/100top/Top+Sellers.html"><img src="blank.gif"
alt="Top Sellers" border="0"></a>
<br>
<a id="z" href="http://www.hotspotalley.com/c/HPACOL/Collectible+Hot+Sauce.html"><img src="blank.gif"
alt="Top Sellers" border="0"></a>
</div>

I can post the CSS if you want to see it

Wayne



What is a small snipet of the code you put in the category tree, eg in the parent section at the end?
wcw
04-04-06, 03:36 AM
This is a data driven menu. You don't replace that one line with all of them. That would cause all of those links to display however many parent categories you have. Using your example, you replace that one line with one line. That is going to put the category code as the id value. I don't know how this is doing your rollover, but the id needs to be something available in the database. I don't know where hs came from in your example. I assume you hardcoded it. You need to draw from the database with the values in it. Category code is the logical value to use. The css experts here might be able to shed light on how that ties in with your rollover code.


<a id="&mvta:parent:code;" href="http://www.hotspotalley.com/c/&mvta:parent:code;/&mvta:parent:name;.html">
<img src="blank.gif" alt="&mvt:parent:name;" border="0"></a>