Как отображать изображение при нажатии кнопки в html?

Я думал, что что-то вроде этого сработало бы, но я в замешательстве, почему это не тогда, когда стиль скрывает изображение для начала, но не показывает его при нажатии кнопки. Вот код:Как отображать изображение при нажатии кнопки в html?

function showImg() { 
    x=document.getElementById("map_img") 
    x.style.visibility="visible"; 
} 

<body> 
    <img id="map_img" src="map.jpg" style="visibility:hidden" width="400" height="400"/> 

    <form id="form1" name="form1" align="center"> 
     <input type="submit" id="Map" value="Map" onclick="showImg()"/> 
    </form>

Я также попытался это в обоих случаях:

<input type=button id="Map" value="Map" onclick="showImg()"/>

и:

<style> 
    .hidden{display:none;} 
    .show{display:block;} 
</style> 

function showImg() { 
    x=document.getElementById("map_img") 
    x.class="show"; 
} 

<body> 
    <img id="map_img" src="map.jpg" class="hide" width="400" height="400"/> 

    <form id="form1" name="form1" align="center"> 
     <input type="submit" id="Map" value="Map" onclick="showImg()"/> 
    </form>

Я действительно потерял того, как ни один из них работал, могу ли я получить помощь по этому поводу?

источник

2013-05-18 user2279496

Вы не должны * обертывать элемент input в form, если вы не хотите стандартного представления.

В вашем коде, как написано, form запускает загрузку страницы или ошибку, которая препятствует запуску скрипта.

источник

2013-05-18 13:01:19 DougM

-1

DougM прав (+1)

Кроме того, он должен быть showImg = function()

Вот демо: http://jsfiddle.net/Uppt6/

источник

2013-05-18 13:05:33 Miro

Ах, я не знаю, что функция должна быть такой, благодаря помощи от вас, так и спасибо, а Дуг (: он работал в настоящее время – user2279496

Рад слышать, что вы можете.! upvote Doug и отметьте как ответили сейчас. :) – Miro

@ user2279496 Функция ** не должна ** быть подобной. То, как у вас есть, прекрасно. Предлагаемый способ - это просто вариант; вот объяснение различий: http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname. Вещь, которую вы должны использовать, - это 'var', чтобы объявить вашу переменную' x', или использовать способ ответа Клора изменить стиль. – Ian

Вам не нужна форма на любом из ваших примеров.

Ваш JavaScript должен быть в блоке <script> и у вас есть пара синтаксических ошибок.

Попробуйте

<head> 
    <script> 
     function showImg() { 
      document.getElementById("map_img").style.display = ""; 
     } 
    </script> 
</head> 
<body> 
    <img id="map_img" src="map.jpg" style="display: none;" width="400" height="400"/> 
    <input type="submit" id="Map" value="Map" onclick="showImg()"/> 
</body>

источник

2013-05-18 13:12:13 Klors

О, это было в блоке

Как отображать изображение при нажатии кнопки в html?

ответ

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