画像をクリックする方法を見つけようとしているウェブページがあります。その画像をクリックすると、その場所にウェブページが読み込まれますが、下に拡張されます。
質問する
170 次
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>
</html>
onclickイベントを使用して、divの高さまたは幅だけを調整することもできます。
continater.style.height = 800px;
continater.style.width = 600px;
おかげで:baconipsum.com&パグ
于 2012-09-29T06:48:43.670 に答える