Tutorial Downloads .com

Home

BEGINNING PHP4 : GENERATING GRAPHICS PART 5 - FURTHER INTERACTIVITY

BEGINNING PHP4 : GENERATING GRAPHICS PART 5 - FURTHER INTERACTIVITY DESCRIPTION What we have so far is a searchable database whose results can be displayed graphically. However, suppose we want to make the map more interactive and let the user click on the shop to get more information? What we need is an imagemap, a piece of HTML that defines regions within an image so that different actions can be taken when the user clicks on different parts of the image.

This free tutorial is a sample from the book Beginning Php 4 (Programmer to Programmer)


All the information that we need to create an imagemap is already stored in our database: m_area contains coordinates for each corner of a shop, while m_name contains the name of the shop.

If we were building an imagemap by hand for our image above, we would first open the map tag and give it a name:


We'd then create an AREA entry for each of the areas we wanted to make clickable:

Fashion Warehouse COORDS='350,0,350,100,400,150,500,150,500,0' 
HREF='malldetail.php?id=3'>

The ALT attribute of an IMG element is principally there for the sake of users with browsers that don't display images - in such a browser, the ALT text is used instead in place of the image. We are going to use the ALT text for something different. In recent versions of Internet Explorer and Netscape (since version 4 of each, in fact) the ALT text appears as a tool tip whenever the mouse pointer hovers over the image. We are going to use this feature to display a tool tip containing the shop name.

Note that IE4 and above support the TITLE attribute, which has the same effect, but can be used in any tag.

The shape attribute in the tag gives the shape of the area. Currently supported shapes are poly, rect and circle. The poly shape expects to find coordinates for the corners of the shape in coordinate pairs in the COORDS attribute, which is exactly what we have stored in our database. The last attribute we specify is HREF, which as usual specifies the URL to be followed when that particular area is clicked. We mark the end of the imagemap element with .

We still need to link the image to our imagemap, and we do that with the USEMAP attribute in the IMG tag.


The hash symbol # specifies that the imagemap is inside the current document, while BORDER=0 prevents us getting an ugly blue block around our image now that it's clickable.

Try It Out - Generating an Imagemap from the Database

Our imagemap is pretty useless unless we can create it on the fly, so let's change our mall.php script to create an imagemap for our mall diagram:

//mall3.php
include "./common_db.inc";
if ($criteria!="") {
$link_id = db_connect('mapping');

$query = "SELECT m_id, m_center, m_name, m_area FROM mall
WHERE m_desc LIKE '%".$criteria."%'";
$mallResult = mysql_query($query,$link_id);

if (mysql_num_rows($mallResult) > 0) {
$stores = array();
$mapstring = "";

while ($mallRow = mysql_fetch_array($mallResult)) {
$stores[count($stores)] = $mallRow[0];
$mapstring .= "\"".$mallRow[2].<br "\" SHAPE=\"poly\" COORDS=\"".$mallRow[3].
"\" HREF=\"malldetail.php?id=".$mallRow[0]."\">\n";
}

mysql_free_result($mallResult);
$show = implode(",", $stores);
echo " "\" USEMAP=\"#mall\" BORDER=0>";
} else {
echo "no shops found";
}
}
?>





How It Works

The first thing we do is to alter our SQL query to include the extra data m_center, m_name, and m_area, which we'll need to build the imagemap:

$query = "SELECT m_id, m_center, m_name, m_area FROM mall
WHERE m_desc LIKE '%".$criteria."%'";

We then declare a variable called $mapstring which will contain the meat of the imagemap definition:

$mapstring = "";

We already have a loop that runs through our selected records and builds up a string to pass to the image-drawing script showmall.php. We can therefore use this to build our imagemap as well. We can't yet output the imagemap to the browser, as we're still inside the IMG element, so sending any spurious text will break our image.

So, while we're inside the loop, we add code to build up $mapstring, using the same format as we would if building the imagemap manually. We define links to a new script, called malldetail.php, which we'll build in the next section; this will display details of the selected shop.

$mapstring .= "      "\" SHAPE=\"poly\" COORDS=\"".$mallRow[3].
"\" HREF=\"malldetail.php?id=".$mallRow[0]."\">\n";

When we come to write out the IMG element, we need to add in the USEMAP attribute as well as the BORDER attribute:

  echo "    "\" USEMAP=\"#mall\" BORDER=0>";

After we have written out the IMG tag we can create the imagemap:





Showing the Shop Detail

We're now going to develop the script malldetail.php, which will display details of the specific shop that the user clicked on. The first thing it has to do is a database lookup for the shop information. It will then display a thumbnail of the mall layout with just the current shop highlighted.

In order to display a thumbnail of the image, we're going to use a function called ImageCopyResized(). This lets us copy a section of a source image, resize it, and paste it into a new image. The function works with two images: a source image and a destination image. It uses the following syntax:

ImageCopyResized(destination image,
source image,
destination x, destination y,
source x, source y,
destination width, destination height,
source width, source height);

For each image, we specify x and y coordinates, as well as a width and a height. An area width wide and height high, the top-left hand corner of which lives at (x, y) is copied from the source image, scaled to the correct width and height (as specified for the destination image) and placed into the destination image at the specified (x, y) position. The diagram below illustrates the process:

Since showmall.php already has all the code we need to display our mall, we'll just modify it to be able to display a thumbnail of our image instead of the full thing.

Try It Out - Resizing Images

The first thing we need to do is to create our script malldetail.php:

//malldetail.php
include "./common_db.inc";

$link_id = db_connect('mapping');
$query = "SELECT * FROM mall WHERE m_id=".$id;
$mallResult = mysql_query($query,$link_id) or die($query);
$mallRow = mysql_fetch_array($mallResult);
?>

<?php echo $mallRow[1]; ?>
















Shop Number:
Phone Number:
Keywords:




Return


We then have to modify our showmall.php script to handle thumbnails:

//showmall2.php
include "./common_db.inc";

Header("Content-type: image/png");
if ($show!="") {
$image = ImageCreateFromPNG("groundfloor.png");
$shops = explode(",", urldecode($show));

$link_id = db_connect('mapping');

$gray = ImageColorAllocate($image,204,204,204);
for ($x=0;$x $query = "SELECT m_area,m_center FROM mall WHERE m_id=".$shops[$x];
$mallResult = mysql_query($query,$link_id);
$mallRow = mysql_fetch_array($mallResult);
$center = explode(",",$mallRow[1]);
ImageFill($image,$center[0],$center[1],$gray);
}
} else {
$image = ImageCreate(100,50);
$white = ImageColorAllocate($image,255,255,255);
$black = ImageColorAllocate($image,0,0,0);
ImageString($image,5,1,1,"Error",$black);
}
if ($thumbnail=="on") {
$thumb = ImageCreate(100,100);
ImageCopyResized($thumb,$image,0,0,0,0,100,100,500,500);
ImagePNG($thumb);
} else {
ImagePNG($image);
}
ImageDestroy($image);
?>

When we run our script we should this sort of result:

How It Works

Malldetail.php writes out an HTML file that contains the information about the shop, as well as a thumbnail image of the mall layout. This is the line that creates the image:

 WIDTH=100 HEIGHT=100>

This is almost exactly as we've seen before; the only difference is that the script has the extra argument of thumbnail=on. In showmall.php we now check whether to output a thumbnail or the full size image. All we need to change is the line:

ImagePNG($image);

We check for the value of $thumbnail, and if it's 'on' we resize the mall plan from its original dimensions of 500x500 to a more compact 100x100:

if ($thumbnail=="on") {
$thumb = ImageCreate(100,100);
ImageCopyResized($thumb,$image,0,0,0,0,100,100,500,500);
ImagePNG($thumb);
} else {
ImagePNG($image);
}

If the $thumbnail variable isn't set (or is set to anything other than "on") we display the image as normal.


Resource:
Posted By : PHPbrain
On date : 06.03.08

Most used PHP Tutorials

PHP Tutorials ( Ebooks , PDF's )
A Programmer’s Introduction to PHP 4.0 John.Wiley.and.Sons.PHP5.and.MySQL.Bible.eBook.pdf New Riders - PHP Functions Essential Reference.chm The Underground PHP and Oracle Manual
BEGINNING PHP4 : GENERATING GRAPHICS PART 1 - LAYING A FOUNDATION
BEGINNING PHP4 : GENERATING GRAPHICS PART 1 - LAYING A FOUNDATION DESCRIPTION PHP contains a range of functions that allow you to open, manipulate and output graphics to the web browser. During this chapter we will explore how these functions work and how we can apply them to display our data.
PHP Handout ( php pdf study material )
ATDB - 2004 PHP Handout - Volume 3 - PHP tutorial. Page - 1. Vol. 3 : PHP tutorial. PHP Handout. ATDB 2004. Page 2. ATDB - 2004 PHP Handout - Volume 3 - PHP …
PHP/MySQL Tutorial
Open source has brought a lot more than Linux to the computing world. It has also given us PHP and MySQL. According to Graeme, PHP and MySQL are the world’s best combination for creating data-driven sites. In the first installment of this three-lesson tutorial, our Kiwi guide covers everything you need to know to begin developing database hubs. He gives instructions for installation on both Unix and Windows, and then goes on to show some simple scripts that will insert information into a database and display that data on a Web page.
Beginning PHP and MySQL: From Novice to Professional, Third Edition
A comprehensive introduction to … the scripting language PHP and the MySQL database server. This book will not only expose … core aspects of both technologies, but will provide valuable insight into how they are used in unison to create dynamic data-driven Web applications.
Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites
If you know HTML, this guide will have you building interactive websites quickly. You'll learn how to create responsive, data-driven websites with PHP, MySQL, and JavaScript, regardless of whether you already know how to program. Discover how the powerful combination of PHP and MySQL provides an easy way to build modern websites complete with dynamic data and user interaction. You'll also learn how to add JavaScript to create rich Internet applications and websites.
Magento Beginner's Guide
Get your Magento store up and running using Magento Beginner's Guide by William Rice.
Database Handling with PHP/MySQL Tutorial ( php pdf study material )
This php pdf study material gives Database Handling with PHP/MySQL Tutorial.Unlike other scripting languages for Web page development (i.e. ASP), PHP is open-source, crossplatform, and offers excellent connectivity to most of today’s common databases including Oracle, Sybase, Microsoft SQL Server, MySQL, Postgresql, ODBC (and others). PHP also offers integration with various external libraries which enable the developer to do anything from generating PDF docum ents, accessing secure payment services and producing graphic output, to parsing XML.
PHP and MySQL Web Development - tutorial Book
The PHP server-side scripting language and the MySQL database management system (DBMS) make a potent pair. Both are open-source products--free of charge for most purposes--remarkably strong, and capable of handling all but the most enormous transaction loads. Both are supported by large, skilled, and enthusiastic communities of architects, programmers, and designers. PHP and MySQL Web Development introduces readers (who are assumed to have little or no experience with the title subjects) to PHP and MySQL for the purpose of creating dynamic Internet sites. It teaches the same skills as introductory Active Server Pages (ASP) and ColdFusion books--technologies that address the same niche.
PHP - Advanced Tutorial
PHP - Advanced Tutorial
PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide
It hasn't taken Web developers long to discover that when it comes to creating dynamic, database-driven Web sites, MySQL and PHP provide a winning open source combination. Add this book to the mix, and there's no limit to the powerful, interactive Web sites that developers can create. With step-by-step instructions, complete scripts, and expert tips to guide readers, veteran author and database designer Larry Ullman gets right down to business: After grounding readers with separate discussions of first the scripting language (PHP) and then the database program (MySQL), he goes on to cover security, sessions and cookies, and using additional Web tools, with several sections devoted to creating sample applications.
AJAX Programming with PHP
This php pdf study material gives the details of AJAX Programming with PHP
PHP amp Zend Framework Tutorial
This php pdf study material gives the details of PHP amp Zend Framework Tutorial.PHP & Zend Framework Tutorial. I did a lot of googling, installing, re-installing, . but finally got my first php project to …
PHP-Nuke Tutorial
This php pdf study material gives the details of PHP-Nuke Tutorial..Encyclopedia - Definition of terms. Ephemerids - A “quote of the day” block. PHP-Nuke Tutorial. How to operate your PHP-Nuke website. 22603 West Main Street …
OReilly Learning PHP and MySQL 2nd Edition Aug 2007
OReilly Learning PHP and MySQL 2nd Edition Aug 2007

Latest added PHP Tutorials

Beginning PHP and MySQL: From Novice to Professional, Third Edition
A comprehensive introduction to … the scripting language PHP and the MySQL database server. This book will not only expose … core aspects of both technologies, but will provide valuable insight into how they are used in unison to create dynamic data-driven Web applications.
PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide
It hasn't taken Web developers long to discover that when it comes to creating dynamic, database-driven Web sites, MySQL and PHP provide a winning open source combination. Add this book to the mix, and there's no limit to the powerful, interactive Web sites that developers can create. With step-by-step instructions, complete scripts, and expert tips to guide readers, veteran author and database designer Larry Ullman gets right down to business: After grounding readers with separate discussions of first the scripting language (PHP) and then the database program (MySQL), he goes on to cover security, sessions and cookies, and using additional Web tools, with several sections devoted to creating sample applications.
The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP
Dreamweaver CS4 is a massive step forward in terms of integration with the rest of the CS4 suite (Flash, Fireworks, Photoshop, etc.), and also includes a whole host of exciting new features of its own. The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP concentrates on getting the best out of Dreamweaver CS4, rather than going into every menu item and toolbar icon. The emphasis is on developing websites compliant with the latest web standards, using CSS, JavaScript libraries (with particular emphasis on Spry, Adobe's implementation of Ajax), and PHP.
PHP and MySQL Web Development - tutorial Book
The PHP server-side scripting language and the MySQL database management system (DBMS) make a potent pair. Both are open-source products--free of charge for most purposes--remarkably strong, and capable of handling all but the most enormous transaction loads. Both are supported by large, skilled, and enthusiastic communities of architects, programmers, and designers. PHP and MySQL Web Development introduces readers (who are assumed to have little or no experience with the title subjects) to PHP and MySQL for the purpose of creating dynamic Internet sites. It teaches the same skills as introductory Active Server Pages (ASP) and ColdFusion books--technologies that address the same niche.
Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites
If you know HTML, this guide will have you building interactive websites quickly. You'll learn how to create responsive, data-driven websites with PHP, MySQL, and JavaScript, regardless of whether you already know how to program. Discover how the powerful combination of PHP and MySQL provides an easy way to build modern websites complete with dynamic data and user interaction. You'll also learn how to add JavaScript to create rich Internet applications and websites.
Learn to Implement a Shopping Cart on your website using Zend Framework
This example-driven tutorial will takes you through the process of building Model-View-Controller-based web applications. Users will learn to create and develop a storefront application on their websites.
User Interaction and Email Automation
In this tutorial we will see how Symfony can generate nice looking forms for us, before creating our own formatting class. We then progress to create a fully customized form. We will also learn about how Symfony can be expanded to use the other third-party libraries, and how can we convert a module into a fully working plugin that can be packaged up and reused in other projects.
Agile works best in PHP.
In this tutorial, we will cover the following: • Introductions to agile philosophy, including agile values and agile principles • Common problems and fears that developers face while developing a product • What is meant by agility and how it can help • Extreme programming principles • Advantages of agile process models • Team agility • Agile process models • Agile principles for the PHP project team
Magento Beginner's Guide
Get your Magento store up and running using Magento Beginner's Guide by William Rice.
Macronimous - Writing clean, secure and easy to maintain PHP code
Any code when written in a clean, easy to understand and formatted way is readily accepted and acclaimed by one and all.