# How can i do this?



## Jaymie1989 (Apr 28, 2007)

Hi,

I am making a little website and i was to add things about phpBB.com
I was to add these 2 images with the text over them like on phpBB.com

Iv got the images, but how can i write on the images like on there site and it be links to the downloads of phpBB.com

Just like on the site
http://www.phpbb.com/
Here is an example -


----------



## titanalive (May 20, 2007)

There rae two ways in which you can do what you are aiming for :

1) Use flash to create this as it would make your life a hell of a lot easier. I am saying this as flash will allow you to create the links by a few drag and drops use ActionScripting 2.0 and just set the link behaviour its simple.

2) the other method is to use programs such as corel draw or photoshop and generate pictures such that you link the tex to where you want it.

THe third way to do this using html directly is to first generate a jpeg image of what you expect the output to look like with all the text placed in the right places like the image you uploaded. Following this use the image mapping ability of html to establish the links you want just get the co-ordinates right
Hope that helps. Let me know if you dont understand anything


----------



## tomdkat (May 6, 2006)

Another option is to make the images the background of a DIV where you want the links to appear and simply put the text you want to appear on top of the image in a paragraph, sort of like this:


```
<div style="background-image: url(images/phpbb-style-image.jpg);">
<p>This text will appear on top of the phpBB style image</p>
</div>
```
Peace...


----------



## Jaymie1989 (Apr 28, 2007)

Ok iv done the image.

I do need help with the page. I was using frames made by Dreamweaver CS3 so instead of 3 frames i have placed them all into one page.
The problem i have is im using IFrame and need the images and links from the first post to the right. i have the IFrame centered and before the closing DIV i added the HTML code that i have for the images and the text into the Center DIV but it just shows under the IFrame.

Here is the HTML code that i have

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jaymie1989</title>
</head>
<link href="/theme/index.css" rel="stylesheet" type="text/css" />

<body>
<div align="center"><img src="/Images/header.png" width="350" height="80" />
  <table width="695" border="1" background="/Image/button-bar.jpg">
    <tr>
      <td width="645"><div align="center">
      <span class="style1"><a href="home.htm" target="TheIFRAME">Home</a></span> - 
      <span class="style1"><a href="home.htm" target="TheIFRAME">About</a></span> - 
      <span class="style1"><a href="home.htm" target="TheIFRAME">Project</a></span> - 
      <span class="style1"><a href="home.htm" target="TheIFRAME">Downloads</a></span> - 
      <span class="style1"><a href="home.htm" target="TheIFRAME">Contact</a></span> - 
      <span class="style1"><a href="home.htm" target="TheIFRAME">Links</a></span></div>
      </td>
    </tr>
  </table>
</div>
</div>
<iframe src="http://www.dj-ultra.co.uk/home.html" title="Home" width="700" height="500" name="TheIFRAME">
<div align="center">
  <!-- Alternate content for non-supporting browsers -->
</div>
</iframe>
<div align="center"><h3>Latest phpBB3 release</h3></div>
<table width="260" height="77" border="0" align="center" background="./Image/bg_download.png">
  <tr>
    <td width="255" height="68"><dt class="style20"><a href="http://www.phpbb.com/downloads/olympus.php" target="_blank" class="style25">DOWNLOAD LATEST RELEASE</a></dt>
      <span class="style23"><span class="style24"><a href="http://www.phpbb.com/downloads/olympus.php" target="_blank"><font color="#FFFFFF"><strong>Version 3.0.0<br />
      Released 2007-12-13</strong></a></font></span></span>
      <dd class="style21"><span class="style15"><a href="http://www.phpbb.com/about/features/" target="_blank" class="style17">Why upgrade?</a> &bull; <a href="http://www.phpbb.com/about/features/compare.php" target="_blank" class="style17">Compare solutions</a></span></dd></td>
  </tr>
</table>
<br />
<div align="center">
  <table width="267" height="77" border="0">
    <tr>
      <td width="261" height="59" background="./Image/bg_download2.png"><p><strong><span class="style26"><u><a href="http://www.phpbb.com/downloads/" target="_blank" class="style25">DOWNLOAD LEGASY RELEASE</a></u><br />
              <span class="style24"><a href="http://www.phpbb.com/downloads/" target="_blank"><font color="#FFFFFF">Version 2.0.23<br />Released 2008-02-17</a></font></span></span></strong></p>
      </td>
    </tr>
  </table>
</div>
<br />
  <table width="265" height="69" border="0" align="center">
    <tr>
      <td width="259" background="./Image/bg_shop.png"><p class="style31"><a href="http://www.phpbb.com/shop/" target="_blank"><font color="#000000">phpBB SHOP</a></font><a href="http://www.phpbb.com/shop/" target="_blank"><br />
            <span class="style32">Support the phpBB projectand get<br />
        a <u>Bertie 3.0</u> from the online store.</span></a><span class="style32"></span></p>
      </td>
    </tr>
  </table>
</body>
</html>
```
Thats everything but the images which are in the location that it shows in there.


----------



## tomdkat (May 6, 2006)

Would you post the bg_download and bg_download2 PNGs please?

Thanks! 

Peace...


----------



## Jaymie1989 (Apr 28, 2007)

Here are all the images that i have used


----------



## tomdkat (May 6, 2006)

Danke! 

Peace...


----------



## tomdkat (May 6, 2006)

Jaymie1989 said:


> The problem i have is im using IFrame and *need the images and links from the first post to the right*.


I don't follow the part in bold. Could you clarify for me? 

Peace...


----------



## Jaymie1989 (Apr 28, 2007)

Well this is an example of how its suppose to be but without the images
http://www.jay1989.110mb.com/UntitledFrameset-3.html

On the side where its got Latest phpBB3 Release, Thats what showing up at the bottom of the HTML that i gave you, Its in frames and i just want it all in one page and no in frame pages


----------



## Jaymie1989 (Apr 28, 2007)

The other pages that were saved auto in Dreamweaver is

http://www.jay1989.110mb.com/Untitled-2.html

http://www.jay1989.110mb.com/UntitledFrame-2.html

http://www.jay1989.110mb.com/UntitledFrame-3.html

And thats it.


----------



## tomdkat (May 6, 2006)

Jaymie1989 said:


> Well this is an example of how its suppose to be but without the images
> http://www.jay1989.110mb.com/UntitledFrameset-3.html
> 
> On the side where its got Latest phpBB3 Release, Thats what showing up at the bottom of the HTML that i gave you, Its in frames and i just want it all in one page and no in frame pages


Gotcha, I'm tracking now. 

Peace...


----------



## Jaymie1989 (Apr 28, 2007)

Thanks Your A Gem


----------



## Jaymie1989 (Apr 28, 2007)

Ok,

Iv got to take my other half to the hospital so i will be back when there done with us.

Thanks for helping me, I will check this thread when im back.


----------



## tomdkat (May 6, 2006)

Ok, if *I* were in your shoes, I would do it like this:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Jaymie1989 - phpBB image layout</title>
  <style type="text/css">
#pagebody {
border: none;
display: block;
margin-right: auto;
margin-left: auto;
width: 800px;
}
.phpBB-links {
border-style: none;
display: block;
float: right;
position: relative;
width: 280px;
}
#nav-bar {
border: 5px ridge silver;
background-image: url(image/button-bar.jpg);
background-repeat: repeat-x;
background-position: center center;
display: block;
margin-right: auto;
margin-left: auto;
}
.phpbb-text {
font-size: small;
padding-top: 5px;
margin-left: 8px;
}
#phpbb-link {
display: block;
margin-right: auto;
margin-left: auto;
height: 77px;
background-image: url(image/bg_download.png);
width: 260px;
}
#phpbb-shop {
display: block;
height: 60px;
margin-right: auto;
margin-left: auto;
background-image: url(image/bg_shop.png);
width: 260px;
}
#phpbb-link2 {
display: block;
height: 77px;
margin-right: auto;
margin-left: auto;
background-image: url(image/bg_download2.png);
width: 260px;
}
.phpbb-link {
margin-bottom: 10px;
}
  </style>
</head>
<body>
<div id="pagebody">
<div style="text-align: center;"><img
 style="width: 350px; height: 80px;" alt="Header image"
 src="image/header.png"><br>
<div id="nav-bar">
<span class="style1"><a href="home.htm"
 target="TheIFRAME">Home</a></span>
- <span class="style1"><a href="home.htm"
 target="TheIFRAME">About</a></span> - <span
 class="style1"><a href="home.htm"
 target="TheIFRAME">Project</a></span> - <span
 class="style1"><a href="home.htm"
 target="TheIFRAME">Downloads</a></span> - <span
 class="style1"><a href="home.htm"
 target="TheIFRAME">Contact</a></span> - <span
 class="style1"><a href="home.htm"
 target="TheIFRAME">Links</a></span>
</div>
</div>
<div class="phpBB-links">
<h3 style="text-align: center;">Latest phpBB3 release</h3>
<div class="phpbb-link" id="phpbb-link">
<p class="phpbb-text"><a
 href="http://www.phpbb.com/downloads/olympus.php"
 target="_blank">DOWNLOAD LATEST RELEASE</a></p>
</div>
<div class="phpbb-link" id="phpbb-link2">
<p class="phpbb-text"><a
 href="http://www.phpbb.com/downloads/olympus.php"
 target="_blank">DOWNLOAD LEGACY RELEASE</a></p>
</div>
<div class="phpbb-link" id="phpbb-shop">
<p class="phpbb-text"><a
 href="http://www.phpbb.com/downloads/olympus.php"
 target="_blank">phpBB shop</a></p>
</div>
</div>
<div style="margin-left: 1px;"><iframe
 src="http://www.thx.com/" title="Home" name="TheIFRAME"
 height="510" width="505"></iframe></div>
</div>
</body>
</html>
```
Attached is a screenshot of how the above HTML renders in Opera 9.5b3. I changed the source of the iframe to have some "fun". 

Is that basically what you're after?

Peace...


----------



## Jaymie1989 (Apr 28, 2007)

That looks great thanks.
I am just changing the text and thats it. Ill give you a link when its done


----------



## tomdkat (May 6, 2006)

One other thing, you might want to change the header PNG to a transparent GIF so it will display consistently across IE6 and other modern browsers. IE6 doesn't support alpha transparency without "help" so the page I created, using your header image, has a light blue background in the header image when I view the page in Maxthon 2.0.8 (IE6 rendering engine). The page displays the PNG as intended in Safari, Mozilla Firefox, and Opera just fine.

Peace...


----------

