Reputation: 13
<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
top:50px;
}
</style>
</head>
<body>
<img id="myImg" src="w3javascript.gif" width="100" height="132">
<button type="button" onclick="clipImage()">Clip image</button>
<button type="button" onclick="clearClip()">Unclip image</button>
<script>
var a="50"
var b=30
var c=a-b
function clipImage()
{
document.getElementById("myImg").style.clip="rect(c+'px' 75px 75px 0px)";
}
function clearClip()
{
document.getElementById("myImg").style.clip="auto";
}
</script>
</body>
</html>
BTW I just took this code from w3schools.:)
Sorry for not being specific in the question title but I wanted to know why can't I use the variables that I have created inside the clip:rect
. Thanks for all the answer
Upvotes: 1
Views: 132
Reputation: 63550
Your quote marks are off:
document.getElementById("myImg").style.clip = "rect(" + c + "px 75px 75px 0px)";
Upvotes: 2