Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-27-2007, 12:39 PM   PM User | #1
effpeetee
Senior Coder

 
effpeetee's Avatar
 
Join Date: Feb 2007
Location: Clapham Junction - London SW
Posts: 4,884
Thanks: 228
Thanked 204 Times in 203 Posts
effpeetee is an unknown quantity at this point
Exclamation textual menu to a pictorial one. Use CSS?

Hello friends.

I have, at the address below, a page using a text style menu.

I would like to convert this to a pictorial one with small thumbnails as hyperlinks to the full page version of the pictures.

I want to use CSS but I do not have any idea as to what the outline would need to be.

I am not asking for detailed code, as I need to sort that out for myself; but an outline would be very acceptable.

Many thanks in advance.

effpeetee.

http://www.exitfegs.co.uk/Picchoose.html

Last edited by effpeetee; 05-27-2007 at 01:42 PM.. Reason: Make less ambiguous
effpeetee is offline   Reply With Quote
Old 05-27-2007, 07:40 PM   PM User | #2
SouthwaterDave
Regular Coder

 
Join Date: May 2007
Location: UK
Posts: 180
Thanks: 0
Thanked 18 Times in 18 Posts
SouthwaterDave is on a distinguished road
I don't understand why you think CSS is the answer to your question.

You currently have links such as:

<a href="1a.html">1 - Steven relaxing on the Bluebell Railway.</a>

All you need to do is create the appropriate thumbnail image, call it something like thumb1a.jpg and then change your link to:

<a href="1a.html"><img src="thumb1a.jpg"></a>

I am, of course, assuming that you have image editing software. Paint.NET can be used for resizing images and it is a free download from Microsoft, but there are plenty of other programs around that could do this job.

Last edited by SouthwaterDave; 05-27-2007 at 07:42 PM..
SouthwaterDave is offline   Reply With Quote
Old 05-27-2007, 09:24 PM   PM User | #3
effpeetee
Senior Coder

 
effpeetee's Avatar
 
Join Date: Feb 2007
Location: Clapham Junction - London SW
Posts: 4,884
Thanks: 228
Thanked 204 Times in 203 Posts
effpeetee is an unknown quantity at this point
Quote:
Originally Posted by SouthwaterDave View Post
I don't understand why you think CSS is the answer to your question.

You currently have links such as:

<a href="1a.html">1 - Steven relaxing on the Bluebell Railway.</a>

All you need to do is create the appropriate thumbnail image, call it something like thumb1a.jpg and then change your link to:

<a href="1a.html"><img src="thumb1a.jpg"></a>

I am, of course, assuming that you have image editing software. Paint.NET can be used for resizing images and it is a free download from Microsoft, but there are plenty of other programs around that could do this job.
Thanks for the reply, but I am now in the process of building the thumbnail menu which can be accessed from this URL;

http://www.exitfegs.co.uk/Picchoose.html

The first picture (and its repeats) returns to the index page. All the others should return to the thumbnails. The program is called from the main index menu - Picture Menu.

It is not my code. One of the other Forum members, wrote it.

effpeetee

Last edited by effpeetee; 05-27-2007 at 09:27 PM.. Reason: textual ommision.
effpeetee is offline   Reply With Quote
Old 05-28-2007, 11:07 AM   PM User | #4
SouthwaterDave
Regular Coder

 
Join Date: May 2007
Location: UK
Posts: 180
Thanks: 0
Thanked 18 Times in 18 Posts
SouthwaterDave is on a distinguished road
It looks very nice, but it loads very slowly.

The reason for this is because you are using your fullsize images as thumbnails. You should use image editing software to resize your images as thumbnail images. This will result in much smaller files so they will load into a browser more quickly.

Many of the titles don't match up with the pictures, but I realise that you're still developing your site at present.
SouthwaterDave is offline   Reply With Quote
Old 05-28-2007, 11:58 AM   PM User | #5
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,678
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Quote:
Originally Posted by SouthwaterDave View Post
You should use image editing software to resize your images as thumbnail images.
If you are uploading this pictures by an html form and if you have a php or some other server-side support (presume so), you can use some image resizing codes to create a thumbnail image corresponding to each large image and store them in a seperate directory(using the same name will be helpful).
abduraooft is offline   Reply With Quote
Old 05-28-2007, 12:51 PM   PM User | #6
effpeetee
Senior Coder

 
effpeetee's Avatar
 
Join Date: Feb 2007
Location: Clapham Junction - London SW
Posts: 4,884
Thanks: 228
Thanked 204 Times in 203 Posts
effpeetee is an unknown quantity at this point
Thank you to SouthwaterDave and abduraooft for your comments.
Yes I do intend to reduce the images and I do have the necessary software.

My main concern at the moment is - How many pictures per download and how to space them.

The program that I am using will automatically fill the screen at any normal setting. Are the pictures too close to each other. Should I put all the pictures on one menu, or should I have multiple menus?

Any feedback will be welcome.

http://www.exitfegs.co.uk/Picchoose.html is the URL.

Site still being developed. There are '100 plus' pictures to include.

effpeetee

Last edited by effpeetee; 05-28-2007 at 12:54 PM..
effpeetee is offline   Reply With Quote
Old 05-28-2007, 03:07 PM   PM User | #7
effpeetee
Senior Coder

 
effpeetee's Avatar
 
Join Date: Feb 2007
Location: Clapham Junction - London SW
Posts: 4,884
Thanks: 228
Thanked 204 Times in 203 Posts
effpeetee is an unknown quantity at this point
I have resized the images and uploaded them. I have renamed the thumbnails filename + "a" and altered the HTML accordingly
I still have the text to put right.

Try again?

http://www.exitfegs.co.uk/Picchoose.html

effpeetee

Last edited by effpeetee; 05-28-2007 at 04:43 PM.. Reason: Corrections
effpeetee is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:42 PM.


Advertisement
Log in to turn off these ads.