Speck Website Switcher Static Block

storepicker.htm

<style>
#__store-picker {position:relative; text-align:left;}
#__store-picker img {vertical-align:-2px;}
#__store-picker div.__sp-wrap {visibility:hidden; position:absolute; top:0; right:-24px; z-index:50; width:200px; padding-top:30px; opacity:0;
	-webkit-transition: visibility 0s linear 0.2s, opacity 0.2s linear;
	   -moz-transition: visibility 0s linear 0.2s, opacity 0.2s linear;
	    -ms-transition: visibility 0s linear 0.2s, opacity 0.2s linear;
	     -o-transition: visibility 0s linear 0.2s, opacity 0.2s linear;
	        transition: visibility 0s linear 0.2s, opacity 0.2s linear;
}
#__store-picker:hover div.__sp-wrap {visibility:visible; opacity:1;
	-webkit-transition-delay: 0s;
	   -moz-transition-delay: 0s;
	    -ms-transition-delay: 0s;
	     -o-transition-delay: 0s;
	        transition-delay: 0s;
}
#__store-picker div.__sp-wrap ul {background:#2E9DC8; padding:10px 5px; border-radius:8px; position:relative; box-shadow:2px 3px 4px rgba(0,0,0,.2);}
#__store-picker div.__sp-wrap ul:before {content:' '; height:0; width:0; position:absolute; right:16px; top:-8px; border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:8px solid #2E9DC8;}
#__store-picker div.__sp-wrap ul li {margin:5px; padding:0; list-style-type:none; display:inline-block; width:80px;}
#__store-picker div.__sp-wrap ul li a {color:#fff; text-decoration:none;}
#__store-picker div.__sp-wrap ul li a img {}
#__store-picker div.__sp-wrap ul li a span {margin:0; padding-left:5px;}
#__store-picker div.__sp-wrap ul li a:hover span {text-decoration:underline;}
</style>
<span id="__store-picker">
	<img id="__store-flag" src="{{skin url='images/flags/us.png'}}" height="11" width="16" />
	<div class="__sp-wrap">
		<ul>
			<li><a href="/?___store=default"><img src="{{skin url='images/flags/us.png'}}" height="11" width="16" alt="US" /> <span>USA</span></a></li>
			<li><a href="/?___store=gb"><img src="{{skin url='images/flags/gb.png'}}" height="11" width="16" alt="GB" /> <span>UK</span></a></li>
			<li><a href="/?___store=fr"><img src="{{skin url='images/flags/fr.png'}}" height="11" width="16" alt="FR" /> <span>French</span></a></li>
			<li><a href="/?___store=de"><img src="{{skin url='images/flags/de.png'}}" height="11" width="16" alt="DE" /> <span>German</span></a></li>
			<li><a href="/?___store=it"><img src="{{skin url='images/flags/it.png'}}" height="11" width="16" alt="IT" /> <span>Italian</span></a></li>
			<li><a href="/?___store=es"><img src="{{skin url='images/flags/es.png'}}" height="11" width="16" alt="ES" /> <span>Spanish</span></a></li>
		</ul>
	</div>
</span>
<script>
storeCode = '{{widget type="widgets/storecode"}}';
if( storeCode.length == 2 ){
	flag = document.getElementById('__store-flag');
	flag.src = flag.src.replace('us.png',(storeCode+'.png'));
}
</script>