Eretaia Posted February 13, 2012 Share Posted February 13, 2012 Hello, everyone. I recently made a HTML page and I'd like you guys just to point out if I'm using the wrong tecnique for what I want to obtain since I'm a beginner and hence inexperienced. I think there's no need to share a code because I don't need anything specific so I'll explain it in words. My page is visually split in two parts, left and right. Left side contains thumbnails of 4 images, and once clicked on a thumbnail, in the right part of the page appears a detailed real-size image and a bit of text different for each thumbnail. I made this in my own way so I'm not sure if this is a good way to go or, for example, if it generates too much unnecessary code. So, here's how I did it: The left side is a simple relative div which contains 4 thumbnails. On the right side, though, there are 4 absolute divs placed one over another in which I put some text and real-size images. To each thumbnail I ascribed a behaviour show-hide element, so basically, when you click the first thumbnail, one absolute div (containing elements relative to the first thumbnail) appears while the other 3 get hidden. I repeated this action for every thumbnail. So, is this okay or there's another more desired way to do it? Quote Link to comment Share on other sites More sharing options...
trq Posted February 14, 2012 Share Posted February 14, 2012 Absolute positioning components of a layout is never a good idea. Find yourself some tutorials on the CSS box model. Quote Link to comment Share on other sites More sharing options...
spiderwell Posted February 21, 2012 Share Posted February 21, 2012 also load weight of the page should be considered (if thats the right name) suppose you increase this page to have 20 images, and each large image on the right is say 800k thats a page with 16meg to load! not desirable at all. you could use iframe and avoid any overlaying of divs, and just use thumbnails to target the iframe. another alternative is a bit of javascript to update the large image src so it only loads the image needed(clicked on) Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted February 21, 2012 Share Posted February 21, 2012 The left side is a simple relative div which contains 4 thumbnails. On the right side, though, there are 4 absolute divs placed one over another in which I put some text and real-size images. To each thumbnail I ascribed a behaviour show-hide element, so basically, when you click the first thumbnail, one absolute div (containing elements relative to the first thumbnail) appears while the other 3 get hidden. I repeated this action for every thumbnail. LOL you jury rig like me. I suggest that you go to http://www.dynamicdrive.com/ there is a java script that I got from there that I use. It loads the thumb nails and when you click them they appear in their own div and I let php decide which pics and text to load and if you enter text the text will be under the pic, I have my text styled to be on the side. I can't remember the name of the one I use but you can look and see all kinds there. I'll see if I can find the name of the one I use and post it if I get a name. As stated be very careful of absolute, load your site in firefox and use the control + & - keys to increase font size and try to tear the div up. See what happens. Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted February 21, 2012 Share Posted February 21, 2012 I use http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm also make sure you reduce the size(weight) of your pics before you upload or at the time of upload. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.