Php :: Adding Image Over Image

[Zeeshan Hashmi 0]

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

[niran 0]

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 ]

Edited November 29, 2006 by Niran (see edit history)

[Zeeshan Hashmi 0]

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 ?

[niran 0]

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>

Edited November 29, 2006 by Niran (see edit history)

[Zeeshan Hashmi 0]

Ok thanks a lot. Great Help !!

[TavoxPeru 0]

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:

<?php// the id of the selected image$id=$_POST["id"];  // database settings and connectioninclude("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,