How to enable language switcher with flag images

How to enable language switcher with flag images

First open the page.xml

app/design/frontend/default/YOURTHEME/layout/page.xml

and add the below line of code under

replace this

<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>

with

<block type="page/switch" name="store_language" as="store_language" template="page/switch/flags.phtml"/>

Now open the flags.phtml

app/design/frontend/default/YOURTHEME/template/page/switch/flags.phtml

replace this:-

<?php if(count($this->getStores())>1): ?>

<div class="form-language">

<label for="select-language"><?php echo $this->__('Your Language:') ?></label>

<select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value" class="flags">

<?php foreach ($this->getStores() as $_lang): ?>

<?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>

<option value="<?php echo $_lang->getCurrentUrl() ?>" style="background-image:url('<?php echo $this->getSkinUrl('images/flags/flag_'.$_lang->getCode().'.gif') ?>');"<?php echo $_selected ?>><?php echo $this->htmlEscape($_lang->getName()) ?></option>

<?php endforeach; ?>

</select>

</div>

<?php endif; ?>

with:-

<?php if(count($this->getStores())>1): ?>

<li class="flag-flag">

<div class="" style="float:left;">

<?php foreach ($this->getStores() as $_lang): ?>

<?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? 'active' : '' ?>

<div style="float:left;" class="<?php echo $_selected ?>">

<a class="flag" href="<?php echo $_lang->getCurrentUrl() ?>"><img src="<?php echo $this->getSkinUrl('images/flags/flag_'.$_lang->getCode().'.png')?>" /></a></div>

<?php endforeach; ?></div>

</li>

<?php endif; ?>

Flag images are put in skin/frontend/default/[your skin]/images/flags/