small thumbnails to larger images on the same page??

I’m currently doing (yet another) portfolio web site. My main framework is fairly common— some sort of series (maybe 10-16) involving tiny thumbnails with images is around the left. You rollover one of several small jpgs and also a larger version of seems like on the exact page off on the right. I’ve been trying to figure out how the heck to get this done the most efficient way. I could easily take action in Flash, but am curious about if there’s exactly how since these images are fairly substantial for jpgs. I don’t want to use frames and my CSS is just not great. (I’m fairly beneficial with Dreamweaver and should not code if possible– perhaps there is a behavior (other than the hide/show layers) of which I’m missing in which exists in Dreamweaver MX in this sort of thing) Any one have any tips or can point me with a dummy tutorials Sorry if this is the very stupid concern.
: nervous:

You shouldn’t use < frames>, but have you thought to use < iframes> Inline Frames

Inline Frames are intended for exactly what you’re attempting to do.

See this page: http: //www. collaborationgallery. com

It is really all done having < iframes>, CSS, along with a few tables. Thumbnail galleries
usually are tabular, so tables are intended just for that purpose.

Besides mouse-overs, you visit the thumbs. Along with Javascript,
you could potentially also do mouse-overs. Mouse-overs really are a problem though
if they should move over one thumb to get at another.

thanks for that direction! I’ll test finding some iframe tutorials on-line. (if you are aware of of any, remember to share! ) I probably will not do the mouseover and just do your click anyway.

thanks again!

you could potentially try this — http: //www. cssplay. co. uk/menu/magnify. html

thanks for that feedback. I’m looking to get something that will allow me to click it far too, rather than a little rollover.

Thanks anyway–

I did something similar upon my website, inside the pictures. Feel free to work with the code, view example here: http: //www20. brinkster. com/audiofreak9/picture. web coding

The CSS attributes all of which will resize a jpeg or even gif relative into the size of the div.

With my photos internet page for friends, I make use of this. I created some sort of box, and referenced a bigger image in the html to look into that box. The image is resized accordingly.

Code:
. pathumb
very clear: both;
height: 80px;
thicker: 110px;
clip: vehicle;

HTML:
	< your href=" 01_birthday_05/index. html" > < p> Feb 2005: Birthday< br>
< img class=" pathumb" src=" 01_birthday_05/images/birthday_06. jpg" > < /a>

If you will be wondering how it is relevant… you may make a CSS hover (or active) to show the original photo elsewhere. It saves space since the thumbnail is the same image as the larger version.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *