es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Existe alguna manera de traducir solo elementos específicos en la página utilizando Google Translate?

¿Existe alguna manera de traducir solo elementos específicos en la página utilizando Google Translate?

14 Jul, 2023 Programación

Quiero incrustar Google Translate en mi página HTML; sin embargo, quiero que solo traduzca un <div> específico. Aquí tienes un ejemplo:


<body>
<h1>¡Bienvenido a la página web!</h1>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>In sollicitudin nulla urna, a feugiat purus volutpat eu.</p>
<p>Phasellus ut scelerisque nisi, id elementum eros.</p>
<p>Etiam eu lectus pharetra, rhoncus quam ultricies, semper ligula.</p>
<p>Curabitur aliquet arcu non elementum pellentesque.</p>
<p>Nam suscipit sit amet diam a dictum.</p>
<br>
<div id="parts" style="padding-top: 8px;">
<button id="text_1">Hola</button>
<button id="text_2">Cómo</button>
<button id="text_3">Estás</button>
<button id="text_4">Tú</button>
</div>
</body>

Entonces, quiero que solo se traduzcan los elementos dentro de #parts.

¿Existe alguna forma de hacerlo?

¡Gracias!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una manera de lograr esto utilizando la API de Traducción de Google.

    En primer lugar, deberás incluir el guion de la API de Traducción de Google <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> en la <head> de tu página HTML.

    Luego, puedes utilizar el siguiente código en Javascript para crear una nueva instancia de Traducción de Google que solo apunte al div con la identificación #parts:

    function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,es,fr', autoDisplay: false, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'parts');
}

    En este ejemplo, estamos especificando que el idioma de la página es inglés (pageLanguage: 'en'), y queremos que la traducción incluya inglés, español y francés (includedLanguages: 'en,es,fr'). También establecemos autoDisplay como false para que la traducción no se muestre automáticamente en la página. Por último, especificamos que la traducción se debe mostrar en línea utilizando el diseño SIMPLE.

    El último parámetro, 'parts', especifica qué elemento se debe apuntar con la traducción. En este caso, estamos apuntando al <div> con la identificación #parts.

    Para activar la traducción, puedes agregar un botón u otro elemento que llame a la función googleTranslateElementInit() al hacer clic. Por ejemplo:

    <button onclick=""googleTranslateElementInit()"">Traducir</button>

    Esto creará una nueva instancia de Traducción de Google que solo apunta al div #parts, permitiéndote traducir solo una sección específica de tu página HTML.

Comments are closed.