[TYPO3-templavoila] Different html in template for each language ? (static css image menu with javascript rollover imageswap)

Wed Nov 19 18:29:20 CET 2008

Hello,

I have a site in 2 languages, english and french. I am using a static main
menu (meaning the main branches of the site will never change) which is made
out of CSS positionned DIVs each containing an image surrounded by a link
... I need to use positioned images since the menu has overlapping shapes
and uses a custom font (thanks to the designers ... don't get me started ...
). 

I then use Javascript to handle the rollover images.

So my problem is how can i have the menu change when you change the website
language ? Since the main menu is hardcoded into the htm file on which my
main site template is based i am wondering how i can solve this ?
Is it possible to use different TV templates for each language ?

I already have a custom CSS for each language and that seems to work with
this:

[globalVar = GP:L = 0]
page.includeCSS.1 = fileadmin/menu_en.css
[GLOBAL]

[globalVar = GP:L = 1]
page.includeCSS.1 = fileadmin/menu_fr.css
[GLOBAL] 

but unfortunately the image files are referenced in the html/javascript ...
So it looks like i need two different html files or TV templates to set this
up ...

Is it possible to make this menu work with an external Javascript file, i
don't know enough about JS to see how this should be done.

But maybe there is a different or simpler way to do this ?

Thx for any help with this.

================================
================================
Here is the Head Javascript:
==================
<script 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>

==============
Body Scripts:
================
<body 
onload="MM_preloadImages('http://fileadmin/templates/events_act.gif','http:/
/fileadmin/templates/links_act.gif','http://fileadmin/templates/artists_act.
gif')">

  <div class="menuwrapper">
    <div class="menu_bax">
      <img src="EN_menu_bax.gif" alt="Main Menu" width="230" height="550">
    </div>
    <div class="menu_home">
      <a href="http:///index.php?id=1" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Home','','http://fileadmin/templates/home_act.gif
',1)"><img src="home_no.gif" name="Home" width="64" height="22" border="0"
id="Home"></a>
    </div>
    <div class="menu_links">
      <a href="http:///index.php?id=7" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Links','','http://fileadmin/templates/links_act.g
if',1)"><img src="links_no.gif" name="Links" width="74" height="42"
border="0" id="Links"></a>
    </div>
    <div class="menu_artists">
      <a href="http:///index.php?id=8" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Artists','','http://fileadmin/templates/artists_a
ct.gif',1)"><img src="artists_no.gif" name="Artists" width="193" height="87"
border="0" id="Artists"></a>
    </div>
    <div class="menu_events">
      <a href="http:///index.php?id=6" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Events','','http://fileadmin/templates/events_act
.gif',1)"><img src="events_no.gif" name="Events" width="36" height="87"
border="0" id="Events"></a>
    </div>
  </div>
</body>