Back To Website Design Forum

Small photos to big photos on same page

  • michelle32145
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jun 04, 2008
  • Posts: 5
  • Status: Offline

Post August 6th, 2008, 7:01 pm

I have seen websites where an arrangement of several photos is displayed. The user can see an enlarged photo by clicking or mouseover a small photo. The larger photo is displayed on the same page at the side of the arrangement of the smaller photos or in some other place on the same page.

The big photo is replaced by another big photo when the user selects another small photo
I am wondering where I can find a program to do this, or will I have to work from a script? At present I am using Frontpage 2002 but I am upgrading to MS Expresson Web 2.0 soon.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 6th, 2008, 7:01 pm

  • Belk Media Group
  • Graphic Monk
  • Professor
  • User avatar
  • Joined: Jan 12, 2005
  • Posts: 778
  • Loc: In the heart of California, Fresno.
  • Status: Offline

Post August 6th, 2008, 9:15 pm

Well, I've never used Frontpage so, I dont know if there is an automated way to write the necessary script or code for you but, it can be done several ways. More than likely it is java script code you will need. But you could also use an IFrame, Layers, or Flash. You could look here and see if you can find what you are looking for. http://www.hotscripts.com
http://www.JamesBelk.com Stay Tuned for the new era in Belk Media Design
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post August 7th, 2008, 8:53 am

This explains how to set up a basic image swap with JavaScript - should be what you're looking for: http://www.Jlipoutdesign.com/javascript-image-switcher
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • videoediting-direct
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Jul 28, 2008
  • Posts: 53
  • Loc: United Kingdom
  • Status: Offline

Post August 8th, 2008, 4:22 am

Place a div where you want to display the enlarged image with a ID for example:
<div id="dv_enlarge" name="dv_enlarge"></div>. Then call a javascript function onClick of each small image. Then replace the "dv_enlarge" content with the IMG element. You can find the sample code here:

FYI : Image1.jpg, Image2.jpg ... are the images located in the same directory.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<script type='text/javascript'>
function open_new_window(file_name)
{
document.getElementById('dv_enlarge').innerHTML = '<img src="'+file_name+'">';
}
</script>

</HEAD>

<BODY>

<a href="#" onClick="javascript:open_new_window('Image1.jpg');">Image 1</a>
<a href="#" onClick="javascript:open_new_window('Image2.jpg');">Image 2</a>
<a href="#" onClick="javascript:open_new_window('Image3.jpg');">Image 3</a>
<a href="#" onClick="javascript:open_new_window('Image4.jpg');">Image 4</a>

<div id="dv_enlarge" name="dv_enlarge"></div>
</BODY>
</HTML>
  • youdeweb
  • Newbie
  • Newbie
  • User avatar
  • Joined: Aug 10, 2008
  • Posts: 5
  • Status: Offline

Post August 10th, 2008, 7:03 pm

Try fireworks.
Automaticly generate.

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 104 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.