?
Solved

Swapping images on single page

Posted on 1999-01-01
10
Medium Priority
?
204 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

801 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