Reading Data in a form: using image maps, lesson -9-…

October 30
I

will talk in this lesson about reading data in a form using image maps.you can use image maps (the clickable images we see in browsers) with PHP. So, Let’s begin…

 

Step *1: open xammp control panal, open your browser and open the editor. In htdocs folder create another folder and name it (imagemaps). Inside this folder you will save the files we create in this lesson. In this folder as usual, we will have two files imagemaps.html and php imagemaps.php.

Step *2: using the editor, create an HTML file, name it imagemaps.html, type this code in it and save.


<html>

<head>

<title>entering data with image maps</title>

</head>

<body>

<h1>

entering data with image maps

</h1>

<form method="post" action="phpimagemaps.php">

click the image:

<br />

<input name="imap" type="image" src="imap.jpg" />

</form>

</body>

</html>

As we used to do before, it is a normal form with post and action attributes, and input attribute, with name to give a certain name to the input attribute, type attribute which will be “image” in this lesson because we are using image maps, and (src) for the location of the image. Till here, you can see the image appears in the page. And note that no submit button is needed in here. Clicking the image will send the information to server. For the image you can add any image in your folder and name it (imap).

 

Step *3: Create a PHP file and name it php imagemaps.php. Type this code in it and save.


<html>

<head>

<title>reading data from image maps</title>

</head>

<body>

<h1>

reading data from image maps

</h1>

you clicked the image map at location (

<?php

echo $_REQUEST["imap_x"], ",  ", $_REQUEST["imap_y"];

?>

).

</body>

</html>

As you can see, the $_request in this lesson needs to add _x and _y to get the location of the exact point we clicked. The mouse location in the image map consists of two coordinates, an x coordinate and y coordinate. In PHP, those coordinates are stored under the name of the image map with_x and _y appended. That means you can display the location at where the user clicked the image in (x,y). where (0,0) is the upper left corner of the image and positive x is to the right, positive y is downward. And all measurement in pixels.

 

That is all for the lesson of today, seeyas next week with lesson 10, Reading Data in a form: using file uploads.

 


StumbleUpon.com Add us to your digg favorites Add us to your delicious favorites add us to your facebook favorites follow us on twitter Add us to your technorati favorites Add us to your wordpress favorites Add us to your reddit favorites Add us to livejournal favorites

One Response to “Reading Data in a form: using image maps, lesson -9-…”

  1. I admire the valuable information you offer in your articles. I will bookmark your blog and have my children check up here often. I am quite sure they will learn a lots of new stuff here than anybody else!

Leave a Reply