Как получить изображение, отображаемое во втором столбце при нажатии переключателя?

<html> 
<head> 
<title>Project 1.6</title> 
<body> 
<table> 
<tr> 
    <td> 
    <form> 
    <input type= "radio" value = "Argentina" name = "places">Argentina<br> 
    <input type= "radio" value = "Australia" name = "places">Australia<br> 
    <input type= "radio" value = "Bolivia" name = "places">Bolivia<br> 
    <input type= "radio" value = "Cuba" name = "places">Cuba<br> 
    <input type= "radio" value = "Findland" name = "places">Findland<br> 
    <input type= "radio" value = "France" name = "places">France<br> 
    <input type= "radio" value = "Italy" name = "places">Italy<br> 
    <input type= "radio" value = "Peru" name = "places">Peru<br> 
    <input type= "radio" value = "Syria" name = "places">Syria<br> 
    <input type= "radio" value = "Tunisia" name = "places">Tunisia<br> 
    </form> 
    </td> 
    <td> 
    </td> 
</tr> 
</table> 
</body> 
</html>

Итак, в основном я хочу, чтобы всякий раз, когда я нажимаю на переключатель в первом столбце, я получаю изображение флага местоположения во втором столбце? В HTML, пожалуйста.Как получить изображение, отображаемое во втором столбце при нажатии переключателя?

источник

2014-09-29 Mahnoor Tariq

HTML является * Mark Up Language *. Он не является функциональным, его целью является описание макета документов. Обычно браузеру. Чтобы ответить на нажатия кнопок, вам необходимо использовать язык сценариев на стороне браузера (javascript) или язык программирования на сервере. Также, что вторая колонка? Где изображения флага? –

Для этого вам необходимо использовать JavaScript. Создайте скрытый div для каждой опции во втором столбце и сделайте конкретным видимым с помощью JavaScript на опции select.

источник

2014-09-29 23:19:41 Aqib1604

Какой-то уродливый Решение CSS, как я уже упоминал в своем комментарии выше, не может быть сделано в чистом HTML, это как можно ближе.

.flag 
 
{ 
 
    position:absolute; 
 
    top:0; 
 
    left: 150px; 
 
    display:none; 
 
} 
 

 
input[type="radio"]:checked + .flag {display: inline-block;}

<input type= "radio" value = "Argentina" name = "places">Argentina <img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/ar-lgflag.gif" class="flag"><br> 
 
<input type= "radio" value = "Australia" name = "places">Australia<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/as-lgflag.gif" class="flag"><br> 
 
<input type= "radio" value = "Bolivia" name = "places">Bolivia<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/bl-lgflag.gif" class="flag"><br> 
 
<input type= "radio" value = "Cuba" name = "places">Cuba<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/cu-lgflag.gif" class="flag"><br> 
 
<input type= "radio" value = "Findland" name = "places">Findland<img src="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/fi-lgflag.gif" class="flag"><br>

Это зависит на Adjacent Sibling selector, так что вы не можете переместить изображение в отдельной ячейке таблицы.

Или, если вы предпочитаете более чистый HTML с несколько более сложной CSS:

.flag 
 
{ 
 
    position:absolute; 
 
    top:0; 
 
    left: 150px; 
 
    display:none; 
 
    width: 500px; 
 
    height: 500px; 
 
    background-repeat: no-repeat; 
 
} 
 

 
input[type="radio"]:checked ~ .flag {display: inline-block;} 
 

 
input[value="Argentina"]:checked ~ .flag{ 
 
    background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/ar-lgflag.gif"); 
 
} 
 

 
input[value="Australia"]:checked ~ .flag{ 
 
    background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/as-lgflag.gif"); 
 
} 
 

 
input[value="Bolivia"]:checked ~ .flag{ 
 
    background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/bl-lgflag.gif"); 
 
} 
 

 
input[value="Cuba"]:checked ~ .flag { 
 
    background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/cu-lgflag.gif"); 
 
} 
 

 
input[value="Findland"]:checked ~ .flag { 
 
    background-image:url("https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/fi-lgflag.gif"); 
 
}

<input type= "radio" value = "Argentina" name = "places">Argentina<br> 
 
<input type= "radio" value = "Australia" name = "places">Australia<br> 
 
<input type= "radio" value = "Bolivia" name = "places">Bolivia<br> 
 
<input type= "radio" value = "Cuba" name = "places">Cuba<br> 
 
<input type= "radio" value = "Findland" name = "places">Findland<br><div class="flag"></div>

источник

2014-09-30 00:40:43

Как получить изображение, отображаемое во втором столбце при нажатии переключателя?

ответ

Смежные вопросы