 Php :: Adding Image Over Image |
|
|
|
|
  |
 Sep 21 2006, 03:46 PM
Post
#1
|
|
|
Newbie [ Level 2 ]  Group: Members Posts: 24 Joined: 17-September 06 Member No.: 15,982  |
Hi Masters & Champions.
I want some help regarding putting and image over some location (x pixel , y pixel) of an image. Here it is quite important to note that the mage which is Inserted over an image must be clickable. Like for example suppose i put T on an image DD then the T must be clickable. Please gudie as this is quite important for me . Thanks |
 |
 
|
|
Sep 21 2006, 04:44 PM
Post
#2
|
|
|
Advanced Member Group: Members Posts: 190 Joined: 18-August 06 From: Fun.NiranVv.Com Member No.: 15,325 myCENTs:41.60 |
Using div tags you can use like this!!
enclose both the images in seperate div tags! specify the top and left positions of the image in that div tag itself using style sheet! and the imporatant thing is, you need to specify the z-index field for both the div tags! The image needs to be appeared on top should have a higher z-index than the image to be appeared in bottom! Dont forget to specify the position attribute!  I'm giving one example here: <div style="top:10px; left:10px; z-index:1; position:absolute"> <!--Bottom layer --> <img src="BottomImagesource.jpg" width="" height="" /> <!-- Image to be displayed bottom --> </div> <div style="top:40px; left:30px; z-index:2; position:absolute"> <!--Top layer --> <img src="YopImagesource.jpg" width="" height="" /> <!-- Image to be displayed on top --> </div> This code will display the 2nd div layer with higer z-index value ( here it is 2 ) over the 1st layer having lower z-index value (here it is 1) [Note: there is no need of any php as specified in the topic title ]
This post has been edited by Niran: Nov 29 2006, 02:02 AM |
|
|
|
|
Sep 21 2006, 04:53 PM
Post
#3
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 24 Joined: 17-September 06 Member No.: 15,982 |
thannks NIran, great help. But please let me know how to make the TOP image Click able. Like I have a map and on that map i want to put one of this PIN http://www.awesomebackgrounds.com/templates/map-pin1.GIF and i want this PIN to be Clickable. Please guide and give some idea how to get it done Dynamically through PHP ?
|
|
|
|
|
Sep 21 2006, 05:32 PM
Post
#4
|
|
|
Advanced Member Group: Members Posts: 190 Joined: 18-August 06 From: Fun.NiranVv.Com Member No.: 15,325 myCENTs:41.60 |
QUOTE(Zeeshan Hashmi @ Sep 21 2006, 10:23 PM)  thannks NIran, great help. But please let me know how to make the TOP image Click able. Like I have a map and on that map i want to put one of this PIN http://www.awesomebackgrounds.com/templates/map-pin1.GIF and i want this PIN to be Clickable. Please guide and give some idea how to get it done Dynamically through PHP ? thats simple friend!  Just use the <a> tag around the 2nd image (in the second layer) which will be displayed on top! That will make the second image alone as clickable one! Modified code will be like this: (for the 2nd div tag with z-index of 2) <div style="top:40px; left:30px; z-index:2; position:absolute"> <!--Top layer --> <a href="yourUrlPath"> <!-- Url for the top Image --> <img src="YopImagesource.jpg" width="" height="" /> <!-- Image to be displayed on top --> </a> </div> This post has been edited by Niran: Nov 29 2006, 02:03 AM |
|
|
|
|
Sep 22 2006, 01:43 AM
Post
#5
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 24 Joined: 17-September 06 Member No.: 15,982 |
Ok thanks a lot. Great Help !!
|
|
|
|
|
Sep 22 2006, 07:00 AM
Post
#6
|
|
|
Super Member  Group: [HOSTED] Posts: 794 Joined: 8-April 06 From: Lima - Peru Member No.: 12,579 myCENTs:78.07 |
QUOTE(Zeeshan Hashmi @ Sep 21 2006, 11:53 AM) thannks NIran, great help. But please let me know how to make the TOP image Click able. Like I have a map and on that map i want to put one of this PIN http://www.awesomebackgrounds.com/templates/map-pin1.GIF and i want this PIN to be Clickable. Please guide and give some idea how to get it done Dynamically through PHP ? Well for example if you have a table that store some attributes of any image like its filename, URL, Xposition, Yposition, width and height and by a html form someone selects an image you only need something like this code: CODE <?php // the id of the selected image $id=$_POST["id"]; // database settings and connection include("db.php"); // data selection $query="select * from ImageTable where id=$id"; $rs = mysql_query($query) or die("Erro No: ".mysql_errno() . "<br />Description: " . mysql_error()); $row=mysql_fetch_array($rs); ?> <!-- Image display --> <div style="top:10px; left:10px; z-index:1; position:absolute"> <!--Bottom layer --> <img src="BottomImagesource.jpg" width="" height="" /> <!-- Image to be displayed bottom --> </div> <div style="top:<?php echo $row["Xposition"]; ?>; left:<?php echo $row["Yposition"]; ?>; z-index:2; position:absolute"> <!--Top layer --> <a href="<?php echo $row["URL"]; ?>"> <!-- Url for the top Image --> <img src="<?php echo $row["filename"]; ?>" width="<?php echo $row["width"]; ?>" height="<?php echo $row["height"]; ?>" /> <!-- Image to be displayed on top --> </a> </div> Also note that its not necesary to store the width and height of the image because you can obtain it directly with the get_imagesize() function. Best regards, |
|
|
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 22nd November 2008 - 04:54 PM |