-2

画像をクリックする方法を見つけようとしているウェブページがあります。その画像をクリックすると、その場所にウェブページが読み込まれますが、下に拡張されます。

4

1 に答える 1

0

これを行うには、おそらく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>
​&lt;/html>

onclickイベントを使用して、divの高さまたは幅だけを調整することもできます。

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

おかげで:baconipsum.com&パグ

于 2012-09-29T06:48:43.670 に答える