Cambiare lingua all'interno pagina html

[danielepagani]

Buongiorno a tutti, chiedo il vostro aiuto (essendo io alle prime armi) in merito alla creazione della mia pagina html che vorrò utilizzare per le inserzioni ebay che intenderò fare. Il mio problema è che vorrei che le descrizioni di tutti i testi presenti nella pagina html che sto creando, cambiassero lingua (mediante apposite bandierine) in base alla nazionalità del potenziale cliente. La cosa che più mi importa è che però il cambio di lingua avvenga nella stessa pagina, praticamente vorrei che vada in sostituzione della precedente. Facendo un esempio se come lingua diciamo di default vi è l'italiano e io cliccassi sulla bandiera spagnola, vorrei che tutti i testi in italiano si convertissero istantaneamente in spagnolo. Io vi allego tutto il mio codice html che ho scritto fin ad ora, vi chiedo cortesemente se potete modificarmelo in base alla mia richiesta, direttamente nei punti corretti, perchè come detto sono alle prime armi e per me è parecchio difficile. Grazie in anticipo a tutti quanti, questo è il codice html:

<style>
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?fami...00,900italic);
@import url(http://fonts.googleapis.com/css?family=Squada+One);
/*---Common and Standard->START*/
body {
padding: 0px;
width: 100%;
margin: 0px;
background-color: #FFFFFF ;
font-family: 'Lato', sans-serif;
}
#container {
width: 1055px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
#logo {
text-align: center;
height: 320px;
background: url(http://moda-fashion.eu/ebay/template...ors/Logo.png);
background-size: cover;
padding-top: 20px;
border-radius: 40px 40px 0 0;
}
#companyname {
color: white;
margin-top: 10px;
font-size: 70px;
font-weight: 900;
letter-spacing: 3px;
opacity: 0.85;
text-shadow: 0 5px 7px black;
}
#companyslogan {
color: white;
margin-top: 10px;
font-size: 25px;
opacity: 0.85;
text-shadow: 0 5px 7px black;
}
#red {
color: #FF0000;
}
#red-star {
color: #FF0000;
text-shadow: 0 5px 15px red;
font-size: 24px;
font-weight: 900;
}
#menu {
background-color: #000000 ;
margin-top: 10px;
color: white;
padding: 10px;
text-align: center;
}
a {
text-decoration: none;
color: white;
}
.option {
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px dotted black;
opacity: 0.8;
}
.option:hover {
background-color: #000000
cursor: pointer;
}
.othercontent {
clear: both;
background-color: #404040;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
color: black;
}
.othercontentlast {
clear: both;
background-color: #404040 ;
margin-top: 20px;
padding: 10px;
color: black;
border-radius: 0 0 40px 40px;
}
.topbar-img {
height: 130px;
}
#paypal-img {
height: 50px;
}
#bank-img {
height: 60px;
}
#payL {
float: left;
margin-top: 21px;
}
#payR {
float: left;
}
.othercontentL {
float: left;
padding: 20px;
width: 138px;
text-align: center;
}
.othercontentR {
float: left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
min-height: 130px;
border-left: 2px dotted black;
}
#photobar {
height: 655px
}
#sidebar {
height: 100%;
margin-top: 20px;
margin-bottom: 25px;
float: left;
width: 95px;
padding: 45px;
text-align: center;
background-color: #000000 ;
font-size: 9px;
border-right: 2px dotted black;
}
.optionL:hover {
background-color: black;
color: white;
cursor: pointer;
}
#content {
height: 90.8%;
margin-top: 20px;
margin-bottom: 25px;
float: left;
padding: 40px;
width: 730px;
background-color: #FFFFFF ;
}
#footer {
clear: both;
color: black;
text-align: center;
font-size: 14px;
padding: 20px;
}
.bigtitle {
font-size: 32px;
font-weight: 900;
letter-spacing: 1px;
}
.dottedline {
border-bottom: 2px dotted black;
height: 5px;
margin-top: 15px;
margin-bottom: 20px;
}
.list {
margin: 0 0 0 -25px;
}
/*---Inizio-Galleria---*/
#listing-box {
float: left;
margin-bottom: 0px;
width: 800px;
}
.gallery {
width: 700px;
height: 400px;
position: relative;
float: left;
margin: 0px;
padding: 0px;
}
.gallery #big {
width: 350px;
display: table;
margin: 0 auto;
height: 250px;
border-radius: 10px;
background: #fff ;
}
.gallery #big-img {
clear: both;
display: table-cell;
height: 500px;
margin: 0 auto;
padding: 0;
position: relative;
vertical-align: middle;
width: 580px;
}
.big-res {
width: auto;
height: auto;
max-width: 820px;
width: 820px !IE;
max-height: 2500px;
margin: 0 auto;
}
.gallery ul {
display: table;
margin: 0px auto 0px;
padding: 0;
width: 700px;
}
.gallery ul li:empty {
display: none!Important;
}
.gallery ul li.last-thumb {
margin: 5px 0px 0px 0px;
list-style: none;
}
.gallery ul li.last-thumb:hover {
background-color: black;
color: white;
cursor: pointer;
}
.gallery ul li img {
padding: 9px;
margin: 0;
}
.gallery ul li.last-thumb img {
margin: 0px;
}
.thum-res {
max-width: 95px;
max-height: 73px;
text-align: center;
height: 73px;
width: 95px;
}
img[src=""], img[src=" "] {
background: none;
border: none;
height: 0;
width: 0;
box-shadow: none;
padding: 0 !important;
margin: 0 !important;
}
</style>
<script language="JavaScript" type="text/javascript">
function fda(pic){
document.getElementById("PhotoDemo").src=pic;
}</script>
<title></title>
<div id="container">
<div id="logo">
<span id="companyname"><span id="red"></span></span><br>
<span id="companyslogan"></span>
</div>
<div id="menu">
<div id="OpCommand">
<a   href="http://www.ebay.it/sch/gurusite_store/m.html?_nkw=&amp;_armrs=1&amp;_ipg=&amp;_from="  target="_blank">
<div class="option">Oggetti In Vendita</div>
</a>
<a href="http://www.ebay.it/usr/gurusite_store" target="_blank">
<div class="option">Domande Frequenti</div>
</a>
<a   href="http://feedback.ebay.it/ws/eBayISAPI.dll?ViewFeedback2&amp;userid=gurusite_store&amp;ftab=AllFeedback"  target="_blank">
<div class="option">Contatti</div>
</a>
<a   href="http://translate.google.com/translate?hl=it&amp;sl=it&amp;tl=en&amp;u=http://LINK  FORUM" target="_blank">Select your  language:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/italia.jpg"  width="39" height="26"></a>&nbsp;&nbsp;
<a  href="http://translate.google.com/translate?hl=it&amp;sl=it&amp;tl=fr&amp;u=http://LINK  FORUM" target="_blank"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/bandiera%20inglese.jpg"  width="39" height="25"></a>&nbsp;&nbsp;
<a  href="http://translate.google.com/translate?hl=it&amp;sl=it&amp;tl=fr&amp;u=http://LINK  FORUM" target="_blank"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/germania.png"  width="38" height="25"></a>&nbsp;&nbsp;
<a  href="http://translate.google.com/translate?hl=it&amp;sl=it&amp;tl=de&amp;u=http://LINK  FORUM" target="_blank"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/Spagna.png"  width="39" height="27"></a>&nbsp;&nbsp;
<a  href="http://translate.google.com/translate?hl=it&amp;sl=it&amp;tl=es&amp;u=http://LINK  FORUM" target="_blank"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/francia.jpg"  "="" width="39" height="26"></a><br><br>
<div style="clear: both"></div>
</div>
</div>
<div id="photobar">&nbsp;&nbsp;
<br>&nbsp;<div  id="sidebar"><div class="gallery"><div  align="left"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/Borsa%20Kors/IMG_8688.JPG"  alt="" class="thum-res" onmouseover="fda(this.src)" width="100"  height="72"><br></div></div></div><div  id="content"><span class="bigtitle"><center>
<br><div id="listing-box">
<div class="gallery">
<div id="big">
<div  id="big-img"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/Borsa%20Kors/IMG_8688.JPG"  alt="" name="PhotoDemo" class="big-res" id="PhotoDemo"></div>
</div>
</div>
</div>
</center></span></div>
</div>
<div class="othercontent">
<div  class="othercontentL"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/original2.jpg"  alt="" class="topbar-img" width="141" height="130"></div>
<div class="othercontentR">
<p style="margin-bottom: 0.35cm; line-height: 115%" align="CENTER"><font size="7" color="#FFFE38" face="Arial">BORSA
MICHAEL KORS</font></p><font color="#FFFE38" face="Arial">
</font><p  style="margin-bottom: 0.35cm; line-height: 115%"  align="CENTER"><font color="#FFFE38" face="Arial">MODELLO:
30T5GTVT2L DK KHAKI</font></p><font face="Arial">
</font><p  style="margin-bottom: 0.35cm; line-height: 115%"  align="CENTER"><font color="#ff0000" face="Arial"><font  size="3"><b>Prezzo
listino : 325,00 euro</b></font></font></p><font face="Arial">
</font><p  style="margin-bottom: 0.35cm; line-height: 115%"  align="CENTER"><font  face="Arial"><br><br></font>
</p><font face="Arial">
</font><p  style="margin-bottom: 0.35cm; line-height: 115%"><font  color="#FFFFFF" face="Arial"><font  size="4"><i><b>PRODOTTO:</b></i></font>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <font size="3">BORSA
MICHAEL KORS</font></font></p><font color="#FFFFFF" face="Arial">
</font><p  style="margin-bottom: 0.35cm; line-height: 115%"><font  color="#FFFFFF" face="Arial"><i><b><font  size="4">MODELLO:</font></b></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
30T5GTVT2L DK KHAKI</font></p><font color="#FFFFFF" face="Arial"></font>
</div>
<div style="clear: both"></div>
</div>
<div class="othercontent">
<div  class="othercontentL"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/spedizione.jpeg"  alt="" class="topbar-img" width="140" height="143"></div>
<div class="othercontentR">
<font size="3" color="#FFFFFF" face="Arial"><u><span class="bigtitle">Spedizione</span></u>
</font><font size="3" color="#FFFFFF" face="Arial">
</font><p  style="margin-bottom: 0.35cm; line-height: 0.49cm"  align="LEFT"><font size="3" color="#FFFFFF"  face="Arial"><font style="font-size: 11pt"><font  size="4"><b>SPEDIZIONE
GRATUITA  EXPRESS</b></font> in Italia in 24/48  ore!</font></font></p><font size="3"  color="#FFFFFF" face="Arial">
</font></div>
<div style="clear: both"></div>
</div>
<div class="othercontent">
<div  class="othercontentL"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/paga1.jpg"  alt="" class="topbar-img" width="142" height="95"></div>
<div class="othercontentR">
<font color="#FFFFFF" face="Arial"><u><span class="bigtitle">Pagamento</span></u>
</font><font color="#FFFFFF" face="Arial">
</font><p  style="margin-bottom: 0.35cm; line-height: 0.49cm"  align="LEFT"><font size="3" color="#FFFFFF"  face="Arial"><font style="font-size: 11pt">I
metodi di  pagamento dai noi accettati sono i  seguenti:<br></font></font></p><font  color="#00000a"><font size="5"><font face="Calibri,  serif"><br></font></font></font><br>
<div style="clear: both"></div>
</div>
<div style="clear: both"></div>
</div>
<div class="othercontent">
<div  class="othercontentL"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/reso.jpg"  alt="" class="topbar-img" width="139" height="128"></div>
<div class="othercontentR">
<font  color="#FFFFFF" face="Arial"><u><span  class="bigtitle"><font size="3"><font  size="6">Reso</font><br><br></font></span></u>
</font><font color="#FFFFFF" face="Arial">
</font><ul class="list"><font color="#FFFFFF" face="Arial">
</font></ul><font  size="3" color="#FFFFFF" face="Arial">Il cliente ha 14 giorni di  tempo dalla data di presa in possesso dell'articolo per comunicarci  l'intenzione di restituire il
prodotto. <br></font><ul class="list">
</ul>
</div>
<div style="clear: both"></div>
</div>
<div class="othercontentlast">
<div  class="othercontentL"><font color="#FFFFFF"><img  src="http://www.moda-fashion.eu/ebay/template/images/daniele/sito/feedbeck.jpeg"  alt="" class="topbar-img" width="140"  height="124"></font></div>
<div class="othercontentR">
<font color="#FFFFFF" face="Arial"><u><span class="bigtitle">Feedback</span></u>
</font><ul class="list"><font color="#FFFFFF" face="Arial">
</font></ul><font  color="#FFFFFF" face="Arial">Rilascia un feedback a</font>  <span id="red-star">5-stelle</span> <font color="#FFFFFF"  face="Arial">per il tuo acquisto!</font><ul  class="list"><font color="#FFFFFF" face="Arial">
</font></ul><br><ul class="list">
</ul>
</div>
<div style="clear: both"></div>
</div>
<br>
</div>

[danielepagani]

Nessuno sa aiutarmi?