Swapping images on single page

How can I make a hypertext link or a button, change an image on the same page.  I wish to swap a number of .jpg imaes on the same page, dependin upon which button is clicked.  I  do not wish to put each image on a separate page, or use frames
PerryBondAsked:
Who is Participating?
 
tfabianConnect With a Mentor Commented:
it seems to me that you ought to consider a scheme in which you build a database that contains information on your 1000+ pictures, then use that database to populate/build a web page using ODBC calls and ASP scripting..

I don't have any sample code handy, but it shouldn't be hard to create..

good luck


0
 
martinagCommented:
Put this between <HEAD> and </HEAD>:
<SCRIPT LANGUAGE="JavaScript">
<!--
// Preload images
up1 = new Image();
up1.src = "menuup1.gif";
dn1 = new Image();
dn1.src = "menudown1.gif";
function swap(image, newImage) {
  image.src = newImage.src;
}
// -->
</SCRIPT>

Here's how to use it:
<IMG SRC="menuup1.gif">

<A HREF="..." onMouseOver="swap(document.images[0], dn1)" onMouseOut="swap(document.images[0], up1)">Swap/Unswap</A>

<FORM>
<INPUT TYPE="BUTTON" VALUE="Swap it!" onClick="swap(document.images[0], dn1)">
<INPUT TYPE="BUTTON" VALUE="Unswap it!" onClick="swap(document.images[0], up1)">
</FORM>

Martin
0
 
PBallCommented:
What can we say, Martin is da man :).

Are you trying to create a slideshow type of thing?

Try this site and take a look at the code behind the slideshow.
It's generic enough so you can cut and paste it directly to your page and with minor changes it should work just like (snap finger) that :)

http://sflorida.permias.org/old_album.htm
starting from the line MAXSLIDE = 8

This one does not preload the images first, but does it on the fly.

To preload the images, you can use a slide array or create a slideshow object.

function slide( imgfile, caption , width, height)
{
  //create a new image object for this slide object and preload it.

  if (width && height)
    this.image = new Image(width,height);
  else
    this.image = new Image();
  this.image.src = imgfile;

  //set this slide object caption
  this.caption = caption;
}

function slideCollection( projector )
{
  this.cArray = new Array(); //slide array/collection
  this.maxSlides = 0;  //number of slides in the collection
  this.currentSlide = -1;  //for navigation
  this.projector = projector;  //image object to project the slide to.

  //methods
  this.addSlide = scol_add;
  this.nextSlide = scol_next;
  this.prevSlide = scol_prev;
  this.gotoSlide = scol_goto;
  this.rewind = scol_rewind;
  this.project = scol_project;
}

function scol_add( slide )
{
  this.cArray[this.cArray.length] = slide;
  this.maxSlides = this.cArray.length;

  //set the currentSlide to the first slide.
  if (this.currentSlide == -1) this.currentSlide = 0;

}

function scol_project()
{
  //Project the current slide to the projector object.
  this.projector.src = this.cArray[currentSlide].image.src;
}

function scol_next()
{
  if (this.currentSlide < this.maxSlides)
  {
    this.currentSlide++;
    this.project();
  }
}

function scol_prev()
{
  if (this.currentSlide > 0)
  {
     this.currentSlide--;
     this.project();
  }
}

function scol_goto( slideID )
{
  if (slideID > -1 && slideID < this.maxSlides)
  {
     currentSlide = slideID;
     this.project();
  } else
  alert('Not a valid slide ID');
}

function scol_rewind( projected )
{
  if (this.currentSlide > --1)
  {
    //rewind the slide collection
    this.currentSlide = 0;

    //show only if projected parameter is true
    if (projected) this.project();
  }
}

You can save the javascript object above as slideshow.js
and include it on your own page.

how to use it...

<script src='slideshow.js'></script>
<script>
  var mySlideShow = new slideCollection( document.images['img1'] );
  mySlideShow.addSlide(new Slide('picnic.gif','This is us on last week picnick.',320,240));
  mySlideShow.addSlide(new Slide('spooky.gif','This is Spooky, my dog.',320,240));
  mySlideShow.addSlide(new Slide('mrwhite.gif','This is Mr. White, my pet rabbit.',320,240));
  mySlideShow.addSlide(new Slide('house.gif','This is where I live',320,240));
</script>

:
:
<!--slideshow projector image object -->
<img name=img1 src='blank.gif' alt='' width=320 height=240 border=0>

<!-- wire the buttons to mySlideShow object -->
<input type=button value='Previous' onClick='mySlideShow.prevSlide()'>
<input type=button value='Next' onClick='mySlideShow.nextSlide()'>

<script>
 //inserted after the projector object just to be sure that the projector is in place.
 //rewind the slide and project the first slide.
 mySlideShow.rewind(true)
</script>

You could add to the slideCollection.project method and use the caption property of the slide object, say ... this.projector.alt = this...[].image.caption or use a dhtml span area instead.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
PBallCommented:
oops I made a mistake..

the scol_project function should be:

function scol_project()
{
  //Project the current slide to the projector object.
  this.projector.src = this.cArray[this.currentSlide].image.src;
}

instead.
0
 
PBallCommented:
Some fancy stuffs that you could do:
1. attach CSS filter to the projector screen to get different effects (image appearing from the right, checker fx, fade in fade out, etc.)
2. use 2 projector screen (in diffirent div) and make the image to appear as if one image fade out and the other one fade in at the same time).  filter:alpha(opacity=...)
3. add sound to it, whatever else you can think of.

0
 
PerryBondAuthor Commented:
Thanks for the info.
I havent had a chance to digest it yet (hols. etc.)
What I have, is about 1000 items of stock on a database, I put them on a table, I then want people to click on any item and see the related picture on the same page, without having to write a seperate page for each picture.
so no, I don't want the stuff pre-loaded.
Will be back to work Monday, to start looking at it.

0
 
a111a111a111Commented:
Very simple, Use a second frame to load the new picture.
0
 
PerryBondAuthor Commented:
I have 1000 pics, I dont want to have to load them onto 1000 blank .html pages so they can be viewed thru a frame.. I will only do this if all other options fail!!


0
 
PerryBondAuthor Commented:
No, I think PBall has the right idea, if only I could understand it!
I Do NOT want to pre-load images
I have the info. in a database, currently with a stored path to each picture.
The data is then loaded into 48 subject tables. When viewed, clicking on the link shows the picture OK, but as a full window(you have to click the back button to go back to the table.)

I want to show the table in the bottom frame, then when someone wants to view the picture, they click on the link, and it shows the picture in the top frame.

I auto-generate the tables each week, as i usually have in stock about 800 og the 1300 items available.
0
 
martinagCommented:
Put
  <BASE TARGET="TopFrame">
at the top of the document (change TopFrame to the name of the top frame...).

Martin
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.