Stavo lavorando su un nuovo tool da mettere nel sito, un generatore di banner. Lo script in php aveva una funzione molto utile, praticamente cliccando su un punto specifico della base scelta si potevano ricavare le coordinate X,Y tramite un alert, per poi applicare le scritte con comodità.
- Codice: Seleziona tutto
onclick="alert('Coordinates:\n\nX POS: '+self.event.offsetX+'\nY POS: '+self.event.offsetY);"
sfortunatamente firefox non riconosce event e così stavo per rinunciare, ma mai demordere
vi posto un codice alternativo valido su tutti i browser per ottenere lo stesso risultato in maniera leggermente diversa.
- Codice: Seleziona tutto
<!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">
<title>Untitled Document</title>
<style>
#div1 {
width: 468px;
border: 1px solid yellow;
height: 60px;
position: relative;
}
</style>
</head>
<body>
<div id="div1"> BOX </div>
<form name="readout">
divmousepos:
<input name="divmousepos" value=" "/>
</form>
<script type="text/javascript" language="javascript">
<!--//
function displayDivMouseCoords(e)
{
coords = getMouseCoordsWithinEventTarget(e);
document.readout.divmousepos.value = coords.x + ', ' + coords.y;
}
divOne = document.getElementById('div1');
divOne.onmousemove = displayDivMouseCoords;
function getMouseCoordsWithinEventTarget(event)
{
var coords = { per: 0, y: 0};
if(!event) // then we have a non-DOM (probably IE) browser
{
event = window.event;
coords.x = event.offsetX;
coords.y = event.offsetY;
}
else // we assume DOM modeled javascript
{
var Element = event.target ;
var CalculatedTotalOffsetLeft = 0;
var CalculatedTotalOffsetTop = 0 ;
while (Element.offsetParent)
{
CalculatedTotalOffsetLeft += Element.offsetLeft ;
CalculatedTotalOffsetTop += Element.offsetTop ;
Element = Element.offsetParent ;
}
coords.x = event.pageX - CalculatedTotalOffsetLeft ;
coords.y = event.pageY - CalculatedTotalOffsetTop ;
}
return coords;
}
function getPageCoords(emt)
{
var coords = {x: 0, y: 0};
while (emt)
{
coords.x += emt.offsetLeft;
coords.y += emt.offsetTop;
emt = emt.offsetParent;
}
return coords;
}
function isElement(node)
{ return (node.nodeType == 1); }
-->
</script>
</body>
</html>
div1 è l'id su cui verrà applicato lo script, logicamente possiamo assegnarlo a qualsiasi oggetto, avendo cura d'identificarlo con attenzione.
potete vedere lo script in azione su questa [url=http://www.isola-atlantide.com/demo/coordinate.html]pagina di esempio[/url]
SitemapIndex
RSS Feed