buenas noches,
Soy nuevo en este foro y no se bien si esto va aqui, saludos a todos. Espero ayudar y ser ayudado.
Al grano, mi duda es que tengo un script de cambio de idioma en mi hotspot y es el siguiente.
<script type="text/javascript" >
var idioma = "hispano";
function ponerIdioma(cual) {
document.getElementById(idioma).style.display = "none";
idioma = cual;
document.getElementById(idioma).style.display = "block";
}
</script>
BOTONES
<button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>
<button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die Anweisung in deutsch</b></button>
<button onClick="ponerIdioma('hispano')" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>
Y estos son los div con la id de (hispano, english o aleman)
<div id="hispano" >
texto en español.
</div>
<div id="english" style="display: none;" >
texto en ingles
</div>
<div id="aleman" style="display: none;" >
TEXTO EN ALEMAN
</div>
Vale, hasta aquí bien, funciona correctamente. Pero yo necesito que cambie mas div aparte de este texto, necesito que cambie dos div's mas. En total al pinchar al boton tiene que hacer 3 cambios de texto o imagen en la pagina.
¿Como podria hacerlo?
Gracias de antebrazo ;)
Hola Fernando.
Supongo que lo que estás intentando hacer es un ejemplo didáctico, ya que un sitio multi-idioma real es bastante más complejo. En tu ejemplo bastaría con añadir líneas similares a:
document.getElementById(idioma).style.display = "none"; idioma = cual; document.getElementById(idioma).style.display = "block";
Pero para hacerlo, deberías cambiar el id de los componentes o utilizar clases. Un ejemplo sencillo que se me ocurre es que pongas como id de los componentes algo así como:
<div id="texto_hispano" >
texto en español.
</div>
<div id="texto2_hispano" >
texto 2 en español.
</div>
<div id="texto_english" style="display: none;" >
texto en ingles
</div>
<div id="texto2_english" style="display: none;" >
texto 2 en ingles
</div>
<div id="texto_aleman" style="display: none;" >
TEXTO EN ALEMAN
</div>
<div id="texto2_aleman" style="display: none;" >
TEXTO EN ALEMAN
</div>
Y te quedaría algo así:
function ponerIdioma(cual) {
document.getElementById('texto1_'+idioma).style.display = "none";
document.getElementById('texto2_'+idioma).style.display = "none";
idioma = cual;
document.getElementById('texto1_'+idioma).style.display = "block";
document.getElementById('texto2_'+idioma).style.display = "block";
}
No es la mejor solución pero puede ser un parche para tu ejemplo. Un saludo!
Guau!
Muchas gracias por tu ayuda adrian, pero sigue sin funcionar, el boton quedaria asi?
<button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>
<button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die Anweisung in deutsch</b></button>
<button onClick="ponerIdioma('hispano');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>