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:
codice:

<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>

Non è così facile cambiare la lingua del sito. E per quanto ne so, non puoi semplicemente cambiare la lingua per determinate pagine. È necessario creare una copia del sito nella lingua desiderata e quando l'utente clicca sulla bandiera della lingua desiderata, sarà reindirizzato al sito nella lingua scelta.
Ecco perché dovresti essere consapevole che quando modifichi il contenuto di una versione del sito, dovrai fare lo stesso per tutte le altre versioni.
Se quello che stai facendo è un progetto serio, sarebbe meglio rivolgersi a una agenzia web Roma, perché si può facilmente rovinare il sito, e poi costerà caro il recupero.