Centered Images 1

[JBell99]

There is this excellent web site i have seen for Final Fantasy that has their screen shot images in a table, then when you click on them, the pictures appear centered on a black background and they have textunder them(go to home page and go back) they also have an ad banner at the top. How is this done? I also want to do a screen shot gallery on my web site, that is layed out a little bit like theirs and in table, so can someone tell me how to have my thumbnail imgae in the table to become the link to a specialized image page(it really is an image page, if you try to save the page using IE 5.5 it only saves the image and not the page.

Here is the page with the table of screen shots

http://focusff.rpghosts.com/ff8/screenshots_1-1.html

someone please go there,click on an image in the table,and tell me how to do it before i fry my brian trying to figure it out.

 

[LeonTang]

Hi,

There is no need to fry your brain over this

What the web designer did was to create a table.

Within this table, he displayed the images in a table cell each. When you click on this image, you will load a new page into your browser(notice your url).

This image is the same as the one on the page thats load up when you click on it. All he did was to set the size of the display image.

<a href=&quot;../cgi-bin/image.pl?../ff8pics/screenshots/disc1/gallery1/1.jpg&quot;><img src=&quot;../ff8pics/screenshots/disc1/gallery1/thumbs/1.jpg&quot; width=&quot;105&quot; height=&quot;74&quot; border=0></a><br></td>

This code is taken from this website. You can see he set the width and height of the image. using the 'width' and 'height' and used '<a href=&quot;&quot;>' so that when you click on the image, it will load to the new page. However, he used cgi-bin scripting so that it will be easier to display the page instead of displaying them 1 by one. So you can also do this where abc.html is the page to load:-

<a href=&quot;abc.html&quot;><img src=&quot;1.jpg&quot; width=&quot;105&quot; height=&quot;74&quot; border=0></a>

This page that loads up contains the actual image with the 2 hyperlinks at the bottom of the image. All you need to do is this:-

<center>
<img src=&quot;1.jpg&quot; border=0>
<br>
<a href=&quot;hello.html&quot;>Hello</a> | <a href=&quot;world.html&quot;>World</a>
</center>

Thats all

Regards,
Leon If you need additional help, you can email to me at zaoliang@hotmail.com I don't guaranty that I will be able to solve your problems but I will try my best

 

[JBell99]

Thank you so much! Until I saw that web site, I had no idea that images could be displayed that way and I had a really hard time figuring it out, but thanks to you I got it. So in return I voted for you as Tip Master of the week.

 

[LeonTang]

Your welcome

Another tip, if you want to view the source of the html page you are viewing, you can right click on that page(don't right click over images). Or if the person isn't using frames, you can click on the menu View -> Page source for Netscape or View -> Source in IE.

Most of the time, the source codes for the html page is there. However, some of the source codes are very long so it will take more time to look at what the web designer is doing.

Regards,
Leon
(p.s. Thanks for your vote.) If you need additional help, you can email to me at zaoliang@hotmail.com I don't guaranty that I will be able to solve your problems but I will try my best