SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clicking on thumbnail pictures to see a bigger one.

    I am looking for the "how to" or a tutorial on how to set up a web page with 6 thumbnails on the right, and one space at the left that the bigger version of the thumbnail comes up when you click on the thumbnail.

    Can anyone tell me where to find such a thing? Is this java or some other language, or can it be done in html?

    Thanks---Lynette

  2. #2
    SitePoint Addict
    Join Date
    Jan 2002
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theres different ways to do it.

    You could use frames and have the thumbnails as simple links in one frame which loads the larger image into the second frame.

    You could also use javascript though I think there could be a problem with regards to all the images having to preload before the links work.

    I would choose the first option myself

    Qamar

  3. #3
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "There's no justice like angry mob justice!" --Seymour Skinner

  4. #4
    Alt+F4= User Control ;-) rabmurdy's Avatar
    Join Date
    Mar 2002
    Location
    Ecosse
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iFrame maybe

    could be used.

    One of the sitepointers here have a good example of it, if you speak nice to her she may well help you

    I think her name is Saz249,her site is postfive.com.
    Click on pictures and see if thats what your after.

    Not sure where to find a good tutorial myself but try webmasterbase.com, it's got most stuff covered.
    "If something is too hard,give it up. The moral my boy is too never try anything"
    "Just because I don't care doesn't mean I don't understand"

  5. #5
    SitePoint Addict
    Join Date
    Jan 2002
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey rab!
    off topic
    You know lidels do a cheap version of Iron Bru called Iron Brew. It tastes exactly the same at half the price

    Qamar

  6. #6
    SitePoint Zealot GregShasta's Avatar
    Join Date
    Jul 2001
    Location
    atlanta ga
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could set it up using visibility:hidden; visibility:visible;. Probably best way if you dont want to frame it(I would discourage the use of frames). Anyway for best possible effect you would want the 'big' images to be the same size and preferably to fit in the browser window.

    Note you could also use display:none; and display:inline;. Further note if the 'big' images are relatively small in size(kb wise) might be worthwhile to use a preloading script to.

    Greg
    'I guess that my ambition was to be a bum'--robert mitchum

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, iframes would be one of the ideal methods. With more and more people surfing the net using iframe compatible browsers it's the way to go. It's simple and it doesn't rely on the browsers interpretation of javascript to succeed.

    http://www.w3.org/TR/REC-html40/pres...es.html#h-16.5
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's what I mean--

    I'm looking at this IPIX picture display on ebay--this is what I want. It's about halfway down the page, and I want to place the picture display into the page in a similar way.

    http://cgi.ebay.com/ebaymotors/ws/eB...tem=1821160079

    i realize that I haven't read all of your posts yet--so I'll go look now and let you know if my questions have been answered. A little cart before the horse, I guess, but there you go...

    thanks--Lynette

  9. #9
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, that's javascripted. it's similar to a rollover script...i'll try to work up an example sometime today.
    "There's no justice like angry mob justice!" --Seymour Skinner

  10. #10
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks--here's the other thing

    I've sort of handicapped myself by working with frontpage and haven't learned html in any but the most rudimentary coding. I'm working on it, but am rather clueless about it right now.

    Any help is much appreciated!

    Thanks! Lynette

  11. #11
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a quick mock up...just paste and copy the source code into your page. then change the file names to reflect your pictures.
    "There's no justice like angry mob justice!" --Seymour Skinner

  12. #12
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    THanks!!!

    That's EXACTLY IT!!!
    Wow

    Thank you so much!!!

    Lynette

  13. #13
    SitePoint Enthusiast pastel's Avatar
    Join Date
    Aug 2002
    Location
    Cincinnati, OH
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy Cow....

    I love your rollSwitch, I tried to use it - but for the simple matter I am so new to this, I did something very wrong, or it is not compatible with Adobe GoLive, working on a mac.

    Any tips? Thanksk
    A portrait's soul will look out for an eternity.
    ewschott-fineart.com

    Please review my site!

  14. #14
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    post the page where you're attempting to implement this script. i just adapted my script from the rollover script i use, so it's not technically mine
    "There's no justice like angry mob justice!" --Seymour Skinner

  15. #15
    SitePoint Enthusiast pastel's Avatar
    Join Date
    Aug 2002
    Location
    Cincinnati, OH
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cow, the page would be:
    http://www.pastelsart.com/

    There is an area with a couple in the spot I will redesign to show more of the current samples. I'll have to move things around. I received the following at the Adobe forum:

    You can use the Set Image URL action in GL. Just name the "base" image and attach the action to the thumbnails... There is more info on the action in your online manual…

    "You can probably adapt the info in the remote rollover tutorial at golivebasics.com.


    Thank you very much!
    A portrait's soul will look out for an eternity.
    ewschott-fineart.com

    Please review my site!

  16. #16
    SitePoint Enthusiast pastel's Avatar
    Join Date
    Aug 2002
    Location
    Cincinnati, OH
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I uploaded a sample of what I am trying to do.

    http://www.pastelsart.com/sample_table.html

    The problem is when you click on the thumbnail, a new page is opened with the enlarged image. I would like the whole table to be viewed at all times so you don't hit the arrow back key... Like the one cow did above.

    thanks for your help
    A portrait's soul will look out for an eternity.
    ewschott-fineart.com

    Please review my site!

  17. #17
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Pastel,

    Why not change your code to this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="imagetoolbar" content="no">
    <meta name="Generator" content="TextPad 4.4.2">
    <meta name="Author" content="QM Webmaster">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script language="JavaScript" type="text/javascript">
    <!--
    function rollSwitch(loc) 
    {
    	document['swapIt'].src = loc;
    }
    // -->
    </script>
    <style type="text/css">
    <!--
    // -->
    </style>
    </head>
    	<body bgcolor="#ffffff">
    		<table border="1" cellpadding="0" cellspacing="4" width="227">
    			<tr height="95">
    				<td rowspan="3" valign="top" align="center" width="254"><img src="images/new%20art/Ian_lg.jpg" livesrc="../../PastelsArt/images/new%20art/Julia_lg.jpg" width="230" height="331" border="0" name="swapIt"></td>
    				<td height="95" valign="top" align="left" width="100"><a href="javascript:rollSwitch('images/new%20art/Julia_lg.jpg');return true;"><img src="images/new%20art/Julia_sm.jpg" livesrc="../../PastelsArt/images/new%20art/Julia_sm.jpg" width="79" height="123" border="0" name="JuliaLg"></a></td>
    				<td height="95" valign="top" align="left" width="100"><a href="javascript:rollSwitch('images/new%20art/Ian_lg.jpg');return true;"><img src="images/new%20art/Ian_sm.jpg" livesrc="../../PastelsArt/images/new%20art/Ian_sm.jpg" width="80" height="113" border="0" name="IanLg"></a></td>
    			</tr>
    			<tr height="95">
    				<td width="100" height="95" valign="top" align="left"><a href="javascript:rollSwitch('images/new%20art/rapadash_lg.jpg');return true;"><img src="images/new%20art/rapadash_sm.jpg" livesrc="../../PastelsArt/images/new%20art/rapadash_sm.jpg" width="101" height="83" border="0" name="RapadashLg"></a></td>
    				<td width="100" height="95" valign="top" align="left"><a href="javascript:rollSwitch('images/new%20art/Jen-&-Mitch_lg.jpg');return true;"><img src="images/new%20art/Jen_mitch_sm.jpg" livesrc="../../PastelsArt/images/new%20art/Jen_mitch_sm.jpg" width="80" height="104" border="0" name="JenMitchLg"></a></td>
    			</tr>
    			<tr height="95">
    				<td width="100" height="95"><br>
    				</td>
    				<td width="100" height="95"><br>
    				</td>
    			</tr>
    		</table>
    		<p></p>
    	</body>
    
    </html>
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  18. #18
    SitePoint Enthusiast pastel's Avatar
    Join Date
    Aug 2002
    Location
    Cincinnati, OH
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jeremy, not to appear like a total idiot.... this is my current html code for the page linked. I tried pasting yours in a number of ways, tried to rewrite the source code in case it wasn't compatable, but when I go to the layout view in GoLive, it looks like the html outline editor.. I know I am doing something wrong.



    <html>

    <head>
    <meta name="generator" content="Adobe GoLive 5">
    <title>Welcome to Adobe GoLive 5</title>
    <csactions>
    <csaction name="B9AE1C3B25" class="Set Image URL" type="onevent" val0="JuliaLg" val1="images/new%20art/Julia_lg.jpg">
    <csaction name="B9AE1C3B29" class="Set Image URL" type="onevent" val0="RapadashLg" val1="images/new%20art/rapadash_lg.jpg">
    <csaction name="B9AE1C3B31" class="Set Image URL" type="onevent" val0="JenMitchLg" val1="images/new%20art/Jen-&-Mitch_lg.jpg">
    <csaction name="B9AE1DC832" class="Set Image URL" type="onevent" val0="IanLg" val1="images/new%20art/Ian_lg.jpg">
    </csactions>
    <csscriptdict import>
    <script src="GeneratedItems/CSScriptLib.js"></script>
    </csscriptdict>
    <csactiondict>
    <script><!--
    CSAct[/*CMP*/ 'B9AE1C3B25'] = new Array(CSSetImageURL,/*CMP*/ 'JuliaLg',/*URL*/ 'images/new%20art/Julia_lg.jpg');
    CSAct[/*CMP*/ 'B9AE1C3B29'] = new Array(CSSetImageURL,/*CMP*/ 'RapadashLg',/*URL*/ 'images/new%20art/rapadash_lg.jpg');
    CSAct[/*CMP*/ 'B9AE1C3B31'] = new Array(CSSetImageURL,/*CMP*/ 'JenMitchLg',/*URL*/ 'images/new%20art/Jen-&-Mitch_lg.jpg');
    CSAct[/*CMP*/ 'B9AE1DC832'] = new Array(CSSetImageURL,/*CMP*/ 'IanLg',/*URL*/ 'images/new%20art/Ian_lg.jpg');

    // --></script>
    </csactiondict>
    </head>

    <body bgcolor="#ffffff">
    <table border="1" cellpadding="0" cellspacing="4" width="227">
    <tr height="95">
    <td rowspan="3" valign="top" align="center" width="254"><a href="(Empty Reference!)"><img src="images/new%20art/Ian_lg.jpg" livesrc="../../PastelsArt/images/new%20art/Julia_lg.jpg" width="230" height="331" border="0" name="IanLg"></a></td>
    <td height="95" valign="top" align="left" width="100"><a href="images/new%20art/Julia_lg.jpg" onmouseover="CSAction(new Array(/*CMP*/'B9AE1C3B25'));return true;" csover="B9AE1C3B25"><img src="images/new%20art/Julia_sm.jpg" livesrc="../../PastelsArt/images/new%20art/Julia_sm.jpg" width="79" height="123" border="0" name="JuliaLg"></a></td>
    <td height="95" valign="top" align="left" width="100"><a href="images/new%20art/Ian_lg.jpg" onmouseover="CSAction(new Array(/*CMP*/'B9AE1DC832'));return true;" csover="B9AE1DC832"><img src="images/new%20art/Ian_sm.jpg" livesrc="../../PastelsArt/images/new%20art/Ian_sm.jpg" width="80" height="113" border="0" name="IanLg"></a></td>
    </tr>
    <tr height="95">
    <td width="100" height="95" valign="top" align="left"><a href="images/new%20art/rapadash_lg.jpg" onmouseover="CSAction(new Array(/*CMP*/'B9AE1C3B29'));return true;" csover="B9AE1C3B29"><img src="images/new%20art/rapadash_sm.jpg" livesrc="../../PastelsArt/images/new%20art/rapadash_sm.jpg" width="101" height="83" border="0" name="RapadashLg"></a></td>
    <td width="100" height="95" valign="top" align="left"><a href="images/new%20art/Jen-&-Mitch_lg.jpg" onmouseover="CSAction(new Array(/*CMP*/'B9AE1C3B31'));return true;" csover="B9AE1C3B31"><img src="images/new%20art/Jen_mitch_sm.jpg" livesrc="../../PastelsArt/images/new%20art/Jen_mitch_sm.jpg" width="80" height="104" border="0" name="JenMitchLg"></a></td>
    </tr>
    <tr height="95">
    <td width="100" height="95"><br>
    </td>
    <td width="100" height="95"><br>
    </td>
    </tr>
    </table>
    <p></p>
    </body>

    </html>
    A portrait's soul will look out for an eternity.
    ewschott-fineart.com

    Please review my site!

  19. #19
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I know that's your code

    I merged between cow's linked example, and the link you provided. I don't know why GoLive doesn't like it as really it's just the same thing, with some simple JS in the <head> and <a>'s.
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  20. #20
    SitePoint Enthusiast pastel's Avatar
    Join Date
    Aug 2002
    Location
    Cincinnati, OH
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I haven't done anything wrong... other than use the wrong software? I knew you used my code, that's why I am confused!!!! Yikes this is frustrating!
    A portrait's soul will look out for an eternity.
    ewschott-fineart.com

    Please review my site!

  21. #21
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so is golive giving you an error message after you paste in the code jeremy posted?
    "There's no justice like angry mob justice!" --Seymour Skinner


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •