PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
?

display xy coords en gif on mouseclick java

Door Onbekende gebruiker op 12-10-2005 03:05
1.084 views
Bij een click op een image van 1000X700 moet d.m.v. een javascript een gif verschijnen op de juiste plaats en de coordinaten van het gifje in een textveld voor verzending.
Dit is het script tot nu toe, ik krijg het niet goed werkend.
<script type="text/JavaScript">
<!-- Chief...
var windowX=windowY=locX=locY=x=y=0;
var locationX=0;
var locationY=0;
window.onload=init;

function init()
{
if (window.Event)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=getXY;
}

function getXY(e)
{
windowX=(window.Event)?e.pageX:event.clientX;
windowY=(window.Event)?e.pageY:event.clientY;
locX=document.getElementById('daPic').offsetLeft;
locY=document.getElementById('daPic').offsetTop;
x=windowX-locX-1;
y=windowY-locY-1;
}
function doStuff()
{
locationX=x;
locationY=y;
}
function setStuff()
{
if (locationX!=0 && locationY!=0)
{
document.getElementById('someText').style.display="block";
document.getElementById('someText').style.top=locationY;
document.getElementById('someText').style.left=locationX;
}
}
//-->
</script>


<script language="JavaScript1.2">
<!-- Original: CodeLifter.com ([email protected]) -->
<!-- Web Site: http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}
// End -->
</script>

<form name="Show">
X <input type="text" name="MouseX" value="0" size="4">
Y <input type="text" name="MouseY" value="0" size="4">
</form>

<a href="nieuw.asp" onClick="setStuff(); return false;">
<img src="map_bg.png" border="0" width="1000" height="700" id="daPic" name="daPic" onClick="doStuff();">
<div id="someText" style="border:0px solid black; display:none; z-index:100; position:absolute;"><img src="fa.gif" border="0"></div></a>

Jan Koehoorn
12-10-2005 05:26
Das een lastig JavaScriptje!

Ik denk dat je het anders aan moet pakken. In plaats van één grote image, zou ik een heleboel kleintjes maken. Als je die namelijk allemaal hun eigen id meegeeft, is het veel makkelijker om met JavaScript te traceren op welke geklikt is.

Als je die id vervolgens in een mail prakt, weet jij precies welke pixel (= 1 kleine image) je bezoeker bedoelt.
Jan Koehoorn
12-10-2005 05:48 gewijzigd op 12-10-2005 05:49
Ik ben even aan de gang geweest om mijn idee uit te werken. Het resultaat vind je op deze pagina. Kijk maar of je er iets aan hebt!
?
Onbekende gebruiker
12-10-2005 12:41
Hier kan ik wel iets mee.
Alleen moet de gekozen waarde van de pixels in een textveld verschijnen, zodat deze verzonden kan worden.
Iig, bedankt voor de hulp zover.
?
Onbekende gebruiker
12-10-2005 13:37
Nou, ik ben er mee bezig geweest maar ik kom er niet helemaal uit.


Wanneer ik het pixelveld groter maak, (1000x700 is de bedoeling), valt het uit elkaar en ten tweede wil ik de waarde niet in een popup maar in het textveld.
De pixel linksboven moet als waarde 1-1 krijgen.
zie : http://www.eenmiljoeneurohomepage.nl/pixelp.php
Jan Koehoorn
12-10-2005 13:42
vitens schreef op 12.10.2005 13:37
Nou, ik ben er mee bezig geweest maar ik kom er niet helemaal uit.


Wanneer ik het pixelveld groter maak, (1000x700 is de bedoeling), valt het uit elkaar en ten tweede wil ik de waarde niet in een popup maar in het textveld.
De pixel linksboven moet als waarde 1-1 krijgen.
zie : http://www.eenmiljoeneurohomepage.nl/pixelp.php


De images zijn nu geloof ik 9 * 9 pixels. Die zouden dus iets kleiner moeten. Die waarde in een textveld zetten is standaard JavaScript, maar dat lukt je dus niet?

Ik zal straks een voorbeeldje voor je maken.
?
Onbekende gebruiker
12-10-2005 13:49
Nee, dat lukt me dus niet. De pixels zijn 9*9. Het veld mag best groter.
Bij voorbaat dank voor het voorbeeld.
?
Onbekende gebruiker
12-10-2005 16:05
Dat is niet precies wat ik bedoel, Han. En bovendien iets te ingewikkeld. Mijn kennis daarvoor is te beperkt.
Ik wacht wel op het voorbeeldje van Jan Koehoorn.
?
Onbekende gebruiker
12-10-2005 20:46
Nou, ik ben er nog een tijdje mee bezig geweest maar kom er nog niet uit.
De grootte van het pixelblok klopt nu, de juiste x,y coordinaten ook, alleen de uitvoer opent in een nieuw venster i.pv. het formulier.
Is het mogelijk om ook onmouseclick het aangeklikte pixeltje te vervangen door een ander img?
Dit is de code zover :

Body

<script language="javascript" type="text/javascript">
// dit script staat voor de duidelijkheid in hetzelfde bestand
// koppel een functie aan het onload event van het window
window.onload = init;

function init () {
// haal alle img's op in een array
var x = document.getElementsByTagName ('img');
// bepaal de lengte van de array
var n = x.length;

// loop door alle elementen van de array om te kijken of ze class="popup" hebben
// als ze aan die voorwaarde voldoen, koppel dan een functie aan het onclick event
for (i = 0; i < n; i++) {
if (x[i].className.indexOf ('pixel') != -1) {
x[i].onclick = function () {
return handle_click (this);
}
}
}
}

function handle_click (obj) {
document.write (obj.id);
}

</script>

<style>

img.pixel {
cursor: pointer;
margin: 0;
}
p.pixelrow {
line-height: 0;
margin: 0;
padding: 0;
}
</style>

Head


<?php
for ($i = 1; $i < 71; $i++) {
echo "\n<p class=\"pixelrow\">";

for ($j = 1; $j < 101; $j++) {
echo '<img id="' . $i . '-' . $j . '" src="../images/bg10.gif " class="pixel">';
}

echo "</p>";
}
?>

Reageren

Inloggen om te reageren