<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img id="imgNavSel" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanNavSel">ITA</span> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a id="navIta" href="#" class="language"> <img id="imgNavIta" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanNavIta">Italiano</span></a></li>
<li><a id="navDeu" href="#" class="language"> <img id="imgNavDeu" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanNavDeu">Deutsch</span></a></li>
<li><a id="navFra" href="#" class="language"><img id="imgNavFra" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanNavFra">Francais</span></a></li>
<li><a id="navEng" href="#" class="language"><img id="imgNavEng" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanNavEng">English</span></a></li>
</ul>
</li>
</ul>
</div> <!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Internationalization </h1>
<h3>In the navbar using ul dropdown<h3>
<h3>In the page using button group<h3>
<p>
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">
<img id="imgBtnSel" src="" alt="..." class="img-thumbnail icon-medium">
<span id="lanBtnSel">ITA</span></button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="btnIta" href="#" class="language"> <img id="imgBtnIta" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanBtnlIta">Italiano</span></a></li>
<li><a id="btnDeu" href="#" class="language"> <img id="imgBtnDeu" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanBtnDeu">Deutsch</span></a></li>
<li><a id="btnFra" href="#" class="language"><img id="imgBtnFra" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanBtnFra">Francais</span></a></li>
<li><a id="btnEng" href="#" class="language"><img id="imgBtnEng" src="" alt="..." class="img-thumbnail icon-small"> <span id="lanBtnEng">English</span></a></li>
</ul>
</div>
</p>
</div>
</div>
</body>
.icon-small
{
height:18px;
margin:0;
padding:0;
}
.icon-medium
{
height:22px;
margin:0;
padding:0;
}
$(document).ready(function(){
var itaImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Italien.gif";
var engImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Grossbritanien.gif";
var deuImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Deutschland.gif";
var fraImgLink = "http://www.roemheld.de/IT/Data/Images/Address/Frankreich.gif";
var imgBtnSel = $('#imgBtnSel');
var imgBtnIta = $('#imgBtnIta');
var imgBtnEng = $('#imgBtnEng');
var imgBtnDeu = $('#imgBtnDeu');
var imgBtnFra = $('#imgBtnFra');
var imgNavSel = $('#imgNavSel');
var imgNavIta = $('#imgNavIta');
var imgNavEng = $('#imgNavEng');
var imgNavDeu = $('#imgNavDeu');
var imgNavFra = $('#imgNavFra');
var spanNavSel = $('#lanNavSel');
var spanBtnSel = $('#lanBtnSel');
imgBtnSel.attr("src",itaImgLink);
imgBtnIta.attr("src",itaImgLink);
imgBtnEng.attr("src",engImgLink);
imgBtnDeu.attr("src",deuImgLink);
imgBtnFra.attr("src",fraImgLink);
imgNavSel.attr("src",itaImgLink);
imgNavIta.attr("src",itaImgLink);
imgNavEng.attr("src",engImgLink);
imgNavDeu.attr("src",deuImgLink);
imgNavFra.attr("src",fraImgLink);
$( ".language" ).on( "click", function( event ) {
var currentId = $(this).attr('id');
if(currentId == "navIta") {
imgNavSel.attr("src",itaImgLink);
spanNavSel.text("ITA");
} else if (currentId == "navEng") {
imgNavSel.attr("src",engImgLink);
spanNavSel.text("ENG");
} else if (currentId == "navDeu") {
imgNavSel.attr("src",deuImgLink);
spanNavSel.text("DEU");
} else if (currentId == "navFra") {
imgNavSel.attr("src",fraImgLink);
spanNavSel.text("FRA");
}
if(currentId == "btnIta") {
imgBtnSel.attr("src",itaImgLink);
spanBtnSel.text("ITA");
} else if (currentId == "btnEng") {
imgBtnSel.attr("src",engImgLink);
spanBtnSel.text("ENG");
} else if (currentId == "btnDeu") {
imgBtnSel.attr("src",deuImgLink);
spanBtnSel.text("DEU");
} else if (currentId == "btnFra") {
imgBtnSel.attr("src",fraImgLink);
spanBtnSel.text("FRA");
}
});
});
