Solved

Swapping images on single page

Posted on 1999-01-01
10
190 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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
 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

732 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