Looking for an image rotator with image map

[chrisfireems]

I currently manage and maintain the volunteer fire company website that I belong to. I am looking for a script that will allow me to put a front, rear, left, and right view of our trucks (basically 360 degree walk around of the truck) and through this four pictures you can flip throw them like a slideshow, but done manually. When you are on an image of the right for example when you click on one of the compartments what is in that compartment will come up below the images. This is were the image map comes in. If anyone can help me find a script like this it would be great.

Thanks, Chris

[TimFA]

If I understand you, then the image map should have nothing to do with it. Just the JavaScript events associated with it. I don't know anything about image maps so excuse me if I'm incorrect, is the image map contained within the <img> tag? If so then it can be changed with JavaScript.

EDIT: What I mean is, you can edit where the click able areas are. And even if they aren't it should still be able to be changed. I could probably make something, next time you reply please include all the code (JavaScript, HTML, CSS w.e.).

[chrisfireems]

If I understand you, then the image map should have nothing to do with it. Just the JavaScript events associated with it. I don't know anything about image maps so excuse me if I'm incorrect, is the image map contained within the <img> tag? If so then it can be changed with JavaScript.

EDIT: What I mean is, you can edit where the click able areas are. And even if they aren't it should still be able to be changed. I could probably make something, next time you reply please include all the code (JavaScript, HTML, CSS w.e.).

TimFA,

Hey thanks for the quick response to my post and thank you for offering your help. I really do not have any code to go by. I have been searching the net for something like this. I really do not know anything about coding with javascript. I just would like a script like this, because it would add a cool effect to my site.

the slideshow script like something I would want is like preloaded slide show script found under image effects here at dynamic drive. I have added the code below:

For Head of HTML:

<script language="JavaScript">

//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('image1.gif','image2.gif','image3.gif');

// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
   var ImageObject = new Image();
   ImageObject.src = ImageSource;
   return ImageObject;
}

function ShowSlide(Direction) {
   if (SlideReady) {
      NextSlide = CurrentSlide + Direction;
      // THIS WILL DISABLE THE BUTTONS (IE-ONLY)
      document.SlideShow.Previous.disabled = (NextSlide == 0);
      document.SlideShow.Next.disabled = (NextSlide == 
(Slides.length-1));    
 if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
            document.images['Screen'].src = Slides[NextSlide].src;
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' + 
Slides.length;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

function Download() {
   if (Slides[NextSlide].complete) {
      SlideReady = true;
      self.defaultStatus = Message;
   }
   else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
   return true;
}

function CacheNextSlide() {
   if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] == 
'string'))
{ // ONLY CACHES THE IMAGES ONCE
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide] = CacheImage(Slides[NextSlide]);
      Download();
   }
   return true;
}

function StartSlideShow() {
   CurrentSlide = -1;
   Slides[0] = CacheImage(Slides[0]);
   SlideReady = true;
   ShowSlide(1);
}
</script>

For the Body of the HTML:

<form name="SlideShow">
<table>
<tr>
   <td colspan=2><img name="Screen" width=108 height=135></td>
</tr>
<tr>
   <td><input type="button" name="Previous" 
value=" << "
onClick="ShowSlide(-1)"></td>
   <td align="right"><input type="button" name="Next"
value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>

For the Body Tag of the HTML:

<body onLoad="StartSlideShow()">

The one thing that I am not sure on is how to get the image areas click able like an image map. I need the content to display below the slide show, like in an iframe. I have made a list of somethings that I would like the script to include:

• to be able to set the size of the slideshow for images, possibly different sizes (I don't know the size that it is going to be yet)
• To have an iframe type feature below the slideshow (like mentioned above)
• To be able to set the width and height of the iframe type feature
• To be able to add buttons below the slideshow for clicking forwards and back. I can make the images instead of the form buttons. I just need you to tell me where I have to put the address for what images and to have them spaced out the width of the slide show.
• Clickable areas in the mage like an image map
• How to setup the clickable areas for the data below the slide show

The reason that I don't have the sizes or the html data for the information below the slide show is because, I have not strated this yet. I am trying to get the a script or a script developed so that I can see if this is actually possible.

Thanks again for your help!

Chris

[TimFA]

It is possible, but I cannot think fo anything other than: 1) you use a multi part image (i.e. its composed of a few different ones) 2) you use flash. Which shall you like? I do not know much about image maps or flash, so the 1st is best. When you say below, what exactly is going to be below? Text, images, both?

[chrisfireems]

It is possible, but I cannot think fo anything other than: 1) you use a multi part image (i.e. its composed of a few different ones) 2) you use flash. Which shall you like? I do not know much about image maps or flash, so the 1st is best. When you say below, what exactly is going to be below? Text, images, both?

TimFA,

It would be nice to make it in flash, but I don't know anything about flash either. I would not mind using javascript though. What I mean by below is after the user clicks on the part of the image, it will display a html file below the image. We could probably use a image map though. An image map is just html, . I just don't know how that would be included in a javascript. Click here for an example and description of an image map. All you need for the image map is just coords, which is like the longitude and langitude of an image for example. As the the website explains. For the output below it would basically just be an iframe, which is ovisouly html. Click here for documentation and code of an iframe. So as you can see this pieces to accomplish this task are simple and straight forward, but I don't know javascript to make this possible. What do you recommend me using javascript or flash?

Chris