Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    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

  • #2
    Regular Coder
    Join Date
    May 2007
    Location
    UK
    Posts
    180
    Thanks
    0
    Thanked 18 Times in 18 Posts
    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.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

  • #4
    Regular Coder
    Join Date
    May 2007
    Location
    UK
    Posts
    180
    Thanks
    0
    Thanked 18 Times in 18 Posts
    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.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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).

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •