Изображение, появляющееся при нажатии кнопки - PullRequest
Новая
       29

Изображение, появляющееся при нажатии кнопки

3 голосов
/ 20 мая 2011

Как сделать, чтобы скрытое изображение появлялось при нажатии кнопки отправки?

Ответы [ 5 ]

5 голосов
/ 20 мая 2011

Вам повезло, у меня была готова пустая HTML-страница: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> 
    <meta charset="utf-8" />

    <title>Test</title>

    <style type="text/css">
      .hidden {
        display: none;
      }
    </style>
  </head>

  <body>
    <form>
      <input type="submit" id="submit" onclick="document.getElementById('hidden').style.display = 'block';" />
     </form>

     <img id="hidden" class="hidden" src="foo.png" />
  </body>
</html>
1 голос
/ 20 мая 2011

Использование jQuery: 

<img id="image1" src="myimage.jpg" style="display:none;" width="120" height="120"/>

<input type="submit" name="submit" value="submit" onclick"$('#image1').show()"/>
0 голосов
/ 20 мая 2011

Вот пример 

<img class="image_file src="image.jpg" />
<input type="submit" id="submit_button" name="submit_button" />

скрыть изображение в css: 

.image_file
{
display:none;
}

с помощью jquery: 

$('#submit_button').click(function(
    $('.image_file').show();
));

и попытаться избежать встроенного JavaScript, этогрязный и сложный в обслуживании, когда у вас большой сайт.

0 голосов
/ 20 мая 2011 
document.getElementById("submitBtn").onclick = function() {
 document.getElementById("imageTag").style.display="block";
 return true;
}
0 голосов
/ 20 мая 2011

Это будет зависеть от того, как вы это скрываете.Самый простой способ сделать это - изменить имя класса изображения с того, которое делает его скрытым, на имя, которое этого не делает. 

<img src="thesource" class="hidden">

document.getElementById("theid").className = ""; // remove the hidden class.


.classHidden {
     display: none;
}
...