det kan vi ;)
... det var godt nok svær at finde
... ledte scripte igennem på kryds og tværs :/
(dog er 200 point for meget bare kast lidt ;) )
<span id="alph_box" style="border: 1px solid black; left: 142px;top:0px;">
her er et eksempel der virker:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><!-- Metas, der forhindrer toolbars ved mouseover på billeder -->
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false"><title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#sliderCont {
position: relative;
}
#alph_box {
position: absolute;
width: 170px;
height: 100px;
left: 0;
top: 0;
background-color: #EFEFEF;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}
.imageborder {
border: 1px ridge #000000;
}
</style>
<script type="text/JavaScript">
/* Handy wrapper funktioner */
var d=document;
function gE(id){return d.getElementById(id)};
function pI(s){return parseInt(s)};
function gXe(e){e=e||window.event;if(!e.srcElement)e.srcElement=e.target;
if(typeof e.clientX=="undefined"){e.clientX=e.pageX;e.clientY=e.pageY}
if(!e.preventDefault)e.preventDefault=function(){this.returnValue=false};
return e};
function gYe(e){e=e||window.event;if(!e.srcElement)e.srcElement=e.target;
if(typeof e.clientY=="undefined"){e.clientY=y.pageYe.clientX=e.pageX;}
if(!e.preventDefault)e.preventDefault=function(){this.returnValue=false};
return e};
/********************************/
/* Constructor for slider objektet */
function SliderObject(sliderID, fieldXID, fieldYID) {
// Opret reference til objektet selv.
// - nødvendig ved callback fra event-handlers
var me = this;
this.oSlid = gE(sliderID); // Slider elementet
this.oXField = gE(fieldXID); // X Feltet, der skal opdateres
this.oYField = gE(fieldYID); // Y Feltet, der skal opdateres
this.minXValue = 0; // Default X minimums værdi
this.maxXValue = 650; // Default X maximums værdi
this.minYValue = 0; // Default Y minimums værdi
this.maxYValue = 180 // Default Y maximums værdi
// Den samlede bredde af sliderens venstre- og højre-border
this.borderXOffset = pI(this.oSlid.style.borderLeftWidth) + pI(this.oSlid.style.borderLeftWidth);
this.borderYOffset = pI(this.oSlid.style.borderTopWidth) + pI(this.oSlid.style.borderTopWidth);
this.oDownX = null; // Indeholder senere X-værdien for brugerens klik
this.oDownY = null; // Indeholder senere Y-værdien for brugerens klik
// Sæt event-handler på slideren
this.oSlid.onmousedown = function(e){me.mDown(e)};
return this; // returner objektet
}
var _p = SliderObject.prototype;
_p.mDown = function(e) {
var me = this; // Reference til objektet selv
xe = gXe(e); // Skab et X-browser event-objekt
ye = gYe(e); // Skab et X-browser event-objekt
// Gem documentets event-handlers til senere brug
this.docEventCache = {"move":d.onmousemove, "up":d.onmouseup};
// Sæt event-handelers på dokumentet
d.onmouseup = function(e){me.mUp(e)};
d.onmousemove = function(e){me.mMove(e)};
// Gem venstre-værdien for brugerens klik - minus sliderens venstre-offset
this.oDownX = xe.clientX - pI(this.oSlid.style.left);
this.oDownY = ye.clientY - pI(this.oSlid.style.top);
}
_p.mMove = function(e) {
// Sæt max-værdien for sliderens left
var x, maxXL = this.maxXValue-(this.oSlid.offsetWidth-this.borderXOffset);
var y, maxYL = this.maxYValue-(this.oSlid.offsetTop-this.borderYOffset);
xe = gXe(e); // Skab et X-browser event-objekt
ye = gYe(e); // Skab et X-browser event-objekt
x = xe.clientX - this.oDownX; // Udregn den nye venstre-værdi
y = ye.clientY - this.oDownY; // Udregn den nye top-værdi
// Juster, hvis værdien er under min eller over max
// - sæt den nye værdi på slideren
this.oSlid.style.left = ((x<this.minXValue)? this.minXValue : (x>maxXL)? maxXL : x) + "px";
this.oSlid.style.top = ((y<this.minYValue) ? this.minYValue : (y>maxYL)? maxYL : y) + "px";
}
_p.mUp = function() {
// Opdater elementet i formen
this.oXField.value = pI(this.oSlid.style.left);
this.oYField.value = pI(this.oSlid.style.top);
// Retabler dokumentets event-handlers
d.onmouseup = this.docEventCache.up;
d.onmousemove = this.docEventCache.move;
}
var oSlider = null;
window.onload = function(){
oSlider = new SliderObject("alph_box", "sliderX", "sliderY");
oSlider.maxXValue = 650;
oSlider.maxYValue = 230;
}
</script></head><body>
<div style="margin: 50px;" onselectstart="return false">
<div id="sliderCont">
<span id="alph_box" style="border: 1px solid black; left: 142px;top:0px;"><img src="" ondragstart="return false;" onmousedown="return false;" style="padding: 0px; margin-top: 10px;"></span>
<img id="img_galleripic" src="123_files/stribe.jpg" style="width: 666px;" class="imageborder" ondragstart="return false" onmousedown="return false">
</div>
</div>
<form>
<input id="sliderX" name="kaldMigHvadDuVil" value="Bør være type='hidden'" type="text">
<input id="sliderY" name="kaldMigHvadDuVil" value="Bør være type='hidden'" type="text">
</form>
</body></html>
