HTML - Efficient Use Of Thumbnails In A Photo Show Web Page?
I am designing a website for a local city park on a volunteer basis and am a bit of a newbie at this. Quite a simple but I hope effective layout with a row of tabs on the top of the index page which takes one to web pages on flora, fauna, geology, history, etc.
The design basis is "informative" rather than glitzy. There is a fair amount of text and I have minimized the graphics within each page to make for rapid page loading and more "substance" rather than glitz. However, there does need to be a web page showing photos of fauna, flora, etc. There will be about 80-100 photos available for viewing. At the moment these are all on one page as thumbnails, using a table and this sort of thumbnail code: HTML Code: <td><a href= "photos/IMG_1036.JPG"><img src="photos/IMG_1036.JPG" width="150" height="100"></a></td> However, even with just 30 photos so far, the page takes a while to load, and the thumbnails reload as one scrolls up and down the page. I know part of my problem is many of these photos are 1600x1200 - I will be reducing them to 800x600 which I think is the best viewing size. That reduces image file size to 1/4 at about 200KB each. It might make page loading quicker but with just 80 photos it would be a 16MB page. Any ideas how to make this more efficient, besides having more than one page of photos, would be greatly appreciated. Larry Similar TutorialsHi, Is there any possible to show a HTML or ASP page inside the table. I have tried with frames but i dont know how to execute exacltly. Thanks How would I have a page open once only no matter what domain the person types (google.com or google.com/faq, etc.)? I have a link on the page that if the user clicks it, two other pages open, but the first one is the one I need to have "replace" the page so that it doesn't appear anymore. I'm uploading a file to a server like this: <form action="upload.php" enctype="multipart/form-data" method="post"> <input type="file" name="datafile" size="40"> <input type="hidden" name="MAX_FILE_SIZE" value="1000000"> <input type="submit" value="Send"> </form> upload.php is receiving the file fine. I am processing the uploaded file which may take minutes to do. Upload.php displays results as it processes the uploaded file. However the new page drawn by upload.php does not display until the entire uploaded file is processed. Is there a way to have the new page display the progress of the processing? thanks, William hi guys, ive got a quiz box (its rubbish but its for an assignement) and atm my results pop up in an alert box, how would i get the results to be written into a div on my html page? thanks for any help. sam Code: var ans = new Array; var done = new Array; var yourAns = new Array; var explainAnswer = new Array; var score = 0; ans[1] = "b"; ans[2] = "b"; ans[3] = "a"; ans[4] = "c"; ans[5] = "b"; explainAnswer[1]="Roar is Blackburn's mascot"; explainAnswer[2]="John Coleman is Accrington's manager"; explainAnswer[3]="The picture was infact David Beckham"; explainAnswer[4]="The golden oldie Ryan Giggs was PFA Player of the year"; explainAnswer[5]="The reason why Answer 5 is Blah Blah Blah"; function Engine(question, answer) { yourAns[question]=answer; } function Score(){ var answerText = "How did you do?\n------------------------------------\n"; for(i=1;i<=5;i++){ answerText=answerText+"\nQuestion :"+i+"\n"; if(ans[i]!=yourAns[i]){ answerText=answerText+"\nThe correct answer was " +ans[i] + "\n"+explainAnswer[i]+"\n"; } else{ answerText=answerText+" \nCorrect! \n"; score++; } } answerText=answerText+"\n\nYour total score is : "+score+"\n"; //now score the user answerText=answerText+"\nComment : "; if(score<=0){ answerText=answerText+"You need to learn some more"; } if(score>=1 && score <=1){ answerText=answerText+"Bit more practice needed"; } if(score>=2 && score <=2){ answerText=answerText+"Bit more practice needed"; } if(score>=3 && score <=3){ answerText=answerText+"Neither bad or birlliant. Good effort"; } if(score>=4 && score <=4){ answerText=answerText+"4/5 aint bad!"; } if(score>4){ answerText=answerText+"You are a footballing expert!!"; } alert(answerText); } Hi EveryBody, I want to add a preview of html page feature in my project. I had created registration form and I need when user click submit button,user should get a preview of registration form after that further operation will b performed. Guys just tell me how can i achieved this. Any clue or sample code so i can learn it and implement in my project. Hi, i am restarting a site. I have the old HTML in text docs that I saved. I am using Cpanel. The home (index.html) page worked fine. But, from there I am trying to add another page (about_us). So what I am doing is creating a new file, and naming it about_us.html. Then I edit the file and paste in the code. But when trying to view the page as site.com/about_us it doesnt show up. But if I type site.com/about_us.html it does show up. The new file is displayed right above the index page in the file manager and all... I don't want our visitors to have to type ".html" at the end, they won't be likely to remember to anyway. I have no idea why it's doing this because I don't remember doing it before. The navigation bar I used previously used to work but now the links in it don't work because they dont have ".html" at the end of the link. (ex.<a href="http://www.site.com/about_us">About us</a>). I'm just curious if anyone knows how to do this. Basically what I want to do is have a series of links (lets say one, two, three, and so on) and when you click one of those links, the image below those links change to the respective link (if you click one, a picture of the number one shows up, if you click two, well you get the idea). How would I go about doing this? How I want this laid out: Link Link Link [-Image-] Thanks I am writing a web page that I need to either 1. embed the word document contents in the web page, or 2. have a link to the work document on the web page. When I try 1. I save the word document as a web page when I am in word. but the html that is generated is so large and full of stuff that I don't need, and it doesn't display very good. If I do 2. then the user has to have word on there machine in order to view the document. Is there another way? Thanks in Advance, Laurence I have the Agreement Page html ready, but how would I make it so that it shows up on the person's first visit to the website, and if they click "I Agree", it won't show up again. Thanks. show record in table on first page index.html I want to show records from database in in first index.html page. my code is working when i click on link. thanks I have created a web page in ASP.Net, but completely using HTML codes. This web page shows first 25 hit movies in year wise. I have 2006, 2007 and 2008 year's details in 3 different tables (HTML Tables). All of them are in one page When user clicks main page, it shows all the three year details in tables. User has to scroll down the apge to see full details. Here, I want to give 3 page sections (or page breaks).. If user clicks main page urs, it should show all and user have to scroll down...if user press 2006, it shoud take him to that specific area. If similarly if user clicks 2007, it should take him/her to 2007 details area.. How to do this? I heard that with 'submenubullet', we can do this...Please help me on this What I want is to use some html or javascript or something to show the user of my site the exact page they are viewing. Then i would set it up so they could either bookmark it or copy the link. So a normal bookmarking script is not what I want. I need to be able to display the link the user is viewing on the page they are viewing. How can this be done? How do you make html show up on the front page of a blog but not on any others? I have an advertiser who wants his text ad to show on the front page of my blog, but not on any others. I've never had that request before and don't know how to do it. Can anyone help me? Lisa Hey there! I'm kinda new here, but I really need some help. I'm trying to show/hide the Swedish translation to our lyrics on our band WP page. It can be viewed here. I'm using a table with separate <td>'s for every individual lyric and every individual translation. The translations are in <div>'s. This is included in the header: <script type="text/javascript"><!-- function showhide(el){ el=document.getElementById(el); el.style.display=(el.style.display=="block")?"none":"block"; } //--></script> And this is the code for my little Swedish flag you click to make the translation DIVs visible. The names within '' are the different lyric DIVs. <p>Show/hide translation: <a href="#" onclick="showhide('armourswe');showhide('seamsswe');showhide('breathswe');showhide('cornersswe');sho whide('cunningswe');showhide('whiteswe');showhide('graniteswe');showhide('liliesswe');showhide('beac hesswe');showhide('pebblesswe');showhide('rockswe');showhide('ruinsswe');showhide('sarabandeswe');sh owhide('unknownswe');return false;"><img src="http://www.alpha60.net/wordpress/images/swedish.jpg" alt="Show/hide Swedish translation" /></a></p> Why does IE move the left column down when the translations are visible? It works fine in Firefox. I'm not a HTML king and tried a long time to get this far, so I'd really love some help! Address: http://www.alpha60.net/lyrics /Leo from Sweden Hey, I embedded a google search box on my website, and I can't figure out how to make it so that when you search for something, the results show up on my page and not leave my site. I just want like a window below the search box in MY site. Any ideas on how to do that? Here's the code I have so far: <FORM method=GET action="http://www.google.com/search"> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <TABLE bgcolor="#FFFFFF"><tr><td> <A HREF="http://www.google.com/"> <IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle"></A> <INPUT TYPE=text name=q size=25 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="Google Search"> </td></tr></TABLE> </FORM> Thanks!! Hi Guys really hope you can help I have a site which runs off a couple of templates and what i need to do is add some code into one of the ditable regions so that it will pic up the Page title and drop it in the body off the page. e.g. the page title is 'Monkey23' and i require 'Monkey23' to automatically show up in the Body of the page. I have hundreds of pages all with different titles and therefore manual titling is not an option. Anyone got any awesome code to help me? Cheers Tom I'm going to create thumbails with captions below them and I'm wondering what is the best way to do this? Using headings as captions, seperate divs for each image? I was wondering if there was any specific code that i could use to mkae a thumbnail of an image that leads to a larger image, without having to make 2 separate images. |