Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Feb 2006
    Posts
    3
    Member #
    12624
    I'm currently making (yet another) portfolio web site. My main structure is fairly common--- a series (maybe 10-16) of tiny thumbnails of images is on the left. You rollover one of the small jpgs and a larger version of it appears on the same page off to the right. I've been trying to figure out how the heck to do this the most efficient way. I could easily do it in Flash, but am wondering if there's a better way since these images are fairly large for jpgs. I don't want to use frames and my CSS isn't great. (I'm fairly good with Dreamweaver and would rather not code if possible-- is there a behavior (other than the hide/show layers) that I'm missing that exists in Dreamweaver MX for this sort of thing???) Anyone have any suggestions or can point me to some dummy tutorials? Sorry if this is a very stupid question.
    :nervous:

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    You shouldn't use <frames>, but why not use <iframes> Inline Frames?

    Inline Frames are designed for exactly what you're trying to do.

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

    It's all done with <iframes>, CSS, and a few tables. Thumbnail galleries
    are tabular, so tables are designed just for that purpose.

    Instead of mouse-overs, you click on the thumbs. With Javascript,
    you could also do mouse-overs. Mouse-overs are a problem though
    if they have to move over one thumb to get to another.


  4. #3
    Junior Member
    Join Date
    Feb 2006
    Posts
    3
    Member #
    12624
    thanks for the direction! I'll try finding some iframe tutorials on-line. (if you know of any, please share!) I probably won't do the mouseover and just do the click anyway.

    thanks again!

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Junior Member
    Join Date
    Feb 2006
    Posts
    3
    Member #
    12624
    thanks for the feedback. I'm looking for something that will allow me to click it too, rather than just a rollover.

    Thanks anyway--

  7. #6
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    I did something similar on my website, in the pictures. Feel free to use the code, see example here: http://www20.brinkster.com/audiofreak9/picture.html

  8. #7
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    The CSS attributes clear and clip will resize a jpeg or gif relative to the size of the div.

    In my photos page for friends, I use this. I created a box, and referenced a larger image in the html to go into that box. The image is resized accordingly.

    Code:
    .pathumb {
    	clear: both;
    	height: 80px;
    	width: 110px;
    	clip: auto;	
    }

    HTML Code:
    	<a href="01_birthday_05/index.html"><p>February 2005: Birthday<br>
    		<img class="pathumb" src="01_birthday_05/images/birthday_06.jpg"></a>
    If you are wondering how this is relevant... you can make a CSS hover (or active) to show the original image elsewhere. It saves space because the thumbnail is the same image as the larger version.
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com