Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: [Mini-MOD] language menu, rollover images  (Read 1716 times)

henrich

  • Sr. Member
  • ****
  • Karma: 23
  • Posts: 381
  • Passion for quality and excellence!
    • My personal blog and portofolio
[Mini-MOD] language menu, rollover images
« on: January 17, 2008, 09:31:58 pm »

This Mini-MOD is written for those who use the multilanguage package. With this little MOD you can create a nice language/flags menu with rollover flags.

First of all backup your files and begin with the following steps:

LAST UPDATE: 22 january 2008 1:33 AM (my time :P) - i replaced old step 4 and 5, merged into one single step, as i have improoved too many lines in the flags() function. The new function is working also 100% and it's much better!



Step 1. Add into the header of your template file the following javascript:

Code: [Select]
<script language="JavaScript" type="text/javascript">
<!-- Hide from older browsers
function SwitchImg()
{ //start
  var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
    for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {
    store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];
    if ((store.indexOf('document.layers[')==0 && document.layers==null) ||
        (store.indexOf('document.all[')==0 && document.all==null))
         store = 'document'+store.substring(store.lastIndexOf('.'),store.length);
         obj = eval(store);
    if (obj != null) {
       switcher[keep++] = obj;
      switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];
      obj.src = SwitchImg.arguments[rem+2];
  } }
  document.Data = switcher;
} //end

function RestoreImg()
{ //start
  if (document.Data != null)
    for (var rem=0; rem<(document.Data.length-1); rem+=2)
      document.Data[rem].src=document.Data[rem+1];
} //end

// end hiding contents -->
</script>

Step 2. Now create flag images for every language you want to use on your site. You need to create a normal image called flag_EN.gif and a rollower image called flag_EN_h.gif , of course the EN will be changed at every language. You can create simple flags, rounded flags, or anything else based on your imagination :)

I have created the following 2 examples for the hungarian language:

and

My blog will have 3 languages, is still under construction, i will post on this forum when will be online.

Step 3. Upload your flags into the flags directory.

Step 4. Change the whole function flags() with this:

Code: [Select]
function flags() {
$langlist = explode(',',s('langlist'));
for ($i = 0; $i <= count($langlist); $i++) {
echo '<a title="'.$langlist[$i].'" href="'.$db['website'].'index.php?action=language&lang='.$langlist[$i].'" onMouseOut="RestoreImg()" onMouseOver="SwitchImg(\'document.flag'.($i).'\',\'document.flag'.($i).'\',\'flags/flag_'.strtolower($langlist[$i]).'_h.gif\')">';
if (file_exists('flags/flag_'.strtolower($langlist[$i]).'.gif')) {
echo '<img class="flag" alt="'.$langlist[$i].'" src="flags/flag_'.strtolower($langlist[$i]).'.gif" name="flag'.($i).'" width="50" height="34" align="middle" border="0" />';
} else {
echo $langlist[$i];
}
echo '</a>';
}
}

NOTE: you will set your flag images width and height depending on the flags size's created by you.



Now you have a nice language menu with rollover images. Online example you will see soon as i will launch my blog, i am working on it.

Also special thanks to Szcs Imre, who have helped me in the last 100 metres with some syntax rules i had syntax problems at step 4 :P

I am eager to see your opinions, testing results, online using of this mini mod.

Thank you :)

« Last Edit: January 22, 2008, 12:35:40 am by henrich »
Logged
By(e) Henrich :)
------------------------------
IT related blog