How to get JS Mouseover to work?

[cdndesigns]

My (upteenth) CMSMS install is working beautifully, v. 1.4 on a Linux server. 

I am trying to accomplish a tricky menu with mouseover effects on the home page, so that a shaped picture switches when you put your mouse over the link.  I have it all working perfectly in a standard HTML page - JS mouseover script in the head tags, main starting image, image map to designate areas as links where the words are, and the mousover image code in the image map code so that as the map area is moused over the image switches.  Like I said, works perfectly on a standard html page...

http://visamax.ca/site/mouseover.htm  test page on same server, code in head of page.  Voila, beautiful.  I with malice aforethought did not make them preload, to speed page time, so slight delay but images aren't too big so no problem.

The problem comes when trying to make it run in CMSMS.... I tried putting the JS as a separate file, call to

Code: Select all

<__script__ type="text/javascript" src="uploads/Horizontal_dropdown/mouseover.js"></__script> 

Doesn't work... no mouseover effect.

Tried

Code: Select all

{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_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.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}

  in head section of template.  No joy....

Tried same code in html of home page.  Also no joy.... 

HOW can I get the javascript to run on the page??  Or more precisely what is blocking the JS from working that I can unblock?? 

HTML Code is

Code: Select all

<img style="float: right;" usemap="#Image1Map" src="uploads/images/immigrationtocanada.jpg" border="0" alt="Immigration to Canada" width="525" height="425" /> 
<map name="Image1Map">
<area onmouseover="MM_swapImage('Image1','','uploads/images/immigrationtocanadah.jpg',0)" onmouseout="MM_swapImgRestore()" shape="rect" coords="52,14,231,75" href="index.php?page=immigration-to-canada" alt="Immigration to Canada"></area>
<area onmouseover="MM_swapImage('Image1','','uploads/images/businessimmigrationh.jpg',0)" onmouseout="MM_swapImgRestore()" shape="rect" coords="43,85,222,133" href="index.php?page=business-immigration" alt="Business Immigration Visas"></area>
<area onmouseover="MM_swapImage('Image1','','uploads/images/skilledworkersh.jpg',0)" onmouseout="MM_swapImgRestore()" shape="rect" coords="50,149,227,200" href="index.php?page=skilled-workers" alt="Skilled Worker Visas"></area>
<area onmouseover="MM_swapImage('Image1','','uploads/images/temporaryworkersh.jpg',0)" onmouseout="MM_swapImgRestore()" shape="rect" coords="36,211,232,264" href="index.php?page=temporary-workers" alt="Temporary Worker Visas"></area>
<area onmouseover="MM_swapImage('Image1','','uploads/images/familycategoryh.jpg',0)" onmouseout="MM_swapImgRestore()" shape="rect" coords="45,270,270,319" href="index.php?page=family-category" alt="Family Category Visas"></area>
<area onmouseover="MM_swapImage('Image1','','uploads/images/studentsh.jpg',0)" onmouseout="MM_swapImgRestore()" shape="rect" coords="64,324,277,365" href="index.php?page=students" alt="Student Visas"></area>
<area onmouseover="MM_swapImage('Image1','','uploads/images/canadianexperienceh.jpg',0)" onmouseout="MM_swapImgRestore()" shape="rect" coords="68,367,326,419" href="index.php?page=canadian-experience-class" alt="Canadian Experience Class Visas"></area> 
</map>

and obviously it works on the HTML page. 

CMSMS home page is  http://www.visamax.ca/site/      As you can see, the menu works fine, just no mouseover effect.

I've done extensive searching with Google and through this forum trying to find the answer.  Any questions I found on "how can I get JS mouseover" to work pertained to text, so the questioners were told to just do it with CSS instead.  I've thought about it, but came to the conclusion this wasn't possible in this case. 

So, HOW do I get JS mouseover code to be active in CMSMS??? 

Thanks in advance for any help....

[Gregor]

I think you have to solve this in the menu-option inside the Admin-part, that is where you set your menu. IMHO, have a look by solving it through css (hover-effect). I'm not an expert on this, but I know how hover works on my page. Search for jquery to see all sort of effects.

Gregor

[Russ]

I think the way to do this is to get it working with the CSS hover property, don't forget focus for keyboards and all the other states. Then if you want some fancy 'jquery' style effect, over ride it with that. That way browsers without Javascript support or that have it turned off, will still get the all important hover/focus state.

[cdndesigns]

OK so nobody has the answer??  Regardless of whether it's mouseover or some other JS effect, is there ANY WAY to get it to run in CMSMS??? 

This is a serious limiting factor in a system that I otherwise love...... 

[Russ]

Not sure what you mean, it works for me in Firefox? Text Changes to black and image on right changes. Is this not what you mean? It's a bit slow and obviously doesn't work when JS is turned off. So have you fixed this?

Oh and you could do it with just CSS...
http://meyerweb.com/eric/css/edge/popups/demo2.html

[cdndesigns]

Hi Russ,

The mouseover.htm page works, but that is not in CMSMS, that is a plain html page. 

When I put the same code in CMSMS, it doesn't work, that is what I am trying to fix.

No, I don't have it figured out yet....  What I want to know is how to enable that JS effect to work in CMSMS... obviously the dropdown menu JS's work, so why not these ones???

I really don't think this effect is possible with CSS, because a mouseover in pane one would have to trigger an image switch in pane 2 beside it basically, not just the mouseover button itself.  I have done that effect as well with other javascripts before, but again I'd have to be able to get JS to work! 

So either way I have to get the javascript for mouseover effects to work in CMSMS, whether it's direct image replace on mouseover, image replace in another div on mouseover, etc. 

Any ideas?  Has anyone gotten this working before??

[Russ]

So is this the page you are trying to get working in CMS?
http://www.visamax.ca/site/

The top menu doesn't drop down, but maybe it doesn't mean to?  It seems to use something called sucker js - sucker fish menu perhaps? Maybe a conflict with your other menu on different browsers?

The other menu also works, fine for me hover and the image changes?

There is no reason that JS should not work, if jQuery for example, can, then it should work. The CSS version should work, I'm not sure I understand the pane bit - I see no frames? You are just going to load images and swap them? Common problems with JS are paths, rights, conflicts.

I realise this is probably a test page, but having valid code is really necessary before problem solving.

[Dee]

Seems to be solved... mouse over works on the image and top menu.
Usually these kind of issues are caused by conflicting scripts (window.onload).

Regards,
D