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

Christophe Stadler cs at cs-cc.com
Wed Nov 19 18:29:20 CET 2008


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

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

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

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++)
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;
    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++)
  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;
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}

Body Scripts:

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

More information about the TYPO3-project-templavoila mailing list