X-Cart forums - adding onMouseOver to the category menu

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - adding onMouseOver to the category menu (https://forum.x-cart.com/showthread.php?t=8676)

adding onMouseOver to the category menu

Hey gang,

I have a question, Im trying to add an onMouseOver JS to the category menu template so that whenever someone moves a mouse over a category, a different section in the site will light up and show an img of said category.

Here's my problem, Im not THAT good with the engine, and this script:

{section name=cat_num loop=$categories}
<font class=CategoriesList>{$categories[cat_num].category_name}</font>

{/section}

baffles me.

I know what it does, but I dont know how I can add the mouseover to this, unless I can do it in my JS.

here is my onMouseOver JS so that you might advice me on changing it to fit the php script:

<head section>
<script LANGUAGE="JavaScript" TYPE="text/javascript">

browser = navigator.appName;
if (browser == "Netscape" || (browser == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4 ))
{
if (document.images)
{

pix1 = new Image();
pix1.src ="test1.gif";

pix2 = new Image();
pix2.src ="test2.gif";

pix3 = new Image();
pix3.src ="test3.gif";

pix4 = new Image();
pix4.src ="test4.gif";

pix5 = new Image();
pix5.src ="test5.gif";

pixdefault = new Image();
pixdefault.src ="default.gif";
}
}

// function to change photos
function changePix(i)
{
if (i > "")
{
if (document.images)
{
document['products'].src = eval("pix" + i + ".src");
}
}
else
{
defaultPix();
}
}
function defaultPix()
{
if (document.images)
{
document['products'].src = eval("pixdefault.src");
}
}

// -->
</script>
</head section>

<img section>
test1
</img section>

any assistance will be much appreciated.

Simon
Living Pleasure
x-cart v3.5.9

you can also email me at webmaster@livingpleasure.com

thanks again for all the help :)

dont forget you need to wrap javascript in {literal} tags

Code:

{literal}



your javascript



{/literal}

check smarty.php.net for more info

Yes thanks I know that, just neglected to post it with the rest of the JS code.

still need an answer to my problem tho :)

and I did look and post in smarty.php.net, we'll see how that goes

thanks again

Hi there. I have a similar question, I think. I can't seem to solve my image rollover problem. I developed my page in Dreamweaver, using their way of doing rollover images. I then put the javascript in the <head> area of my home.tpl file, using the {literal} tags thus:

Code:

{literal}<script language="JavaScript" type="text/JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_preload{$ImagesDir}() { //v3.0

  var d=document; if(d.{$ImagesDir}){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preload{$ImagesDir}.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>{/literal}

</HEAD>

However I get a page error saying - Error: expected "{" on home.php. I saw somewhere people said to use {ldelim}funcname{rdelim} tags, but I don't know where I would put them.

#2 - I put the "onload" code into the <body ...> tag. Will that work okay? It's to preload the images.

#3 - I then put the following code into my content area:

Code:

<a href="http://www.vidaville.com/store/home.php?cat=248" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('your_day','','{$ImagesDir}/nav_your_day_ro.gif',1)">

[img]{$ImagesDir}/nav_your_day.gif[/img]</a>



<a href="http://www.vidaville.com/store/home.php?cat=249" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('personal_affairs','','{$ImagesDir}/nav_personal_affairs_ro.gif',1)">

[img]{$ImagesDir}/nav_personal_affairs.gif[/img]</a>



and so on...

Will that work okay?

Or is there a simpler way of doing rollover images? I can't find a solution anywhere, it seems. :(

HI Sonia,

I did exactly the same way you try to do and it works.
I put the javascript in customer/home.tpl in <HEAD> section and it works like charm. Just FYI