pause ved mouse over
Har følgende script - hvordan får jeg det til at stoppe (rotationen) ved at holde musen over. Den stopper for hver i 20 sek for hvert ny div id - men hvis man nu har flere punkter under hver div er der behov for at stoppe den midtvejs også????
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="newsRotator" onMouseOver="ie_MsOver(this, rco_newsRotator);" onMouseOut="ie_MsOut(this, rco_newsRotator);" style="height:170px;width:155px;overflow:hidden;">
<script language="JavaScript">
// Content Rotator JavaScript class definition
function test_Rotator()
{
this.GlobalID = '';
this.ElementID = '';
this.ContainerID = '';
this.AutoStart = true;
this.HideEffect = null;
this.HideEffectDuration = 0;
this.Loop = true;
this.PauseOnMouseOver = true;
this.RotationType = 'ContentScroll';
this.ScrollDirection = 'up';
this.ScrollInterval = 10;
this.ScrollStep = 1;
this.ShowEffect = null;
this.ShowEffectDuration = 0;
this.SlidePause = 2000;
this.Slides = new Array();
this.Tickers = new Array();
this.LeadTickers = new Array();
this.CurrentSlide = -1;
this.CurrentLeadTicker = 0;
this.ScrollIntervalID = 0;
this.NextSlideTimeoutID = 0;
this.HideTimeoutID = 0;
this.Paused = true;
this.FirstTimeAround = true;
this.HasTickers = false;
this.FirstTicker = null;
this.Stopped = false;
this.Ticking = false;
}
// Starts content rotation for the given rotator instance
function rcr_Start(rotator)
{
if (rotator.RotationType == 'ContentScroll')
{
scroll_Init(rotator);
scroll_ShowNextSlide(rotator);
}
else
{
ss_ShowNextSlide(rotator);
}
}
// Continues content rotation after it was stopped
function rcr_Play(rotator)
{
if (!rotator.Stopped) return null;
rotator.Stopped = false;
if (!rotator.Ticking)
{
if (rotator.RotationType == 'SlideShow')
{
ss_Play(rotator);
}
else
{
scroll_Play(rotator);
}
}
}
// Stops content rotation for the given rotator instance
function rcr_Stop(rotator)
{
if (rotator.Stopped) return null;
rotator.Stopped = true;
window.clearTimeout(rotator.NextSlideTimeoutID);
window.clearTimeout(rotator.HideTimeoutID);
if (rotator.SlidePause == 0) window.clearInterval(rotator.ScrollIntervalID);
if (rotator.RotationType == 'SlideShow')
{
var Container = document.getElementById(rotator.ContainerID);
Container.style.visibility = 'visible';
}
}
// Sets the index of the next slide
function rcr_SetNextSlideIndex(rotator)
{
if (rotator.CurrentSlide == -1)
rotator.CurrentSlide = 0;
else if (rotator.CurrentSlide == rotator.Slides.length - 1)
{
rotator.CurrentSlide = 0;
rotator.FirstTimeAround = false;
}
else
rotator.CurrentSlide ++;
}
// Content scrolling client-side code -------------------------------------------------------------
// Initializes slide content
function scroll_Init(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
var RotatorElement = document.getElementById(rotator.ElementID);
var startTop;
var startLeft;
switch (rotator.ScrollDirection)
{
case 'up':
startTop = parseInt(RotatorElement.style.height.replace('px', '')) + 'px';
startLeft = '0px';
break;
case 'left':
startTop = '0px';
startLeft = parseInt(RotatorElement.style.width.replace('px', '')) + 'px';
break;
}
Container.style.top = startTop;
Container.style.left = startLeft;
Container.style.visibility = 'visible';
}
// Continues rotation when RotationType == 'ContentScroll'
function scroll_Play(rotator)
{
if (rotator.ScrollIntervalID == 0)
{
scroll_ShowNextSlide(rotator);
}
else if (rotator.SlidePause == 0)
{
var functionParam = 'scroll_NextSlideToView(' + rotator.GlobalID + ')';
rotator.ScrollIntervalID = window.setInterval(functionParam, rotator.ScrollInterval);
}
}
// Shows the next slide when RotationType == 'ContentScroll'
function scroll_ShowNextSlide(rotator)
{
rcr_SetNextSlideIndex(rotator);
if (!rotator.Loop && !rotator.FirstTimeAround)
{
rcr_Stop(rotator);
return null;
}
var functionParam = 'scroll_NextSlideToView(' + rotator.GlobalID + ')';
rotator.ScrollIntervalID = window.setInterval(functionParam, rotator.ScrollInterval);
}
// Moves the current slide by the number of pixels specified in rotator.ScrollStep
function scroll_NextSlideToView(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
var CurSlide = document.getElementById(rotator.Slides[rotator.CurrentSlide]);
var newTop = parseInt(Container.style.top.replace('px', ''));
var newLeft = parseInt(Container.style.left.replace('px', ''));
// Move the slide container
switch (rotator.ScrollDirection)
{
case 'up':
newTop -= rotator.ScrollStep;
break;
case 'left':
newLeft -= rotator.ScrollStep;
break;
}
Container.style.top = newTop + 'px';
Container.style.left = newLeft + 'px';
// Figure out the slide threshold
var newTopThreshold = 0;
var newLeftThreshold = 0;
var prevSlide = document.getElementById(rotator.Slides[scroll_PreviousSlideIndex(rotator)]);
if (!(rotator.FirstTimeAround && rotator.CurrentSlide == 0))
{
newTopThreshold = prevSlide.offsetHeight;
newLeftThreshold = prevSlide.offsetWidth;
}
// Stop to show the slide or run tickers, if required
if ((newTop + newTopThreshold == 0 && rotator.ScrollDirection == 'up') ||
(newLeft + newLeftThreshold == 0 && rotator.ScrollDirection == 'left'))
{
window.clearInterval(rotator.ScrollIntervalID);
rotator.ScrollIntervalID = 0;
if (!(rotator.FirstTimeAround && rotator.CurrentSlide == 0))
scroll_SwapPreviousSlide(rotator);
if (rotator.HasTickers)
{
rcr_StartTickerSequence(rotator);
}
else
{
var functionParam = 'scroll_ShowNextSlide(' + rotator.GlobalID + ')';
if (!rotator.Stopped)
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, rotator.SlidePause);
}
}
}
// Removes the previous slide from the content tree, then recreates it at the end
function scroll_SwapPreviousSlide(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
if (rotator.ScrollDirection == 'up')
{
var prevSlide = document.getElementById(rotator.Slides[scroll_PreviousSlideIndex(rotator)]);
var prevSlideCopy = prevSlide.cloneNode(true);
Container.removeChild(prevSlide);
Container.style.top = '0px';
Container.appendChild(prevSlideCopy);
rcr_ResetTickers(rotator);
}
else
{
var cRow = document.getElementById(rotator.ContainerRowID);
var prevSlideCell = cRow.cells[0];
var a = cRow.removeChild(prevSlideCell);
Container.style.left = '0px';
var b = cRow.appendChild(a);
}
}
// Returns the index of the previous slide
function scroll_PreviousSlideIndex(rotator)
{
if (rotator.CurrentSlide == 0)
return rotator.Slides.length - 1;
else
return rotator.CurrentSlide - 1;
}
// Slideshow client-side code ---------------------------------------------------------------------
// Continues rotation when RotationType == 'SlideShow'
function ss_Play(rotator)
{
if (!rotator.Ticking)
{
ss_PlayHideEffect(rotator);
var delay = 0;
if (rotator.HideEffect) delay = rotator.HideEffectDuration;
functionParam = 'ss_ShowNextSlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, delay);
}
}
// Shows the next slide when RotationType == 'SlideShow'
function ss_ShowNextSlide(rotator)
{
if (rotator.Stopped) return null;
rcr_SetNextSlideIndex(rotator);
// Setup slide content
var Container = document.getElementById(rotator.ContainerID);
var CurSlide = document.getElementById(rotator.Slides[rotator.CurrentSlide]);
Container.innerHTML = CurSlide.innerHTML;
CurSlide.innerHTML = '';
rcr_ResetTickers(rotator);
ss_PlayShowEffect(rotator);
if (rotator.HasTickers)
{
// Set timeout for displaying the slide
var functionParam = 'rcr_StartTickerSequence(' + rotator.GlobalID + ')';
var timerID = window.setTimeout(functionParam, rotator.ShowEffectDuration);
}
else
{
// Set timeout for displaying the slide
var functionParam = 'ss_DisplaySlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, rotator.ShowEffectDuration);
}
}
// Displays current slide when RotationType == 'ContentScroll'
function ss_DisplaySlide(rotator)
{
if (rotator.Stopped) return null;
window.clearTimeout(rotator.HideTimeoutID);
window.clearTimeout(rotator.NextSlideTimeoutID);
if (!rotator.Loop && rotator.CurrentSlide == rotator.Slides.length - 1)
{
rcr_Stop(rotator);
return null;
}
// Set timeout for hiding the slide
var functionParam = 'ss_PlayHideEffect(' + rotator.GlobalID + ')';
rotator.HideTimeoutID = window.setTimeout(functionParam, rotator.SlidePause);
// Set timeout for ss_ShowNextSlide
var delay = 0;
if (rotator.HideEffect) delay += rotator.HideEffectDuration;
delay += rotator.SlidePause;
functionParam = 'ss_ShowNextSlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, delay);
}
// Plays show effect when RotationType == 'ContentScroll'
function ss_PlayShowEffect(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
if (Container.filters && rotator.ShowEffect)
{
Container.style.filter = rotator.ShowEffect;
Container.filters[0].apply();
}
Container.style.visibility = 'visible';
if (Container.filters && rotator.ShowEffect) Container.filters[0].play();
}
// Plays hide effect when RotationType == 'ContentScroll'
function ss_PlayHideEffect(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
if (Container.filters && rotator.HideEffect)
{
Container.style.filter = rotator.HideEffect;
Container.filters[0].apply();
}
// Reset slide content
var CurSlide = document.getElementById(rotator.Slides[rotator.CurrentSlide]);
CurSlide.innerHTML = Container.innerHTML;
Container.style.visibility = 'hidden';
if (Container.filters && rotator.HideEffect) Container.filters[0].play();
}
// Ticker integration client-side code ------------------------------------------------------------
// Starts the ticker sequence for the current slide of the given rotator instance
function rcr_StartTickerSequence(rotator)
{
rotator.Ticking = true;
rcr_StartTicker(rotator.LeadTickers[rotator.CurrentLeadTicker]);
}
function rcr_EndTickerSequence(rotator)
{
rotator.Ticking = false;
if (!rotator.Stopped)
{
if (rotator.RotationType == 'ContentScroll')
{
var functionParam = 'scroll_ShowNextSlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, rotator.SlidePause);
}
else
{
ss_DisplaySlide(rotator);
}
}
rcr_SetNextLeadTicker(rotator);
}
// Sets the lead ticker index for the next slide
function rcr_SetNextLeadTicker(rotator)
{
if (rotator.CurrentLeadTicker == rotator.LeadTickers.length - 1)
rotator.CurrentLeadTicker = 0;
else
rotator.CurrentLeadTicker ++;
}
// Sets the text of all ticker instances contained within the give rotator instance to ''
function rcr_ResetTickers(rotator)
{
if (rotator.HasTickers)
for (var i = 0; i < rotator.Tickers.length; i++)
rcr_SetTickerText(rotator.Tickers[i], '');
}
// Mouse over & mouse out rotator event handlers --------------------------------------------------
function ie_MsOver(obj, rco_rotator)
{
if(!obj.contains(event.fromElement) && rco_rotator) rcr_Stop(rco_rotator);
}
function ie_MsOut(obj, rco_rotator)
{
if(!obj.contains(event.toElement) && rco_rotator) rcr_Play(rco_rotator);
}
function ns_MsOver(evt, rElementID, rco_rotator)
{
if (nsIsMouseOnObject(rElementID, evt) && rco_rotator) rcr_Stop(rco_rotator);
}
function ns_MsOut(evt, rElementID, rco_rotator)
{
if (!nsIsMouseOnObject(rElementID, evt) && rco_rotator) rcr_Play(rco_rotator);
}
// Utils ------------------------------------------------------------------------------------------
// Determines whether the mouse pointer is currently over the given object
function nsIsMouseOnObject(objName, evt)
{
if (objName != null)
{
var obj = document.getElementById(objName);
var objLeft = ns_pageX(obj) - 1;
var objTop = ns_pageY(obj) - 1;
var objRight = objLeft + obj.offsetWidth + 1;
var objBottom = objTop + obj.offsetHeight + 1;
if ((evt.pageX > objLeft) && (evt.pageX < objRight) &&
(evt.pageY > objTop) && (evt.pageY < objBottom))
return true;
else
return false;
}
else
return false;
}
// Calculates the absolute page x coordinate of any element
function ns_pageX(element)
{
var x = 0;
do
{
if (element.style.position == 'absolute')
{
return x + element.offsetLeft;
}
else
{
x += element.offsetLeft;
if (element.offsetParent)
if (element.offsetParent.tagName == 'TABLE')
if (parseInt(element.offsetParent.border) > 0)
{
x += 1;
}
}
}
while ((element = element.offsetParent));
return x;
}
// Calculates the absolute page y coordinate of any element
function ns_pageY(element)
{
var y = 0;
do
{
if (element.style.position == 'absolute')
{
return y + element.offsetTop;
}
else
{
y += element.offsetTop;
if (element.offsetParent)
if (element.offsetParent.tagName == 'TABLE')
if (parseInt(element.offsetParent.border) > 0)
{
y += 1;
}
}
}
while ((element = element.offsetParent));
return y;
}
</script>
<div id="newsRotator_SlideContainer" style="position:relative;visibility:hidden;cursor:hand">
<div id="newsRotator_slide0">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr bgcolor="#E2E2E2" >
<td width="40" height="18" class="menu_overskrift">I dag </td>
<td height="18" colspan="2" align="right" class="menu_overskrift"><span class="tekst">26-9-2006</span> </td>
</tr>
<tr >
<td valign="top" class="tekst"> 19:00</td>
<td valign="top" class="tekst">tirsdagstur </td>
<td width="25" class=""><a href="?kalender_id=10&id=324" title="Klik for visning">vis</a>
</td>
</tr>
<tr>
<td height="2" colspan="3"> </td>
</tr>
<tr align="center" valign="middle" >
<td height="85" colspan="3" class="tekst"> <img src="image7.jpg" width="" height="" border='0' text-decoration='none'>
</td>
</tr>
</table>
</div>
<div id="newsRotator_slide1">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr bgcolor="#E2E2E2" >
<td width="40" height="18" class="menu_overskrift">Onsdag </td>
<td height="18" colspan="2" align="right" class="menu_overskrift"><span class="tekst">27-9-2006</span> </td>
</tr>
<tr>
<td height="1" colspan="3" bgcolor="#cccccc"> </td>
</tr>
<tr>
<td height="3" colspan="3"> </td>
</tr>
<tr >
<td valign="top" class="tekst"> 20:45</td>
<td valign="top" class="tekst">onsdagstur </td>
<td width="25" class=""><a href="?kalender_id=11&id=324" title="Klik for visning">vis</a>
</td>
</tr>
<tr>
<td height="2" colspan="3"> </td>
</tr>
<tr align="center" valign="middle" >
<td height="85" colspan="3" class="tekst"> <img src="image3.jpg" width="75" height="110" border='0' text-decoration='none'>
</td>
</tr>
</table>
</div>
<div id="newsRotator_slide2">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr bgcolor="#E2E2E2" >
<td width="40" height="18" class="menu_overskrift">Torsdag </td>
<td height="18" colspan="2" align="right" class="menu_overskrift"><span class="tekst">28-9-2006</span> </td>
</tr>
<tr>
<td height="1" colspan="3" bgcolor="#cccccc"> </td>
</tr>
<tr>
<td height="3" colspan="3"> </td>
</tr>
<tr >
<td valign="top" class="tekst"> 20:45</td>
<td valign="top" class="tekst">Torsdag </td>
<td width="25" class=""><a href="?kalender_id=11&id=324" title="Klik for visning">vis</a>
</td>
</tr>
<tr>
<td height="2" colspan="3"> </td>
</tr>
<tr align="center" valign="middle" >
<td height="85" colspan="3" class="tekst"> <img src="image3.jpg" width="75" height="110" border='0' text-decoration='none'>
</td>
</tr>
</table>
</div>
</div>
<script language="JavaScript">
// Initialize rotator instance -------------------------------------------------
var rco_newsRotator = new test_Rotator();
rco_newsRotator.GlobalID = 'rco_newsRotator';
rco_newsRotator.ElementID = 'newsRotator';
rco_newsRotator.ContainerID = 'newsRotator_SlideContainer';
rco_newsRotator.ContainerRowID = 'newsRotator_ContainerRow';
rco_newsRotator.AutoStart = true;
rco_newsRotator.SlidePause = 1000;
rco_newsRotator.HideEffect = null;
rco_newsRotator.HideEffectDuration = 250;
rco_newsRotator.Loop = true;
rco_newsRotator.PauseOnMouseOver = true;
rco_newsRotator.RotationType = 'ContentScroll';
rco_newsRotator.ScrollDirection = 'up';
rco_newsRotator.ScrollInterval = 10;
rco_newsRotator.ShowEffect = null;
rco_newsRotator.ShowEffectDuration = 250;
rco_newsRotator.Slides = new Array();
rco_newsRotator.Slides[0] = 'newsRotator_slide0'; rco_newsRotator.Slides[1] = 'newsRotator_slide1'; rco_newsRotator.Slides[2] = 'newsRotator_slide2';
rco_newsRotator.HasTickers = false;
if (rco_newsRotator.AutoStart) rcr_Start(rco_newsRotator);
</script>
</div>
</body>
</html>
