Add a link to image

I need to add a link to the test image that is drawn on the canvas.  I want to pass the recordset ID to a php script.

<script type="text/javascript">
      window.onload = function() {
            var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var IsImage1Loaded = false;
var IsImage2Loaded = false;

var img=new Image()
img.src="back.jpg";
var test=new Image()
test.src="../images/<?php echo $_GET['img'];?>.png";
img.onload = function() {
IsImage1Loaded = true;
if(IsImage2Loaded) finalCallback();
}

test.onload = function() {
IsImage2Loaded = true;
if(IsImage1Loaded) finalCallback();
}
function finalCallback(){
  document.getElementById('loader').style.display = 'none';
    cxt.drawImage(img,0,0);
<?php do { ?>
var testXcoord<?php echo $row_Recordset1['ID']; ?> = <?php echo $row_Recordset1['coordx']; ?>-20;
var testYcoord<?php echo $row_Recordset1['ID']; ?> = <?php echo $row_Recordset1['coordy']; ?>-40;      
cxt.drawImage(test,testXcoord<?php echo $row_Recordset1['ID']; ?>,testYcoord<?php echo $row_Recordset1['ID']; ?>);
                        
  <?php
  } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>       
};
      }
            </script>
LVL 1
debbieau1Asked:
Who is Participating?
 
MurfurFull Stack DeveloperCommented:
You could add the click functionality using jQuery by giving the image a class name and having jQuery monitor that name. I have given the image a class name of phplink on line 24 which when clicked will open the page as specified in the jQuery function on line 6 and pass the record id as a POST parameter.
<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript">
	$('.phplink').click(function(){
	   $.ajax({
	      type: 'POST',
	      url: 'newPage.php',
	      data: {'id':'<?php echo $row_Recordset1['ID']; ?>'}
	      }
	   });
	});
</script>

<script type="text/javascript">
	window.onload = function() {
		var c=document.getElementById("myCanvas");
		var cxt=c.getContext("2d");
		var IsImage1Loaded = false;
		var IsImage2Loaded = false;

		var img=new Image();
		img.src="back.jpg";
		var test=new Image();
		test.src="../images/<?php echo $_GET['img'];?>.png";
		test.className = "phplink";

		img.onload = function() { 
			IsImage1Loaded = true;
			if(IsImage2Loaded) finalCallback();
		}

		test.onload = function() { 
			IsImage2Loaded = true;
			if(IsImage1Loaded) finalCallback();
		}

		function finalCallback(){
			document.getElementById('loader').style.display = 'none';
			cxt.drawImage(img,0,0);
<?php
	do {
?>
			var testXcoord<?php echo $row_Recordset1['ID']; ?> = <?php echo $row_Recordset1['coordx']; ?>-20;
			var testYcoord<?php echo $row_Recordset1['ID']; ?> = <?php echo $row_Recordset1['coordy']; ?>-40;      
			cxt.drawImage(test,testXcoord<?php echo $row_Recordset1['ID']; ?>,testYcoord<?php echo $row_Recordset1['ID']; ?>);
<?php 
	} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));
?>
		};
	}
</script>

Open in new window

0
 
Ray PaseurCommented:
Perhaps you could use the HTML anchor tag?  Maybe something like this..

<a href="/path/to/URL"><img src="back.png"></a>
0
 
debbieau1Author Commented:
didn't work I'm afraid
0
 
debbieau1Author Commented:
didn't work I'm afraid
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.