Problem with HV Menu!

**Bornfree** · 11-17-2006, 04:06 AM

1) Script Title: Slideshow with fading effect

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

3) Describe problem:

My Hv menu dissappers when i use this slide show.

I have read so many threads but still am unable to solve my problem. Can someone help me out.

Here is the script. All the rest works fine.

<html>
<head>

<style type="text/css">
<!--
.style1 {

<style type="text/css">
#imageinfo {
font-weight: bold;
}
</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=3000

// specify images
var slideimages = new Array("");

// specify corresponding links
var slidelinks=new Array("");

// specify description for the image
var slidedescs = new Array("");

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 = 100;

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

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

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

</script>
</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>

<div align="center">
<p><a href="javascript:gotoshow()"><img src="" name="slide" width="100" height="100" border="0" id="slide" style="width:100;height:100;" /></a>
<img src="http://" id="nextImage" style="position:absolute;visibility:hidden;" /> </p>
<blockquote>
<p><br />
<input type="image" id="prev" onClick="slideit(true);" value="Previous" src="images/prev.gif" alt="Previous" align="bottom" />
<input name="button" type="button" id="stopstart" onClick="stopstart();" value="Stop" />
<input name="image" type="image" id="next" onClick="slideit(false);" value="Next" src="images/next.gif" alt="Next" align="bottom" />
</p>
<blockquote>
<p align="left"><br />
</p>
</blockquote>
</blockquote>
</div>
<p align="center" id="imageinfo"></p>

<script type="text/javascript">

blendspeed = 1000 / 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 = "progid

XImageTransform.Microsoft.Fade(duration=" + blenddelay / 2000 + ")";
} 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() {
selectel = document.getElementById("selectimage");
selectel.onchange = function() {
if(this.value != "NONE" && this.value != whichimage) {
if(blendThread != null) {
selectel.selectedIndex = 0;
return;
}
whichimage = parseInt(this.value) - 1;
slideit(false);
}
}

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>
 </td>
<td valign="top"> </td>
</tr>
<tr>
<td width="50%" height="211" valign="top"> </td>
<td width="50%" valign="top"><div align="center"></div></td>
</tr>
<tr>
<td width="50%" height="133" valign="top"> </td>
<td width="50%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>

<p> </p>
<hr width="60%">
<div align="center"></div>
<p> </p>
</body>
</html>

Thanks a lot!!1

**Twey** · 11-21-2006, 09:54 PM

Can someone help me out.

Unless you link to your page, probably not.

**Bornfree** · 11-21-2006, 11:22 PM

Here is the link to my page.

http://www.elsema.com/test1.html

**Twey** · 11-22-2006, 06:07 PM

Onload conflict. Add the lines in red:

Code:

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

**Bornfree** · 11-22-2006, 07:56 PM

Thanks a lot Twey, it works like a charm now. I really apperciate your help.

Thanks again

Thread: Problem with HV Menu!

Thread Tools

Search Thread

Problem with HV Menu!

Bookmarks

Bookmarks

Posting Permissions