Layeret skal ikke kunne laves større hvis det er i kanten af bill
Hejsa EksperterJeg har lavet nedenstående javascript, det skal bruges til at brugerne på min side kan vælge et billede og lave et profil billede ud fra det valgte billede. Brugerne kan så flytte det gennemsigtige layer rundt, gøre det større og mindre også trykke Hent koordinater. Dette virker også fint i Firefox, men ryk funktionen virker slet ikke i IE (Har tidligere fået hjælp af olebole til dette, men kan ikke rigtig finde de tidligere svar).
Men mit hoved problem er at hvis i prøver scritet, så kan man hører boksen rundt i billedet størrelse, dette virker fint, men hvis man er i bunden eller helt til højre og gøre boksen større så bliver den større ud over billedet. Hvordan kan jeg undgå dette?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#layer {
position:absolute;
top:0px;
left:0px;
width:160px;
height:160px;
background-color:#EEEEEE;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
text-align:center;
}
</style>
<script type="text/JavaScript">
length = 5;
function gettopleft() {
left = document.getElementById('layer').offsetLeft;
top = document.getElementById('layer').offsetTop;
}
function getwidthheight() {
width = document.getElementById('layer').offsetWidth;
height = document.getElementById('layer').offsetHeight;
}
function getimage() {
imagewidth = document.getElementById('image').offsetWidth;
imageheight = document.getElementById('image').offsetHeight;
}
function move(event) {
if (event.keyCode == 37) {
gettopleft();
if(left != '0') {
calculate = left - length;
document.getElementById('layer').style.left = calculate + "px";
}
} else if (event.keyCode == 39) {
gettopleft();
getimage();
getwidthheight();
if((left + width) < imagewidth) {
calculate = left + length;
document.getElementById('layer').style.left = calculate + "px";
}
} else if (event.keyCode == 38) {
gettopleft();
if(top != '0') {
calculate = top - length;
document.getElementById('layer').style.top = calculate + "px";
}
} else if (event.keyCode == 40) {
gettopleft();
getimage();
getwidthheight();
if((top + height) < imageheight) {
calculate = top + length;
document.getElementById('layer').style.top = calculate + "px";
}
}
}
function changebox(way) {
getwidthheight();
if(way == 'big' && width < 300) {
calculatewidth = width + 20;
calculateheight = height + 20;
} else if(way == 'small' && width > 140) {
calculatewidth = width - 20;
calculateheight = height - 20;
}
document.getElementById('layer').style.width = calculatewidth + "px";
document.getElementById('layer').style.height = calculateheight + "px";
}
function makeit() {
gettopleft();
getwidthheight();
leftcalculate = left + width;
topcalculate = top + height;
alert("Billedets koordinater\nVenstre top: (" + left + "," + top + ")\nVenstre bund: (" + left + "," + topcalculate + ")\nHøjre top: (" + leftcalculate + "," + top + ")\nHøjre bund: (" + leftcalculate + "," + topcalculate + ")\n");
}
</script>
</head>
<body onload="getimage();" onkeydown="move(event);">
<img id="image" src="htx13.JPG" border="0" alt=""><br />
<input type="button" value="Større" onclick="changebox('big');"> <input type="button" value="Mindre" onclick="changebox('small');"><input type="button" value="Hent koordinater" onclick="makeit();"> Brug piltasterne NOOB!
<div id="layer">Preview</div>
</body>
</html>
