2

Tengo ésta función para que al apretar un botón se traduzca de ingles/español un texto. Ese texto que traduce no es la letra de la canción, sino un texto que aparece en un cuadrito al pasar el mouse por encima de una frase (esto lo hice con jquery). pero quisiera hacer esto con más de un texto a la vez. que se traduzcan todos al apretar el boton de español/inglés. El que tengo acá en el código solo me traduce el "mensaje_frase0", pero tengo también un "mensaje_frase1" que quisiera que se traduzca.

Como tendría que modificar éste código para que me funcione?

$(document).ready(function(){   
        $("#mensaje_frase0").hide();
        $("#frase0").hover(mensaje_on0, mensaje_off0);
        eligeIdioma();
    });

    
    function mensaje_on0(){
        $("#mensaje_frase0").show();    
    }
    
    function mensaje_off0(){
        $("#mensaje_frase0").hide();
    }   
    
    /* Idioma */
    var idioma = 0 ; // 0=es, 1=en, ...
    var idiomas=["Español","Inglés"];
    var texto = [   "\"The lucky one\" fue elegido por Taylor para ser el track n° 13 por ser éste su número de la suerte (ella nació el 13 de Diciembre de 1989).",
                    "\"The lucky one\" was chosen by Taylor to be track No. 13 to be his lucky number (he was born on December 13, 1989)."
                ];
    function eligeIdioma(){
        IDidioma.innerHTML=idiomas[idioma];
        mensaje_frase0.innerHTML=texto[idioma];
    }
    function modificaIdioma(){
        idioma++;
        if (idioma < 0 || idioma > 1) idioma = 0;
        eligeIdioma();
    }

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" href="cssred.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    
<div id="mensaje_frase0"></div> 
<div id="mensaje_frase1></div>
    

<div class="contenido"> 

    <div class="izq">
    
        <div class="home">  
            <button id="HomeButton" onclick="location.href='../index.html';" class="float-left submit-button" >Home!</button>       
        </div>


        <div class=previousnext>    
            <button id="PreviousButton" onclick="location.href='../paginas/sadbeautifultragic.html';" class="float-left submit-button" >←Previous track</button>        
            <button id="NextButton" onclick="location.href='../paginas/everythinghaschanged.html';" class="float-left submit-button" >Next track →</button>     
        </div>  
        <button id="IDidioma" onclick="modificaIdioma()"></button>

    <span class="hover_img" id="frase0">
        <a class="titulo" href="#">13. The Lucky One<br></a></span>
    

<div class="song">

<p>New to town with a made up name in the angel's city,<br>
<span class="hover_img"  id="frase1>Chasing fortune and fame.<br></span>
And the camera flashes<br>
Make it look like a dream.</p>
    
<p>You had it figured out since you were in school<br>
Everybody loves pretty, everybody loves cool<br>
So overnight you look like a sixties' queen</p>
    
<p>Another name goes up in lights,<br>
Like diamonds in the sky</p>
    
<p>And they'll tell you now, you're the lucky one<br>
Yeah, they'll tell you now, you're the lucky one<br>
But can you tell me now, you're the lucky one<br>
Oh, oh, oh...</p>
    
<p>Now it's big black cars, and Riviera views<br>
And your lover in the foyer doesn't even know you<br>
And your secrets end up splashed on the news front page</p>
    
<p>And they tell you that you're lucky<br>
But you're so confused,<br>
'Cause you don't feel pretty, you just feel used.<br>
And all the young things line up to take your place</p>
    
<p>Another name goes up in lights<br>
You wonder if you'll make it out alive</p>
    
<p>And they'll tell you now, you're the lucky one.<br>
Yeah, they'll tell you now, you're the lucky one.<br>
Can you tell me now, you're the lucky one<br>
Oh, oh, oh.</p>
    
<p>It was a few years later<br>
I showed up here<br>
And they still tell the legend of how you disappeared<br>
How you took the money and your dignity<br>
And got the hell out<br>
They say you bought a bunch of land somewhere<br>
Chose the Rose Garden over Madison Square<br>
And it took some time, but I understand it now</p>
    
<p>'Cause now my name is up in lights<br>
But I think you got it right,</p>
    
<p>Let me tell you now, you're the lucky one<br>
Let me tell you now, you're the lucky one<br>
Let me tell you now, you're the lucky one<br>
Oh, oh, oh.</p>
    
<p>Yeah they'll tell you now, you're the lucky one<br>
Yeah, they'll tell you now, you're the lucky one<br>
And they'll tell you now, you're the lucky one<br>
Oh, oh, oh.<br>
Oh, whoa, oh, oh</p>

</div>
<div id="div2">
    &nbsp;
</div>          
</div>  


</body>

CSS:

#mensaje_frase0{
    position: fixed;  /*o absolute?*/
    left: 0px;
    top: 100px;   /*originalmente tenia 392px*/
    width: 315px;
    height: 430px;
    background-color: #D7CFDA;
    font-size: 20px;
    padding: 25px 15px 15px 500px;
    border: 2px #00F;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    text-align: center;
}


#mensaje_frase1{
    position: fixed;  /*o absolute?*/
    left: 0px;
    top: 100px;   /*originalmente tenia 392px*/
    width: 315px;
    height: 430px;
    background-color: #D7CFDA;
    font-size: 20px;
    padding: 25px 15px 15px 500px;
    border: 2px #00F;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    text-align: center;
}

1 respuesta 1

2

Siguiendo el mismo sistema, puedes seguir almacenando las distintas frases en el Array, por ejemplo usando varios Arrays dentro del Array ( un Array de dos dimensiones), algo parecido a esto:

    var texto = [
                ["Texto 0 en español",
                "Text 0 in english"
                ],
                ["Texto 1 en español",
                "Text 1 in english"
                ]
            ];

De manera que texto[0][0] corresponde al texto 0 en esp. [0][1] al texto 0 en eng., el [1][0] al texto 1 en esp y el [1][1] al texto 1 en eng.
Entonces, si los distintos elementos donde aparecen los textos los tienes identificados como mensaje_frase0, mensaje_frase1... etc, puedes rellenarlos con un bucle, añadiendo en el nombre de la ID, el numero de frase correspondiente. Algo parecido a esto:

    function eligeIdioma(){
    IDidioma.innerHTML=idiomas[idioma];
    
    for (let frase=0; frase<texto.length; frase++){
        document.getElementById("mensaje_frase"+frase).innerHTML=texto[frase][idioma];
    }
}
1
  • Me ayudaste otra vez, muchisimas gracias!! sos un genio!
    – danistor_m
    Commented el 26 dic. 2021 a las 20:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.