Okej, jag har lyckats få tag på ett script!
Scriptet används på https://www.playahead.com och jag skickade ett mail till webmastern och fick tillåtelse att använda scriptet! :)
*glad som ett djur*
Men problemet är, att scriptet endast fungerar under Internet Explorer, då undrar jag istället, kan man göra något åt det att det fungerar i fler webläsare än Internet explorer?
Om det inte går, redirecta besökaren till en viss adress
<script>
var dragging = false;
var origX, origY
origX = '';
origY = '';
oldX='';
oldY='';
maxX = '';
maxY = '';
rsHeight = 110;
rsWidth = 90;
var dragging = false;
var resizing = false;
function oo(obj){
return document.getElementById(obj);
}
function pi(s){
return parseInt(s)
}
function checkdrag(e) {
if(dragging) {
var l = document.getElementById(dragging)
var ii = document.getElementById('daimage');
minX = parseInt(document.getElementById('imDiv').style.left);
minY = parseInt(document.getElementById('imDiv').style.top);
maxY = minY + parseInt(document.getElementById('daimage').height) - rsHeight -2
maxX = minX + parseInt(document.getElementById('daimage').width) - rsWidth
thisX = parseInt(l.style.left);
thisY = parseInt(l.style.top);
testX = thisX + window.event.clientX - oldX;
testY = thisY + window.event.clientY - oldY;
if((testX >=minX) && (testX <maxX )){
l.style.left = testX
oo('userImageX').value = document.getElementById("imDrag").style.pixelLeft - document.getElementById("imDiv").style.pixelLeft;
}
if((testY >= minY) && (testY <maxY)){
l.style.top = testY
oo('userImageY').value = document.getElementById("imDrag").style.pixelTop - document.getElementById("imDiv").style.pixelTop;
}
rePosResizer();
}
if(resizing){
var l = document.getElementById(resizing)
var lc = document.getElementById('imDrag');
var li = document.getElementById('spacer');
var lr = document.getElementById('imResize');
w = l.style.width.split('px')[0];
h = l.style.height.split('px')[0];
w2 = lc.style.height.split('px')[0];
h2 = lc.style.height.split('px')[0];
dH = parseInt(window.event.clientX - oldX)
dY = parseInt(window.event.clientX - oldX) * (110/90)
rsHeight = parseInt(h) + dY;
rsWidth = parseInt(l.style.height) * (90/110);
if (rsHeight < 110) rsHeight = 110;
if (rsWidth <90) rsWidth = 90;
maxY = parseInt(document.getElementById('daimage').height) - parseInt(document.getElementById('imDrag').style.top)+58;
maxX = parseInt(document.getElementById('daimage').width) - parseInt(document.getElementById('imDrag').style.left)+100;
if((rsWidth <= maxX) && ( rsHeight <= maxY)){
l.style.width = rsWidth
l.style.height = rsHeight
li.width = l.style.width.split('px')[0];
li.height = l.style.height.split('px')[0];
lr.style.pixelLeft = window.event.clientX -10;
lr.style.pixelTop = window.event.clientY -10;
oo('userImagex2').value = parseInt(rsWidth)
oo('userImagey2').value = parseInt(rsHeight)
}
// window.status = rsWidth / rsHeight + ' ::: ' + 90/110
}
oldX = window.event.clientX;
oldY = window.event.clientY;
document.body.releaseCapture();
return false;
}
function dragstart(what) {
document.body.setCapture();
dragging = what
}
function resizestart(what){
var lr = document.getElementById('imResize');
lr.setCapture();
resizing = what;
}
function resizestop(){
if (resizing){
var lr = document.getElementById('imResize');
lr.releaseCapture();
resizing = false;
}
rePosResizer();
}
function rePosResizer(){
var lr = document.getElementById('imResize');
var lc = document.getElementById('imDrag');
var l = document.getElementById('imGrid')
lr.style.pixelLeft = parseInt(lc.style.pixelLeft) + parseInt(l.style.pixelLeft) + parseInt(l.style.width.split('px')[0]);
lr.style.pixelTop = parseInt(lc.style.pixelTop) + parseInt(l.style.pixelTop) + parseInt(l.style.height.split('px')[0]);
}
function dragstop() {
document.body.releaseCapture();
if(dragging) dragging = false;
}
function init()
{
document.onmousemove = checkdrag;
document.onmouseup = dragstop;
document.onclick = resizestop;
}
// end drag/drop routine //
</script>
<link href="css/css.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-size: 10px;
}
.style1 {
font-size: 14px;
font-weight: bold;
}
-->
</style>
<form name="PhotoUpload" method="post" action="photoupload.asp" id="PhotoUpload">
<div id="Panel2">
<div id="imDrag" style="Z-INDEX: 4; LEFT: 4px; VISIBILITY: visible; WIDTH: 90px; CURSOR: hand; POSITION: absolute; TOP: 91px; HEIGHT: 110px">
<div id="imGrid" style="BORDER-RIGHT: #FFE000 2px dashed; BORDER-TOP: #FFE000 2px dashed; Z-INDEX: 3; VISIBILITY: visible; BORDER-LEFT: #FFE000 2px dashed; WIDTH: 90px; BORDER-BOTTOM: #FFE000 2px dashed; HEIGHT: 110px"><img onmouseup="dragstop()" onmousedown="dragstart('imDrag')" id="spacer" height="110"
src="images/transparent.gif" width="90" border="0" name="spacer"> </div>
</div>
<div id="imResize" style="Z-INDEX: 4; LEFT: 97px; POSITION: absolute; TOP: 203px"><a onmouseup="resizestop()" onmousedown="resizestart('imGrid')" href="javascript:;"><img src="images/resizer.gif" border="0"></a> </div>
<div id="imDiv" style="Z-INDEX: 1; LEFT: 5px; VISIBILITY: visible; WIDTH: 400px; POSITION: absolute; TOP: 91px; HEIGHT: 1px"> <img id="daimage" src="/status/photo/no/<%=filename%>" border="0" /></div>
<input type="submit" name="SaveButton" value="Spara bilden" id="SaveButton" class="button" />
<input name="UserImageX" id="UserImageX" type="hidden" value="0" />
<input name="UserImageY" id="UserImageY" type="hidden" value="0" />
<input name="UserImagex2" id="UserImagex2" type="hidden" value="90" />
<input name="UserImagey2" id="UserImagey2" type="hidden" value="110" />
<script language="javascript">
init();
</script>
</div>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>