|
HTML - Best Approach To Thumbnails
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?
Similar TutorialsHi all, I'm putting together a site and I'm not sure that I've approached the construction in the best approach. Here's the page: http://www.firstspace.co.uk/clients/harriet It is rough as I've not had time yet to iron out the kinks but you get the idea of the look and layout. The page will expand as text amounts vary. I'm worried about the table 'breaking' in some browsers (as it is at the moment in everything apart from Safari) so it needs a little flexibility. Any crit welcome Steve I'm in charge of doing the coding for a site that's been designed by a graphic designer with no knowledge of code. I like his designs, and the client wants me to make the site look exactly like them. They're .psd files representing each page. He sent me almost all of the images, but not the background and not certain key decorations (the guitar pics). I told him I needed the background, but his hard drive died (without being backed up) before he could send it to me. He doesn't seem to remember what font he used either. In light of all that, and the fact that the client wanted to get a basic version of the site up asap, I just converted the PSD's to JPEG's, uploaded them as whole pages, and used div's and image maps to add links and additional content. But that is obviously not a long-term solution. In fact, it's causing browser compatibility issues right now. And it's not accessible . . . etc. So I need to replicate these page design images using HTML or XHTML, and CSS. I can probably find a similar background and font to work with, but I just don't know where to begin. I haven't worked with CSS in years, but it looks like I'd probably need to use it. I'm not asking anyone to do my job for me. I'm just wondering how you would approach this task. Does anyone have time to look at the images and point me in the right direction? Here's the embarrassingly incomplete site: http://www.musicisrevolution.com The navigation works with Safari and Firefox. I'm also attaching one of the images so that it'll be clear what I'm talking about. Hi 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 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. 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 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 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 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. 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 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 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? 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 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. 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... 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 |
|||||||