Solved

Swapping images on single page

Posted on 1999-01-01
10
170 Views
Last Modified: 2013-12-25
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
0
Comment
Question by:PerryBond
  • 3
  • 3
  • 2
  • +2
10 Comments
 
LVL 4

Expert Comment

by:martinag
ID: 1857574
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
 
LVL 6

Expert Comment

by:PBall
ID: 1857575
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
 
LVL 6

Expert Comment

by:PBall
ID: 1857576
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
 
LVL 6

Expert Comment

by:PBall
ID: 1857577
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
 

Author Comment

by:PerryBond
ID: 1857578
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 3

Expert Comment

by:a111a111a111
ID: 1857579
Very simple, Use a second frame to load the new picture.
0
 

Author Comment

by:PerryBond
ID: 1857580
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
 
LVL 5

Accepted Solution

by:
tfabian earned 200 total points
ID: 1857581
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
 

Author Comment

by:PerryBond
ID: 1857582
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
 
LVL 4

Expert Comment

by:martinag
ID: 1857583
Put
  <BASE TARGET="TopFrame">
at the top of the document (change TopFrame to the name of the top frame...).

Martin
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now