|
HTML - How To Make Thumbnails
i have thousands of large photos on hand and I want to make a webpage
within the same page, all the images are made into thumbnail and people could click on it to get large, do I have to use graphics software to manually reduce each image to smaller size first? Is there any handy HTML way (or other) I could solve the problem? Thank you. Kenny Similar TutorialsHi Everyone I know enough about html to knock up a half decent page but can't do anything too fancy. On my homepage I have a main picture, and I want to have smaller thumbnails underneath... but I want the thumbnails to replace the main picture when they are clicked. I guess I could do this by just linking to a new page with the picture changed but I have seen pages do this without reloading the page everytime. Is this an easy thing to do? Many thanks in advance of any replies posted! Kop442000 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? HELP!!!! If the following site is opened in IE, most of the thumbnails won't show. The thumbnail actual images are 40x30 pixels - so no resizing going on. Yet in the FrontPage browser, they all show. If opened in FireFox, the thumbnails will all show - I just won't get the vertical scroll bar on the thumbnails from the DIV tags. Very straight forward HTML. What's the problem? Web page with the thumbnail problem: http://www.bryanborough.com/750iL/LADRegulatorValve/ Thanks ahead! Buffbuh 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. I am new to HTML, and have taken just a few classes at a local CC. I am working on a basic photography site, and have the following code working okay. My question follows the code. <html> <head> <style type="text/css"> h1 {font-family: "Times New Roman"; font-size: 46px;} img { border: 4px solid white; float: center; padding: 20px; margin: 20px; } </style> </head> <body> <body bgcolor="black" leftmargin="100" rightmargin="100"> <hr color=#BC8F8F> <h1 align="center"><i><font color="white">Nature Up Close & Personal</i></h1> <hr color=#BC8F8F> <a href="thumbs/IMG_1451thumb.jpg"><img src="images/IMG_1451.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_0191thumb.jpg"><img src="images/IMG_0191.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_8152thumb.jpg"><img src="images/IMG_8152.jpg" width="225" height="165" border="0"></a> <a href="thumbs/spider cropped_1thumb.jpg"><img src="images/spider cropped_1.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_1461_1thumb.jpg"><img src="images/IMG_1461_1.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_1942thumb.jpg"><img src="images/IMG_1942.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_3483thumb.jpg"><img src="images/IMG_3483.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_2283thumb.jpg"><img src="images/IMG_2283.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_1354_1_1thumb.jpg"><img src="images/IMG_1354_1_1.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_8263thumb.jpg"><img src="images/IMG_8263.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_8810thumb.jpg"><img src="images/IMG_8810.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_9937_1_1_1thumb.jpg"><img src="images/IMG_9937_1_1_1.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_7751_2thumb.jpg"><img src="images/IMG_7751_2.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_3025thumb.jpg"><img src="images/IMG_3025.jpg" width="225" height="165" border="0"></a> <a href="thumbs/IMG_3006thumb.jpg"><img src="images/IMG_3006.jpg" width="225" height="165" border="0"></a> <p><h4 align="center"><font color="yellow"><i>Click image to view full size</i></p></a> <p><h3 align="center"><a href="Animals.html"><font color="white"><i> Next: Animals</i></a> <br> <br> <a href="index.html"><font color="blue"><i>Home</i></a> </body> </html> My problem....how do I get the second photo (largest one) centered on the screen, and with a black background? Currently it enlarges fine, but seems to be centered on the left, and with a white background. Hi I want to display images as thumbnails, that when you click on them they open in a new window at a specified size? Ive seen it before, I think it might be javascript??!! Also, I want to display a lot of text but I want to break it down into 'sections' and give links to these 'sections' at the top of the page so when the user clicks them, it moves to exactly that part on the same page further down, so they wont have to scroll??Is that possible? Thanks, Grainne I was wondering if there are any ways/scripts/commands I can employ, or something web-tricks to improve my thumbnails quality. It's really rather crucial to me since my whole webpage is based on thumbnails viewing. I am working on "thumbnails", everything shows fine in IE but in FF the "alt" text does not show, what can I do to get the alt text to show in FF please? Hello all, i hope i have posted in the correct place. I am wondering if anyone is able to help me or even guide me in the right place. I am looking to create a verticle scrolling box that has a thumbnail inside and text to go below it. I am looking to have say other website screen shots with a short description below, all hyper linked. The thing is i would like to add multiple thumbnails and text. Would using a marque be the correct way to go about doing this? or is there other ways? Any help is appreciated, i am a novice so any help and guidence is great. Thanks for your help in advance I have an ecommerce website and I want to show 1 big product image, along with a number of thumbnails. I then want the customer to be able to hover over or click the thumbnails and have the thumbnail become the 'big' image. What's the 'most compatible' way of doing this? I don't really want to go with some fancy scripted solution just to find out that half my customers can't see it because their firewall/AV/popup software etc is stopping it... Hi - not sure where this should go category-wise so sorry if the answer proves it is in the wrong place. I am making a one page portfolio site and in this is a thumbnail galelry that produces a full screen background change (using Javascript). All is well on my computer in all the browsers that I have checked but for some reason it does not work in IOS or android - the thumbnails do not show but do work in so much as they change the background. This is being produced in wordpress (don't know if this matters) - if I add the images with absolute address they do seem to work - odd??? Head scratching is now at an annoying level. The section that does not work is "work". Any help would be greatly appreciated address is: lucyanne[dot]co Hello everyone I'm usually good at figuring stuff out, but this time I hit a doozy and can't seem to figure it out, hopefully someone here can help me. I have a gallery blog which is using this theme: http://www.elegantthemes.com/preview/eGallery/ my question is how can I make it so that users can click the thumbnail and go to the post rather than clicking the arrow on the bottom right. I've narrowed it down to <div class="thumbnail-div" style="background-image: url(<?php bloginfo('stylesheet_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumb; ?>&h=159&w=190&zc=0);"> but I don't now how to make them link to the post, any help would be great thank you. I know there are multiple ways to do this, but I'm just interested in the easiest possible way. I want to create a video playlist in which I can have a video player combined with a playlist either on the left or the right in which each video in the playlist has a (perferably automatically) generated thumbnail. The playlist could be xml or whatever, just pure html or flash. I'm assuming it would look the best using flash with FLV video. I've seen numerous tutorials on sites such as adobe on how to do this using Macromedia Flash Pro but they are too complicated. I just want to enter the links to where the videos or hosted. If it can't be that simple, I'm just looking for the most simplistic and easiest method possible. Thanks to anyone patient enough to read and respond to this. so i have recently begun learning to write HTML, and are trying my hands on designing a website, but i have a problem, i need a thumbnail-list instead of showing the whole picture. what i have done so far is arrange smaller versions of the full picture in a table, and have each picture link to a separate page with only that picture on in full size, but i don't want to have to manually design a page for every picture. any suggestions as to how i can get around that? for instance would opening a blank page with specified color, style, picture placement and all that, be possible to make from the thumbnail list itself? so that the browser opens a blank page, reads the spesifications from the link that opens the new window, and shows that one picture big? it's really aggravating having to make a separate page for 40-50 pictures... any help would be greatly apreciated. (btw i use IE, not sure wich verson, but a rather late one atleast, and the code i'm using now is this: <!--thumbnail image--> <a href="picture name.html"><img src="images/picture name.jpg" height="100" width="100"/></a> <!--image page--> <html> <head> <title>picture name</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <h2 class="center">picture name</h2> <a href="gallery.html"><p class="center">back to gallery</a></p> <img src="images/picture name.jpg"/> </body> </html> thx for any help ^^ -Shane (Dentei) 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 Hi all, I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read. I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read. With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself? Many thanks Joe Hi members... I am designing my new eBay advert in html using Dreamweaver CS3 I have designed many stuff in this that is pretty basic, and use the design view. I want to develop my ads this year from a static looking page to a more advanced page. Schuh do something similar to what I am after and I can't search the forums because I have no idea what it is called that I would like to do. Here is a link to their advert.. [url="http://cgi.ebay.co.uk/MOMENTUM-HARRY-DBL-MENS-BLACK-GREEN-FABRIC-TRAINERS-/390316948300?pt=UK_Men_s_Shoes&var=&hash=item99accd46a3"] notice how you can roll over images to show a larger preview, can anyone point me to a guide or at least tell me what i need to be searching for. Thanks John please help me guys!!! im trying to find a html code that allows people download a pdf files from the website that im trying to make..anyone out there help me.. I tried making this template, but it doesnt work, it wont unzip, there are no files in it. if anyone can make this for me and give me the code, that would be great. http://myfreetemplatehome.com/free_t...tails-159.html |
|||||||