Работа с src и alt для замены изображения - PullRequest
Новая
       9

Работа с src и alt для замены изображения

0 голосов
/ 29 июня 2018

У меня есть часть на моем сайте, посвященная смене языка. Прямо сейчас, в круговой кнопке, у меня есть флаг Великобритании. Это опция по умолчанию. 

  <a class="nav-link-language  js-language-trigger">
    <img src="http://my-site.test/wp-content/uploads/2018/04/260-united-kingdom.png" alt="">

Например, у меня есть опция для немецкого языка 

    <div class="nav-link-language-holder">
      <a><img src="http://my-site.test/wp-content/uploads/2018/04/260-germany.png" alt=""><i>German</i></a>
    </div>

Как я могу установить с помощью javscript, когда пользователь нажимает на значок для Германии, он будет заменен на вариант по умолчанию (сейчас это Великобритания)

Большое спасибо

1 Ответ

0 голосов
/ 29 июня 2018

Вот быстрый способ изменить ваш img src: 

<img id="Your_IMG_ID" src="olg-img-src.png">
<button onclick="change_img_src()">Change SRC</button>
<script>
function change_img_src() {
    document.getElementById("Your_IMG_ID").src = "new-img-src.png";
}
</script>

Чтобы обобщить то, что вы ищете, и еще больше упростить это, вот способ сделать это: 

<!--- Your main flag --->
<img id="main-flag" style="cursor:pointer" src="img.png"/>

<!--- Rest of flags --->
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-2.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-3.png"/>
<!----Other flags---->
<script>
function Change_flag(_src) {
    document.getElementById("main-flag").src = _src;
}
</script>
...