Small photos to big photos on same page

  • michelle32145
  • Newbie
  • Newbie
  • michelle32145
  • Posts: 5

Post 3+ Months Ago

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.
  • Belk Media Group
  • Graphic Monk
  • Professor
  • User avatar
  • Posts: 778
  • Loc: In the heart of California, Fresno.

Post 3+ Months Ago

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
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

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
  • videoediting-direct
  • Beginner
  • Beginner
  • videoediting-direct
  • Posts: 53
  • Loc: United Kingdom

Post 3+ Months Ago

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
  • Posts: 5

Post 3+ Months Ago

Try fireworks.
Automaticly generate.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 28 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.