Question

我有一个网页，我试图弄清楚如何点击图片，然后从该图片点击一个网页将加载到它的位置，但也可以向下延伸。

Answer 1

也许有办法做到这一点我可能会使用一个包含img标签的div并隐藏它或者使用background-img并将其更改为空。

即

<html>
<head>
  <title>
    a page
  </title>
<script type="text/javascript">
var container,img;

function setup(){
  img = document.getElementById('img1');
  container = document.getElementById('container');
  container.onclick = function(){
    img.style.display = 'none';
    container.innerHTML = "HERE IS SOME OTHER CODE I 'INJECTED'\n\n <IMG src='http://26.media.tumblr.com/tumblr_lk0hdcDvTa1qjoblyo1_500.jpg'>\n HAHA ANOTHER PUG!" +
    "Bacon ipsum dolor sit amet salami spare ribs jerky tenderloin pastrami sirloin andouille ham hock. Corned beef tenderloin hamburger, pig sausage chicken andouille." +
    "Ham hock tenderloin tri-tip brisket flank strip steak hamburger bacon pork belly shank. Rump ball tip tail, filet mignon pancetta strip steak hamburger short ribs shankle" +
    "bresaola pork belly venison pork loin jowl. Ham hock kielbasa frankfurter, pancetta tenderloin shankle tail leberkas venison. Spare ribs brisket pastrami chicken bacon." +
    "Tongue tenderloin ball tip capicola. T-bone bacon venison, fatback leberkas ball tip andouille sausage pastrami tail pork chop pig. Ground round chuck t-bone," +
    " tenderloin pork belly shoulder sirloin ball tip pork chop frankfurter ham. Meatloaf ribeye jowl boudin. Shoulder tri-tip andouille filet mignon capicola." +
    " Pancetta rump pork chop venison sausage. Tenderloin t-bone boudin, swine pastrami ribeye fatback brisket sausage venison spare ribs short loin leberkas strip steak." +
    "Fatback pork chop jerky short ribs andouille bacon. Meatloaf frankfurter turducken, chuck capicola hamburger jowl sausage drumstick flank tenderloin venison shoulder" +
    " short loin ball tip. Bacon prosciutto sirloin t-bone boudin meatloaf. Pork chop swine tail shoulder short ribs pork belly shankle pork loin filet mignon short" +
    " loin sausage pastrami.";
  }
}
</script>
<style type="text/css">
#container{
  width: 400px;
  background-color: rgb(126,38,36);
}
</style>
</head>
<body onload="setup()">
<div id="container">
<img id="img1" src="http://27.media.tumblr.com/tumblr_lhq4onW6Vg1qbcihro1_500.jpg" />
</div>
</body>
</html>

您还可以使用onclick事件调整div的高度或宽度。

continater.style.height = 800px;
continater.style.width = 600px;

感谢： baconipsum.com＆amp;哈巴狗

网页图片点击调用另一个网页加载并从图像下拉

1 个答案: