1) Script Title:
Slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/forums/s...tive+slideshow

3) Describe problem:

Can some plesae tell me how to have both HV menu and slideshow in one page. I have read a lot of threads but cant find the answer.

*Twey, you might be able to help me out

This is my code:



.style1 {
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
}
.style4 {
color: #FFFFFF;
font-weight: bold;
}
.style5 {
font-size: 16px;
font-weight: bold;
}
.style6 {
font-size: 12px;
font-weight: bold;
color: #FF0000;
}
.style7 {
color: #006600;
font-weight: bold;
}
.style8 {color: #FF0000}
.style16 {
font-size: 14px;
color: #000000;
}
-->
<style type="text/css">
#imageinfo {
font-weight: bold;
}

</style>
<link rel="shortcut icon" href="/favicon.ico" />
</head>

<body bgcolor="#FFFFFF" text="#000000">
<script type='text/javascript'>

//HV Menu- by Ger Versluis (http://www.burmees.nl/)
//Submitted to Dynamic Drive (http://www.dynamicdrive.com)
//Visit http://www.dynamicdrive.com for this script and more

function Go(){return}
</script> <script type='text/javascript' src='exmplmenu_var.js'></script> <script type='text/javascript' src='menu_com.js'></script>
<noscript>
Your browser does not support scrip
</noscript>
<table width="760" border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="1002">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100" background="images/banner.jpg">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#006600" height="20">&nbsp;</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td height="443" valign="top"><p align="center" class="style5"> </p>
<p align="center">A
</strong></p>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td valign="top">



</style>
<script type="text/javascript">

//***********************************************************
// Blending Image Slide Show Script-
// Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
// Modified by Twey for compatibility, standards compliance,
// buttons, and stuff. That's "Twey." "Twey." With a "W." :-)
//***********************************************************

// specify interval between slide (in milliseconds)
var slidespeed=2000

// specify images
var slideimages = new Array("image1.gif","image2.gif","image3.gif");

// specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com");

// specify description for the image
var slidedescs = new Array("A clock", "A bulb", "Some dice");

var newwindow = 1; // open links in new window? 1=yes, 0=no
var autostart = 1; // autostart?

// Amount of blend with each pass, from 0 (invisible) to 1 (opaque). Lower = smoother, higher = faster. Warning: set it to 0 and it'll never get there :-)
var blendstep = 0.01;

// Passes per second.
var blendspeed = 80;

// Don't edit below here unless you know what you're doing. :-)

var imageholder = new Array();
for (i=0;i<slideimages.length;i++) {
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow() {
if (newwindow)
window.open(slidelinks[whichlink]);
else
window.location = slidelinks[whichlink];
}

</script>

<a href="javascript:gotoshow()"><img src="images/th-fmr-212.jpg" id="slide" border="1" style="width:100;height:100;" /></a>
<img src="" id="nextImage" style="position:absolute;visibility:hidden;" />
<br />
<input id="prev" type="button" onClick="slideit(true);" value="Previous" />
<input id="stopstart" type="button" onClick="stopstart();" value="Start" />
<input id="next" type="button" onClick="slideit(false);" value="Next" /><br />
<p id="imageinfo"></p>

<script type="text/javascript">

blendspeed = 2000 / blendspeed;

var whichlink=0,
whichimage=-1,
playing = false,
blenddelay = blendspeed * 1 / blendstep,
desc = document.getElementById("imageinfo"),
imgnum = 0,
w3cOpacity = (typeof document.images[0].style.opacity != "undefined"),
mozOpacity = (typeof document.images[0].style.MozOpacity != "undefined"),
ieOpacity = (typeof document.images[0].filters != "undefined"),
slideThread = null, blendThread = null,
first = true;

if(w3cOpacity) {
document.images['slide'].style.opacity = "0.99";
document.images['nextImage'].style.opacity = "0.0";
} else if(mozOpacity) {
document.images['slide'].style.MozOpacity = "0.99";
document.images['nextImage'].style.MozOpacity = "0.0";
} else if(ieOpacity) {
document.images['slide'].style.filter = "progidXImageTransform.Microsoft.Fade(duration=" + blenddelay / 1000 + ")";
} else {
blenddelay = 0;
}

function midBlend(oldImage, newImage) {
if((w3cOpacity && parseFloat(newImage.style.opacity) > 0.95) || (mozOpacity && parseFloat(newImage.style.MozOpacity) > 0.95)) {
oldImage.src = newImage.src;
if(w3cOpacity) {
oldImage.style.opacity = "0.99";
newImage.style.opacity = "0.0";
} else if(mozOpacity) {
oldImage.style.MozOpacity = "0.99";
newImage.style.MozOpacity = "0.0";
}
blendThread = null;
return;
}

if(w3cOpacity) newImage.style.opacity = parseFloat(newImage.style.opacity) + blendstep;
else if(mozOpacity) newImage.style.MozOpacity = parseFloat(newImage.style.MozOpacity) + blendstep;

if(w3cOpacity) oldImage.style.opacity = parseFloat(oldImage.style.opacity) - blendstep;
else if(mozOpacity) oldImage.style.MozOpacity = parseFloat(oldImage.style.MozOpacity) - blendstep;

blendThread = setTimeout("midBlend(document.getElementById('" + oldImage.id + "'), document.getElementById('" + newImage.id + "'))", blendspeed);
}

function imageBlend(oldImage, newImage) {
if(!w3cOpacity && !mozOpacity && !ieOpacity) { oldImage.src = newImage.src; return; }
if(blendThread != null) return;
if(ieOpacity) {
oldImage.filters[0].apply();
oldImage.src=imageholder[whichimage].src;
oldImage.filters[0].play();
return;
}
newImage.style.width = oldImage.style.width;
newImage.style.height = oldImage.style.height;
newImage.style.top = oldImage.offsetTop + "px";
newImage.style.left = oldImage.offsetLeft + "px";
if(w3cOpacity) { newImage.style.opacity = "0.0"; oldImage.style.opacity = "0.99"; }
else if(mozOpacity) { newImage.style.MozOpacity = "0.0"; oldImage.style.MozOpacity = "0.99"; }
else if(ieOpacity) { oldImage.filters[0].apply(); oldImage.src = newImage.src; oldImage.filters[0].play(); }
newImage.style.zIndex = 1;
oldImage.style.zIndex = 0;
newImage.style.visibility = "invisible";
if(!ieOpacity) midBlend(oldImage, newImage);
}

desc.innerHTML = "Description: <span id=\"imagedesc\" style=\"font-weight:normal;\">" + slidedescs[0] + "</span><br />Picture <span id=\"imagenumber\">1</span> of " + slidelinks.length;
desc = document.getElementById("imagedesc");
imgnum = document.getElementById("imagenumber");

function slideit(back) {
if (!document.images || blendThread != null) return;
clearTimeout(slideThread);

// Movement
whichlink = whichimage;
if(back) whichimage -= 1;
else whichimage += 1;

// Error checking and boundaries
if(!imageholder[whichimage]) {
if(whichimage < 0) whichimage = slidelinks.length - 1;
else whichimage = 0;
}

// Display
document.images['nextImage'].src = imageholder[whichimage].src;
if(!first) imageBlend(document.images['slide'], document.images['nextImage']);
else document.images['slide'].src = imageholder[whichimage].src;
desc.innerHTML = slidedescs[whichimage];
imgnum.innerHTML = whichimage + 1;

// Animation
if(!playing) return;
slideThread = setTimeout("slideit(false)", slidespeed+blenddelay);
}

function stopstart() {
playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
if(playing) slideit(false);
else clearTimeout(slideThread);
}

function popSel() {
for(var fish=0;fish < imageholder.length;fish++) {
var blah = document.createElement('option');
blah.value = fish;
blah.innerHTML = slidedescs[fish];
selectel.appendChild(blah);
}
}

onload = function() {
slideit(false);
first = false;
if(autostart) document.getElementById("stopstart").click();
popSel();
}

</script>