JavaScript - Pause Gif Animation (swap, Without Button)

Hello guys, first post so please be kind.

Usually try and find a solution and edit to work for me but this time its a little trickier.

I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page.

ideally what I want is say 3 buttons.

button1img button2img button3img <// that when clicked control

<div id=target><this target content is now set to 2></div> //and toggle between options

and only one at a time can be on.

The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page.

if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently.

i understand this is a little trickier, im hoping it is possible.

cheers
steve

Hi,

I'm very new to coding Javascript, so have no idea what I'm doing, so sorry

What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code:

src="http://Mysite.com/Images/Button.png"

I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?:

Code:

onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')

For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'?

And 2. For a timer to start for say 30 Seconds.

When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part'

I know that this is a lot to ask, and I will be so very grateful if someone helps me out here!

Thanks!
Harry.

Hi,

I found a nice simple javascript slider but there is a small
change I want to make.

How can I make the slider pause for one or two seconds
when the image has slid fully into position ?

PHP Code:
<style>
#ParentDiv
{
    margin: auto;
    width: 200px;
    overflow: hidden;
}

#ChildDiv
{
    width: 6000px; 
    position:relative;
    cursor:pointer;
}
#ParentDiv img
{
float: left;
padding: 3px;
margin: 0px;
}
</style>

<script type="text/javascript">
//Array Of Image, [URL, width of Image, LinkTo]
var t;
var StepTime=20;
var StepPixel=2;
var ImgPadding=3;
var ParentDivLen=200;
var Img= Array(
["http://mobi6.net/images/screen1.png", 200, "index.php"], 
["http://mobi6.net/images/screen2.png", 200, "index.php"], 
["http://mobi6.net/images/screen3.png", 200, "index.php"], 
["http://mobi6.net/images/screen1.png", 200, "index.php"], 
["http://mobi6.net/images/screen2.png", 200, "index.php"], 
["http://mobi6.net/images/screen3.png", 200, "index.php"], 
["http://mobi6.net/images/screen1.png", 200, "index.php"], 
["http://mobi6.net/images/screen2.png", 200, "index.php"], 
["http://mobi6.net/images/screen3.png", 200, "index.php"]
);
var Pos=3;
var Len=Img.length;

var DivWidth=0;
var MoreImage=0; 

function goURL(URLS) {
    document.location.href=URLS;
}
for(i=0;i<Len;i++)
{
    DivWidth+=Img[i][1] + ImgPadding*2;
    if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i;
}
function getE(id)
{
    return document.getElementById(id);
}

function Dr_Img(IMG)
{
    return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">';
}

function Dr_ImgArr()
{
    var str='';
    for(i=0;i<Len;i++) str += Dr_Img(Img[i]);
    for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]);
    document.write(str);
}

function DoSlide()
{
    if(Pos==0)Pos=-1;
    divtg=getE('ChildDiv');
    Pos-=StepPixel;
    if(Pos<-DivWidth)Pos=0;
    divtg.style.left=Pos +'px';
    t=setTimeout('DoSlide()',StepTime);
    
}

function SlideStop()
{
    clearTimeout(t);
}
function setmouse(id)
{
    if(id==1)
    {
        DoSlide();
    }
    else
    {
        SlideStop();
    }
}
</script>

</head>
<body onload="DoSlide()">
<div id="ParentDiv">
    <div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">

        <script>
            Dr_ImgArr();
        </script>
    </div>
</div> 


I have tried adding wait(2) in a couple of places but
the script just failed to run.

Any ideas ?


Thanks.



.

Instead of using setTimeout() or setInterval(), I wrote a function like this:
Code:

function pause(time)
{   var currentTime=(new Date()).getTime();
    while (currentTime+time > (new Date()).getTime());
}

However, it doesn't work as expected. if you append a character to the value of button, you will get the result at one time. e.g.
Code:

for (var i=0; i<5; i++)
{    aButton.value+="2 ";
      pause(2000);
}

then the webpage wait 10 secs then display 2 2 2 2 2 while it should append '2' every 2 secs ...

so is there real pause mechanism in js? (besides alert() etc which makes the background totally blank...)

I have some text that I don't want to display until 2 seconds after the previous text. The sleep(2); function won't work for what I am doing.

Hey guys,

So I got my autoscrolling javascript working, but I need to make it pause on mouseover. How do I accomplish that with my javascript code?

Code:

<script type="text/javascript">

var defaultStep=1;
var step=defaultStep;
var timer;

function scrollDiv(id,s){
var obj=document.getElementById(id);
var iScrollTop = obj.scrollTop;
step=s||step;
if (iScrollTop == 0){
step=defaultStep;
}
else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){
step=-defaultStep;
}
clearTimeout(timer);
obj.scrollTop+=step;
timer=setTimeout(function(){ scrollDiv(id); },100)
}


function stopMe(){
clearTimeout(timer);
}

function scrollMe(id){
scrollDiv(id)
}



</script>

Thanks!

Hello everyone,

1.) I'm not a programmer beyond HTML, CSS and only a basic knowledge of javascript, it doesn't take much for me to get lost beyond my skills in javascript.

2.) Is someone willing to add and explain the changes to the code below to include a pause on mouseover?

Code:

var currentSlide = 1;
var maxSlides = 0;

function fadeImage(){
	opacity = 100;
	if(steps < 4){
		steps += 1;
		opacity = opacity / steps;
		imageObj = document.getElementById("slide-"+currentSlide);
		imageObjN = document.getElementById("slide-"+nextSlide);
		imageObjN.style.display = "block";

		imageObj.style.opacity = "" + opacity / 100;
		imageObjN.style.opacity = "" + ((steps * 25) / 100);
		//fade
		slideTimeout = setTimeout("fadeImage()", 170); /** fade transition speed */
	}else{
		steps = 1;
		document.getElementById("slide-"+currentSlide).style.display = "none";
		currentSlide += 1;
		if(currentSlide > maxSlides){
			currentSlide = 1;
		}
		showSlide();
	}
}

function initSlideshow(){
	slidesCollection = document.getElementById("slides").children;
	maxSlides = slidesCollection.length;
	for (var i=0; i < maxSlides; i++){
		slidesCollection[i].id = "slide-"+(i+1);
		if (i > 0)
			slidesCollection[i].style.display = "none";
	}	
	steps = 1;
	nextSlide = 2;
	slideTimeout = 0;
	showSlide();
}

function showSlide(){
	clearTimeout(slideTimeout);
		
	nextSlide = currentSlide + 1;
	if (currentSlide >= maxSlides){
		nextSlide = 1;
	}
	
	slideTimeout = setTimeout("fadeImage()", 8300); /** display time of slide */
}

I wrote a simple javescript for a slideshow that cycles through images and displays where the image is but I am wondering how to pause the slideshow and then add in a fading effect. Any help would be appreciated.

index.html
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>Page 1</title>
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script language="JavaScript" type="text/javascript" src="js.js"></script>
    </head>
    <body onLoad="LoadMenu(); PlaceArrow();">
        <table border="0" cellspacing="0" cellpadding="0" id="hmt" summary="layout" align="center">
            <tr><td colspan="4"><div id="htop"><img border="0" width="240" height="40" alt="" src="img/homet.png"></div></td></tr>
            <tr valign="top">
                <td id="hmtgut"><img border="0" width="50" height="250" alt="" src="img/homel.png"></td>
                <td id="hmtl"><img border="0" width="280" height="270" src="img/homelogo.png"></td>
                <td id="hmtr">
<script language="JavaScript" type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="photos/slides/photo01.jpg"
var image2=new Image()
image2.src="photos/slides/photo02.jpg"
var image3=new Image()
image3.src="photos/slides/photo03.jpg"
var image4=new Image()
image4.src="photos/slides/photo04.jpg"
var image5=new Image()
image5.src="photos/slides/photo05.jpg"
var image6=new Image()
image6.src="photos/slides/photo06.jpg"
var image7=new Image()
image7.src="img/thumbarrow.png"
var image8=new Image()
image8.src="img/spacer.gif"

var cphoto = Math.ceil(6*Math.random());
document.write('<div id="homephoto"><a href="javascript:slidelink()"><img border="0" name="photo" width="230" height="230" src="photos/slides/photo0'+cphoto+'.jpg"></a></div>');

var step=cphoto
var whichimage=step

function slideit()
{
if (!document.images)
return
document.images.photo.src=eval("image"+step+".src")
whichimage=step
if (step<6)
{
step=parseInt(Math.ceil(6*Math.random()))
}
else
{
step=1
}
setTimeout("slideit()",3000)
var i = "a" + whichimage
document.images.a1.src=eval("image8.src")
document.images.a2.src=eval("image8.src")
document.images.a3.src=eval("image8.src")
document.images.a4.src=eval("image8.src")
document.images.a5.src=eval("image8.src")
document.images.a6.src=eval("image8.src")
document.images[i].src=eval("image7.src")
}

slideit()

function slidelink()
{
if (whichimage==1)
window.open('img.php?img=1','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==2)
window.open('img.php?img=2','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==3)
window.open('img.php?img=3','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==4)
window.open('img.php?img=4','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==5)
window.open('img.php?img=5','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==6)
window.open('img.php?img=6','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
}

//-->
</script>
<noscript>
<div id="homephoto">
<img border="0" name="photo" width="230" height="230" src="photos/slides/photo01.jpg">
</div>
</noscript>
</td>
                <td id="mtmenu" valign="middle">Links Here</td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="hfoot">
                        <div id="hbot"><img border="0" width="240" height="20" alt="" src="img/homeb.png"></div>
                        <div id="thumb1">
                            <div><img border="0" vspace="9" hspace="2" name="a1" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(1); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo01thumb.jpg"></a></div>
                      </div>
                        <div id="thumb2">
                            <div><img border="0" vspace="9" hspace="2" name="a2" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(2); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo02thumb.jpg"></a></div>
                      </div>
                        <div id="thumb3">
                            <div><img border="0" vspace="9" hspace="2" name="a3" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(3); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo03thumb.jpg"></a></div>
                      </div>
                        <div id="thumb4">
                            <div><img border="0" vspace="9" hspace="2" name="a4" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(4); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo04thumb.jpg"></a></div>
                      </div>
                        <div id="thumb5">
                            <div><img border="0" vspace="9" hspace="2" name="a5" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(5); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo05thumb.jpg"></a></div>
                      </div>
                        <div id="thumb6">
                            <div><img border="0" vspace="9" hspace="2" name="a6" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(6); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo06thumb.jpg"></a></div>
                      </div>
                    </div>
                </td>
            </tr>
        </table>
</table>
</body>
</html> 


js.js
PHP Code:
function PlaceArrow() {
    if ( cphoto ) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/thumbarrow.png";
    }
}

function LoadPhoto (i) {
    if (document.images) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/spacer.gif";
        
        narrow = "a" + i;
        nphoto = "photo0" + i;
        document.images[narrow].src = "img/thumbarrow.png";
        document.images['photo'].src = "photos/slides/" + nphoto + ".jpg";
        
        cphoto = i;
    }
} 

I have a banner but it keeps rotating even when you mouse over it.

Is there a simple code I can add to the code below so that the banner will paused when you mouse over it?

Thanks!

Jeremy

Quote:
</script>
<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');

/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();


/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});

function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;

//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
}
else{
imageLeft = -75;
}
}
currentHovered = idx;

//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);

//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();

//prepend the new image
$ps_preview_wrapper.prepend($newImage);

var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;

//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}

function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}

function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();

//if we click the current one return
if(current == idx) return false;

//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');

//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);

//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();

//prepend the new image
$ps_image_wrapper.prepend($newImage);

//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();

//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);

e.preventDefault();
}

function nextImage() {
var cache='';
cache = cache==''?current+':'+total_images:cache;
if(current < total_images)
$links.eq(current+1).trigger('click');
if(cache == (current+':'+total_images))
$links.eq(0).trigger('click');

}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
setInterval( function(){
$('.ps_next').click();
},4000 );

Hi,
We have a marquee that we use occasionally at work when we want to announce something important. The text is dynamic and will sometimes contain links. I need to make it so that the marquee stops when you mouseover it and then begins again when you mouseout. I can get this to work just fine. The problem is, I want the pause to happen when you hover over the text ONLY, not the entire 690 width TD! I tried wrapping a span around the text and putting an action on it, but the marquee still stops even when you have your cursor out in never-never land to the right. Does anyone know how to make this work in IE without using a huge JavaScript file like on Dynamic Drive?

Code:

<td width="690" valign="middle" class="headerNewsFlash">
	<marquee onMouseOver="this.stop();" onMouseOut="this.start();" scrolldelay="0" scrollamount="4">News Flash Text Goes Here</marquee>
</td>

Thanks!

hello,

It is a insult to newbie to cal myself one, but I have a blog that I am trying to get a simple bit of code to work on. I have text rotator that I found and have made it work for my purposes, but I need it to pause when someone mouses over and restart when then mouse off. I have found code snipets online but I am not smart enough to figure out where they fit in....Help would be very appreciated the code it below....
Code:

<div id="quotetext" >
text
</div>

<script type="text/javascript" >
var myquotes = new Array(
	'quote 1',
	'quote 2',
	'qoute 3'
	);
function rotatequote()
{
	thequote = myquotes.shift(); //Pull the top one
	myquotes.push(thequote); //And add it back to the end
	
	document.getElementById('quotetext').innerHTML = thequote;
	// This rotates the quote every 10 seconds.
	// Replace 10000 with (the number of seconds you want) * 1000
	t=setTimeout("rotatequote()",5000);
	}

// Start the first rotation.
rotatequote();

</script>

Hi everyone! I'm using a jquery image sliding plugin from this site: http://flexidev.co.za/projects/flexislider/ It scrolls smoothly and continuously which is great. But I'm wanting to add a "click to pause" feature to it, so when you click any of the images the whole thing pauses, and when you click again it restarts. I'm not great with javascript though and I can't figure out how to do that, if it's even possible.

I'd really appreciate any pointers or tips!

Here is the javascript:
Code:

var speed = 50;
	var pic, numImgs, arrLeft, i, totalWidth, n, myInterval; 

$(window).load(function(){
	pic = $("#slider").children("img");
	numImgs = pic.length;
	arrLeft = new Array(numImgs);
	
	for (i=0;i<numImgs;i++){
		
		totalWidth=0;
		for(n=0;n<i;n++){
			totalWidth += $(pic[n]).width();
		}
		
		arrLeft[i] = totalWidth;
		$(pic[i]).css("left",totalWidth);
	}
	
	myInterval = setInterval("flexiScroll()",speed);
	$('#imageloader').hide();
	$(pic).show();	
});

function flexiScroll(){

	for (i=0;i<numImgs;i++){
		arrLeft[i] -= 1;		

		if (arrLeft[i] == -($(pic[i]).width())){	
			totalWidth = 0;	
			for (n=0;n<numImgs;n++){
				if (n!=i){	
					totalWidth += $(pic[n]).width();
				}			
			}	
			arrLeft[i] =  totalWidth;	
		}					
		$(pic[i]).css("left",arrLeft[i]);
	}
}

Hi all and hope that you can help.

I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button.

Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do.

Thanks for your interest,
R

I've highlighted the relevant chunks of code below...

The HTML / CSS...

Code:

<style type="text/css">
#midcol {
	padding: 0 25px;
	width: 672px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; }
 #pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; }
#pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; } 
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; }
#first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; }
#previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;}
 #pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;}
#pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;} 
#next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;}
#last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;}
</style>
</head>

<body>
<div id="midcol">
<table width="592" border="0">
<tr >
  <td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
  <tr><td colspan="8"><br /></td></tr>
  <tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
  <tr height="33">
  <td width="160"></td>
  <td id="first" onclick="first();clearTimeout(timerID);"></td>
  <td id="previous" onclick="previous();clearTimeout(timerID);"></td>
   <td id="pause" onclick="clearTimeout(timerID);"></td>
  <td id="pplay" onclick="swapPicture();"></td> 
  <td id="next" onclick="next();clearTimeout(timerID);"></td>
  <td id="last" onclick="last();clearTimeout(timerID);"></td>
  <td width="160"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
  </tr>
  </table>

The JavaScript...

Code:

var dimages=new Array();
var numImages=31;
var interval = 3000; 
var image_dir = "images/large/"
for (i=0; i<numImages; i++)
{
  dimages[i]=new Image();
  dimages[i].src=image_dir+(i+1)+".jpg";
}
var imageCaption = new Array();
var ImageNum = 0;
imageCaption[ImageNum++] = "Caption 1.";
imageCaption[ImageNum++] = "Caption 2.";

etc. etc.

var curImage=-1;
function swapPicture()
{
  if (document.images) // does the browser support image changes?
  {
    var nextImage=curImage+1;
    if (nextImage>=numImages)
      nextImage=0;
    if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
    {
      var target=0;
      if (document.images.myImage)
        target=document.images.myImage;
		cap = imageCaption[nextImage];
		document.getElementById('caption').innerHTML=cap;
      if (document.all && document.getElementById("myImage"))
        target=document.getElementById("myImage");
		cap = imageCaption[nextImage];
		document.getElementById('caption').innerHTML=cap;
  
      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }
	  doTimer(interval);
	}
    else
    {
      setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
    }
  }
}

function first(){ // Goes to the 1st image and stops
	curImage=-1;
	stopTimer();
	swapPicture();
}
function last(){ // Goes to the last image and stops
	curImage=numImages-2;
	stopTimer();
	swapPicture();
}
function previous(){ // Goes to the previous image and stops
	curImage=curImage-2;
	stopTimer();
	swapPicture();
}
function next(){ // Goes to the next image and stops
	stopTimer();
	swapPicture();
}
 function doTimer(interval){ // The Play button
	timerID=setTimeout("swapPicture()",interval);
}
function stopTimer(){ // The Pause button
	clearTimeout(timerID);
} 
function setInterval(t){ // The slide duration drop down box.
	var e = document.getElementById("duration"); 
	interval = (e.options[e.selectedIndex].value)*1000; 
}
doTimer(interval); // Starts the slideshow on load.

Hello,

I just have a quick question; what code would I need to insert into the coding below in order to get the slide show to pause
when someone hovers their cursor on an image?

Code:

<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="firstcar.gif" name="slide" border="0" width="100" height="56" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>

Thanks in advance! I'm newer to coding this stuff and have tried various ways to get this to work, ending in failure of course.

I have the following script in my page

Code:

var tickspeed=4000 
var enablesubject=0 

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

var firstDiv=0
var allDivs=0

function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}

function expandone(){
var firstDivObj=document.getElementById("dropmsg"+firstDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=firstDivObj.getAttribute("subject")
firstDivObj.style.display="block"
firstDiv=(firstDiv<allDivs-1)? firstDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

function startscroller(){
while (document.getElementById("dropmsg"+allDivs)!=null)
allDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

I also have the following in my html:

Code:

<div id="dropcontentsubject"></div>
 <div id="dropmsg0" class="dropcontent" subject=""></div>

There are a total of 4 dropmsg# divs. I need to be able to input 4 navigation buttons below this code that will, when clicked, pause the ticker and go directly to the "dropmsg#" assigned to that button.

I would deeply appreciate any assistance with this. Thank you.