Making more than one image alternately appear in the same spot

MHUK · Feb 2, 2004

Hi

This question may be a bit complicated to describe. Basically I have three images, and one set area where I want the images to appear. However I only ever want one image to appear at any one time, in that same area. What I mean is:
The first image appears in the set area for a couple of seconds, then it disappears and the second image appears for a couple of seconds (in that same area), before that disappears and then the third one appears for a couple of seconds (in the same area), and then that too disappears and the first one re-appears for a couple of seconds again and so on...in the same order, all in the same set area.

Please can you tell me how this is possible, and whether it is possible in just HTML, or whether Flash is needed for this? I do not currently have Flash and do not know how to code in flash, so any code or help with this will be greatly appreciated.

Thank you for your help.

MHUK

MrBelfry · Feb 2, 2004

You could also achieve the effect using JavaScript, an animated gif (depending on your images), SMIL (which may only work in later versions of IE) or Flash.

JavaSCript would probably be your best bet. There are a couple of ways you could achieve this however any method would invovle changing the image source using a timer.

MrBelfry

http://www.mrbelfry.co.uk

http://www.lighthousecc.co.uk

MHUK · Feb 2, 2004

Thank you for your answer. How would I go about changing the image source using a timer?

BabyJeffy · Feb 2, 2004

This is a small example that illustrates one way to do this image rotation:

Code:

<html>
<head>
<title>Table test</title>
<script type=&quot;text/javascript&quot;>
var image1 = 'image1.gif';
var image2 = 'image2.gif';
var image3 = 'image3.gif';
function rotateImages()
{
  var newImage = '';
  var currentHTML = document.getElementById(&quot;imageContainer&quot;).innerHTML;

  if (currentHTML == '' || currentHTML.indexOf(image3) > 0) newImage = image1;
  if (currentHTML.indexOf(image1) > 0) newImage = image2;
  if (currentHTML.indexOf(image2) > 0) newImage = image3;

  document.getElementById(&quot;imageContainer&quot;).innerHTML = '<img src=&quot;path_to_your_images/' + newImage + '&quot;>';
}
document.onload = setInterval(rotateImages, 3000); // rotate every 3000 milliseconds
</script>
</head>

<body>
<div id=&quot;imageContainer&quot;></div>
</body>
</html>

Hope this gets you started,
Jeff

MHUK · Feb 2, 2004

Thank you for your reply and example Jeff...thats really helpful. Much appreciated.

MHUK · Feb 3, 2004

Hi
Just another quick question. In another part of my website I have three images that appear all the time. Is it possible to make these images disappear and get replaced by three further images (in the same spot as the first three) but ONLY if the mouse cursor is moved or 'hovered' over a text item such as "more", and when the mouse cursor is removed from 'hovering' over the text item "more" the first three images re-appear and stay there?

Essentially this must be very similar to the problem of making the images appear 'automatically' using a timer alternately in the same spot. This time the user actually has to make the images change by moving the mouse cursor to 'hover' over the text item called "more".

Thank you very much for any help. Much appreciated.

MHUK

BabyJeffy · Feb 3, 2004

Sure,

Put an

Code:

onmouseover

on the <div> (or whatever) that you wrap around the text. When the mouse is placed onto the text, it will trigger the onmouseover. You can return the images to the originals using an

Code:

onmouseout

placed in the same <div>.

Code:

<div onmouseover=&quot;putNewImagesOn()&quot; onmouseout=&quot;putOldImagesOn()&quot;>Mouse over me to change images</div>[code]

You will have to create the javascript functions that are called:

[code]<script type=&quot;text/javascript&quot;>
function putNewImagesOn()
{
  alert('Put code to show new images in this function');
}

function putOldImagesOn()
{
  alert('Put code to show the old images in this function');
}
</script>

You would give your images an id="imageID" and then use the getElementById("imageID&quot method to set up the replacement source for the image.

Hope this gets you started,
Jeff

MHUK · Feb 4, 2004

Hi Jeff

Thank you for your help. However I have tried what you suggested and it doesn't seem to work. I think I am probably doing something wrong.

The code I am using is as follows:
----------------------------------------------------
<script type="text/javascript">

function putNewImagesOn()
{

<img src="images/firstimage.jpg">
//currently showing image, which is about to be changed

document.getElementById("imageID&quot

.innerHTML = '<img src="images/secondimage.jpg">';
//image source for the second(new) image

//alert('Put code to show new images in this function');
}

function putOldImagesOn()
{
<img src="images/secondimage.jpg">
//currently showing image, which is about to be changed

document.getElementById("imageID&quot

.innerHTML = '<img src="images/firstimage.jpg">';
//image source for the first (old) image

//alert('Put code to show the old images in this function');
}
</script>
---------------------------------------

I am not very good with Javascript and as such am sure I have made a simple mistake in showing the two images in the two functions.

I have tried an alternative solution which is as follows:

<img name="image1" src="images/firstimage.jpg">
<a href="#" onmouseover="image1.src='images/secondimage.jpg'"
onmouseout="image1.src='images/firstimage.jpg'">Move cursor over here to show second image</a>

This works, however the second image is twice the size of the first image and does not seem to keep its size - instead it gets squashed to the same size as the first image. Is there a way to swap the images, but for the images to keep their original size?

Thank you for your help with this.

MHUK

markso · Feb 4, 2004

If you are getting stuck the following site has dozens of free javascript goodies which you can copy and paste into your page.

http://www.javascriptkit.com/cutpastejava.shtml

They might have something suitable in teh image and slideshow folder.

Mark

If sunflower oil comes from sunflowers, and vegetable oil comes from vegetables, where does baby oil come from?

BabyJeffy · Feb 4, 2004

If you define the image on the page within a <div> that has an id (that is unique) as follows:

Code:

<div id=&quot;

theImageDiv

Code:

&quot;><img src=&quot;images/firstimage.jpg&quot;></div>

Then you can access the div using:

Code:

<script type=&quot;text/javascript&quot;>
var myElement = document.getElementById(&quot;theImageDiv&quot;);
</script>

Translating the code into plain english: get me the element with an ID of "theImageDiv", and assign it to a variable named myElement.

If you change the ID that you put in the div tag, then you would change the string "theImageDiv" to read the same in the javascript.

All that was missing for you was to wrap the img tag with a div and assign it an ID.

Here is a working example:

Code:

<html>
<head>
<title>Sample</title>
<script type=&quot;text/javascript&quot;>
function putNewImagesOn()
{
  document.getElementById(&quot;theImageDiv&quot;).innerHTML = '<img src=&quot;images/image2.jpg&quot;>';
}

function putOldImagesOn()
{
  document.getElementById(&quot;theImageDiv&quot;).innerHTML = '<img src=&quot;images/image1.jpg&quot;>';
}
</script>
</head>

<body>
<div id=&quot;theImageDiv&quot;>
  <img src=&quot;images/image1.jpg&quot;>
</div>
<div onmouseover=&quot;putNewImagesOn()&quot; onmouseout=&quot;putOldImagesOn()&quot;>Mouse over me to change images</div>
</body>
</html>

Is there a way to swap the images, but for the images to keep their original size?

Definately. This will not happen using the example I have shown because I don't specify a width or height in the img tag.

Give it a try and see how you go,
Jeff

MHUK · Feb 4, 2004

Ah I see now. Thank you for your help. It works fine now.

I think I was putting an extra line in each of the functions, to show what the current image was...whereas I actually needed this code in the DIV tag instead:

<body>
<div id="theImageDiv">
<img src="images/image1.jpg"> //THIS IS THE LINE WHICH I NEEDED HERE AND DIDN'T HAVE. I INCLUDED THIS LINE IN THE FUNCTIONS INSTEAD WHICH I SHOULDN'T HAVE DONE

</div>
<div onmouseover="putNewImagesOn()" onmouseout="putOldImagesOn()">Mouse over me to change images</div>
</body>

Thank you again for your help.
MHUK

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Making more than one image alternately appear in the same spot

MHUK

Programmer

MrBelfry

IS-IT--Management

MHUK

Programmer

BabyJeffy

Programmer

MHUK

Programmer

MHUK

Programmer

BabyJeffy

Programmer

MHUK

Programmer

markso

Technical User

BabyJeffy

Programmer

MHUK

Programmer

Similar threads

Part and Inventory Search

Sponsor