?
Solved

Add a link to image

Posted on 2011-05-10
4
Medium Priority
?
279 Views
Last Modified: 2012-05-11
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>
0
Comment
Question by:debbieau1
  • 2
4 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 35727436
Perhaps you could use the HTML anchor tag?  Maybe something like this..

<a href="/path/to/URL"><img src="back.png"></a>
0
 
LVL 11

Accepted Solution

by:
Murfur earned 2000 total points
ID: 35727843
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
 
LVL 1

Author Comment

by:debbieau1
ID: 35728409
didn't work I'm afraid
0
 
LVL 1

Author Comment

by:debbieau1
ID: 35728410
didn't work I'm afraid
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month15 days, 21 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question