...

View Full Version : Hv Menu and slideshow conflict



bornfree
11-16-2006, 04:25 AM
Hi There,

I have read almost all threads with this subject but still am unable to solve this problem.

When i use the Blending image slideshow my Hv menu disappears. I tried a lot of suggestions that some great people made but still it didn't work. Please can someone help me out

There is the script

<html>
<head>
<title>
<style type="text/css">
<!--
.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>
<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>
<style type="text/css">
#imageinfo {
font-weight: bold;
}
</style>
<script type="text/javascript">

//***********************************************************
// Blending Image Slide Show Script-
// &#169; 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("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 = 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>
<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">&nbsp;</p>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td valign="top">

<a href="javascript:gotoshow()"><img src="bs00847a.gif" id="slide" border="0" style="width:97;height:100;" /></a>
<img src="http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif" 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 = 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:DXImageTransform.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() {
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>





&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td width="50%" valign="top"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="100"><div align="center">
<p><a href=""></a><a href=""></a></p>
</div></td>
<td>&nbsp;</td>
</tr>
</table>
</div></td>
<td width="50%" valign="top"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="100"><a href=""></a></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div align="center"></div></td>
</tr>
<tr>
<td width="50%" height="133" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="100">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table></td>
<td width="50%" valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="100" valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="100" valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="100" valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<td width="200" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td height="497"><table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td height="27" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td height="72">&nbsp;</td>
</tr> <tr>
<td height="57">&nbsp;</td>
</tr> <tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td height="62">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td height="200" valign="top"><a href=""></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="center"><a href=""></a> </div></td>
</tr>
<tr>
<td height="66"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top"><a href="catalogue.htm"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="25" valign="top"><div align="center"><br>
</div></td>
</tr>

</table> </td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<p>&nbsp;</p>
<hr width="60%">
<div align="center"></div>
<p>&nbsp;</p>
</body>
</html>





Thanks a lot

brandonH
11-16-2006, 05:11 AM
newImage.style.visibility = "invisible";



are you sure you want to be setting the newImage visibility to invisible?
I dont see where you make it visible again.... which I'm assuming you want.
if you never change its visibility back, it wont show, even if you change its opacity...

and instead of visibility, try using style.display= none/block

VR2
11-16-2006, 02:08 PM
Besides, isn't it...

obj.style.visibility = "hidden";
and
obj.style.visibility = "visible";

or is "invisible" also a valid input for that property?

bornfree
11-16-2006, 08:08 PM
Hi, Brandon

I'm very new to webdesigning and javascripting, After playing around i found out that if, this is set to visible (newImage.style.visibility = "invisible";) Then there is a duplicate image that shows outside my page (in Firefox 2.0 only). it works fine with IE. therefore i set it to invisible. but it works for sure.

Can someone please figure out why my Hv menu disappears????:confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum