change the position of image on click
<html>
<head>
&l开发者_开发百科t;script type="text/javascript">
function changepic()
{
document.getElementById("demo").style.top=2000;
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<div id="demo">
<img src="./omna.jpg" style="position:absolute; left: 400; top: 100; width: 200; height: 200;"/>
</div>
<button type="button" onclick="changepic()">change pic</button>
</body>
</html>
Why im unable to change the position of picture whats going wrong ?
<img id="demo"> ' google says it works
I dont know but the above html page isnt working I wanted to change the position of an image when I click the button, please help me with these. Im using google chrome
<img onclick="somefunc()"> can I set function onclick to image also? right?
But its not working please help me with the html Code!
You're trying to set the top
of an element with the id demo
, which is a <div>
. I assume that div doesn't have position:absolute
set on it so won't move anywhere, and I guess you want the <img>
to move and and not the <div>
anyway. If you remove the id from the <div>
and add it to the <img>
(like in your second piece of code above) you shouldn't have any problems. This code should work:
<html>
<head>
<script type="text/javascript">
function changepic()
{
document.getElementById("demo").style.top=2000 + "px";
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<div>
<img id="demp" src="./omna.jpg" style="position:absolute; left: 400; top: 100; width: 200; height: 200;"/>
</div>
<button type="button" onclick="changepic()">change pic</button>
</body>
</html>
You setting the inline style of the image and then setting the top
of the div. Either do one or the other. Or better still just remove the div, add an id
to your and set it's style.
<img id="image" src="./omna.jpg" style="position:absolute; left: 400; top: 100; width: 200; height: 200;" />
document.getElementById("image").style.top=2000;
精彩评论