Question

I have a fairly simple all css/html dropdown menu displaying country flags that link off to language versioned pages. Right now it is static. I’d like to change it so the flag of the page you are on appears at the top of the menu. I can’t seem to figure out how I can achieve this. I assume I will need some JS or jquery?

The css:

#l_drop{background: #4D8986;height: 24px;width: 52px;border: 1px #62b7b4 solid; float:left; margin: 6px 0 0 7px;}
#l_drop ul{background: #4D8986;list-style: none;margin: 0;padding: 0;}
#l_drop li{float: left;position:relative;}
#l_drop a{display: block;float: left;height: 24px;line-height: 24px;padding: 0;text-decoration: none;}
#l_drop ul ul{display:none;position: absolute;top: 24px;left: -1px;width: auto;margin-top: -1px;border: 1px #62b7b4 solid;border-top: 0;}
#l_drop ul ul li{width:52px;}
#l_drop ul li:hover > ul {display: block;}

The HTML:

<div id="l_drop">
<ul>
<li><a href="#"><img src="english.gif" width="52" height="24" alt="English" border="0" /></a>
<ul>
<li><a href="#"><img src="spanish.png" width="24" height="24" alt="Español" border="0" /></a></li>
<li><a href="#"><img src="french.png" width="24" height="24" alt="Français" border="0" /></a></li>
<li><a href="#"><img src="german.png" width="24" height="24" alt="Deutsch" border="0" /></a></li>
<li><a href="#"><img src="korean.png" width="24" height="24" alt="한국의" border="0" /></a></li>
<li><a href="#"><img src="chinese.png" width="24" height="24" alt="中国的" border="0" /></a></li>
<li><a href="#"><img src="japanese.png" width="24" height="24" alt="日本人" border="0" /></a></li>
</ul>
</li>
</ul>
</div>

Any suggestions on how I can work with this code swap out the top image based on page? Or would you suggest I rebuild from scratch? Any tips appreciated.

Answer 1

I ended up adding a little script to the language pages that just swapped out img SRC and removed the USA flag:

$(function () {
    $("img.USA").attr('src', '/german.png');    $(".lang_flagDE").attr('class', 'hideFlag'); });

Each image has a class, like .USA – this script changes the SRC of the US flag with the german and then hides the second instance of the german flag.