I am a beginner here in the web design world. I am having difficulties with my project for class and would LOVE some advice. The idea is to create a machine with php. My machine is the "pin hole camera". you upload your image, then you click the button provided for however long you want to and it exposes the image you uploaded in theory.

 

I am trying to use the javascript function onclick so that when you click on a button it times it until you release your mouse. then i would like on the release for it to redirect you to a page where you uploaded your picture. Any advice on how to do this? so far i have got this...

 

<div id="button">

 

<script type="text/javascript">

 

function start_timer() {

alert('timer started');

// start timer

}

function stop_timer() {

alert('timer stopped');

// stop timer

// forward to new page with time value as a GET

}

 

</script>

 

 

<input name="Push Me" type="image" id="button" src="button-2.jpg" onclick="start_timer();" onmouseup="stop_timer();" />

 

</div>

 

<div id="img">

 

<center><img src="holga-135pc_pinhole-2.jpg"/></center>

 

</div>

 

there are some gaps that need to be filled still and havent uploaded this version yet but here is my webpage without this code.

 

http://yourarthere.us/fsu/2009s_d/trudeau/...ect_3/index.php

 

main question is how do you redirect it to the new page? ThANK YOU!!

function stop_timer() {
alert('timer stopped');
// stop timer
window.location.href = "http://mysite.com/page2.html"; // or whatever your new page is
}

The window.location.href is the line doing the redirect for you (duh!).

Not sure about the timer stuff but here's the code for the page moving with time in GET form.

 

function stop_timer() {
alert('timer stopped');
// stop timer
window.location.href = "http://google.co.uk/?time=<?php echo time(); ?>"; // or whatever your new page is
}

In terms of the timing, you're better doing it all in JavaScript. Like this:

 

var stime=0;

function start_timer() {
 var d = new Date();
 stime=d.getTime(); // stores milliseconds since Unix epoch
}

function stop_timer() {
 var d = new Date();
 var tdiff = d.getTime()-stime; // runtime in milliseconds
 window.location.href = "http://mysite.com/page2.php?dur=" + tdiff;
}

Hopefully millisecond granularity is enough for you.

In terms of the timing, you're better doing it all in JavaScript. Like this:

 

var stime=0;

function start_timer() {
 var d = new Date();
 stime=d.getTime(); // stores milliseconds since Unix epoch
}

function stop_timer() {
 var d = new Date();
 var tdiff = d.getTime()-stime; // runtime in milliseconds
 window.location.href = "http://mysite.com/page2.php?dur=" + tdiff;
}

Hopefully millisecond granularity is enough for you.

 

 

Okay, i got it to move to the next page by doing this...

 

<form action="page_2.php" method="get">
<input name="Push Me" type="image" id="button" src="button-2.jpg" onclick="start_timer();" onmousedown="stop_timer();" />
<input type="image" name="image" />
<input type="hidden" name="images" value="page2" />

</form>

 

 

i want it to connect to the actual time you hold down the button. it doesnt seem to do that with the href code since that is just taking you to the new page. I used the form after the funtion you gave me which by the way THANK YOU soo much!

 

 

on page_2.php, im guessing you have to use a form like this

 

You held the button for <?php echo $_GET["????"]; ?> seconds!

 

not sure what exactly to echo right now but my main thing is just trying to get it to read how long you hold the button down and then print it to the new page. thanks again for all the help

 

 

Anna

Hi Anna,

 

OnClick and onMouseDown are roughly the same thing - they action when the mouse button is pressed.

Change it to onMouseDown and onMouseUp.

 

Also you dont need the form elements or indeed the form tag:

 

<input name="Push Me" type="image" id="button" src="button-2.jpg" onmousedown="start_timer()" onmouseup="stop_timer()" />

 

 

Then on page2.php you would use

You held the button for <?php echo $_GET['dur']; ?> seconds!

 

as dur is the specified argument in the javascript url redirect in the stop_timer function.

I thnk i got it!

 

http://yourarthere.us/fsu/2009s_d/trudeau/...ct_3/page_1.php

 

Take a look! thanks again for all the help guys!

 

Anna

working well anna, glad you got it sorted out

 

btw, because you are using the javascript redirect you can remove these lines:

 

<form action="page_2.php" method="get" name= "myform">
<input type="image" name="image" />
<input type="hidden" name="dur" value="dur" />
</form>

working well anna, glad you got it sorted out

 

btw, because you are using the javascript redirect you can remove these lines:

 

<form action="page_2.php" method="get" name= "myform">
<input type="image" name="image" />
<input type="hidden" name="dur" value="dur" />
</form>

 

 

It actually didnt work unless i had those in it. hm

 

While i have you guys on this project, how do i use a loop to move through transparencies? i have an image and i want to connect the amount of time you hold down your mouse to the amount of transparencies that overlay the image.

 

$trans = "<img src="trans copy.png"/>";
$seconds = "tdiff";



<body>




<div id="container">




You held the button for <?php echo $_GET['dur']/1000; ?> seconds!


<div class="img" style = "background:url(flowers1 copy.jpg)"></div>


<?php

for($i = 0; $i < count($seconds); $i++) 
{
print '$trans';
print $i;
print ' = ' .  $seconds[$i]  .'</div>';
}

?>


<div class="trans"</div>

 

thats what i have i know its wrong, what do i set the $seconds to? its connected to my page one which has this :

 

var stime=0;

function start_timer() {
 //alert('timer started');
 var d = new Date();
 stime=d.getTime(); // stores milliseconds since Unix epoch
}

function stop_timer() {
 //alert('timer stopped');
 var d = new Date();
 var tdiff = d.getTime()-stime; // runtime in milliseconds
 document.myform.dur.value = tdiff;
 window.location.href = "http://www.yourarthere.us/fsu/2009s_d/trudeau/Project_3/page_2.php?Push+Me.x=103&Push+Me.y=31&images=howdy" + tdiff;
}

So ive been googling...can you do it with an event loop? not even sure what that really is but it sounded like it was for functions like mouse clicks.

I got it All done. everything works! FINALLY

 

Thanks

 

http://yourarthere.us/fsu/2009s_d/trudeau/...ct_3/page_1.php

Sorry Anna, I was working from home yesterday and didnt get back over here. Glad you got it working