Fade to Slideshow ?

Wen I use Tiger's built in slideshow feature, I get an odd transition. My desktop fades to black as expected, but then reappears as if interrupted, and then starts the show. Any ideas why? Any insights what I could do to fix this?

Perhaps checking Console for clues immediately after the next time you notice this anomaly.
Good luck!
Dr. Smoke
Author: Troubleshooting Mac® OS X
Note: The information provided in the link(s) above is freely available. However, because I own The X Lab™, a commercial Web site to which some of these links point, the Apple Discussions Terms of Use require I include the following disclosure statement with this post:
I may receive some form of compensation, financial or otherwise, from my recommendation or link.

Similar Messages

Firefox 3.5.9 won't play ultimate fade-in slideshow on home page, but 3.6.3 and older versions will. How to fix?

I put up a website in early December 09 running the Ultimate Fade-in Slideshow java script from Dynamic drive on my home page. It worked fine in Firefox and IE6-8. Got an email from the client today that the rotating photos were no longer working. Checked my computer running FF 3.6.3 and all was fine, but my laptop and another computer in the house both running FF 3.5.9 it was not working. Can't recall the earlier version(s) that also ran fine. Website is www.susantiksondds.com Any ideas of what I can do in my code to make it run in this version???
== This happened ==
Every time Firefox opened
== Just noticed today when client brought it to my attention. Previously fine.

Are you sure that Firefox gets the plugins from the ~/.mozilla/plugins directory and not from another location.
Did you try to place the symlink in /usr/lib/mozilla/plugins ?
See [[Troubleshooting plugins]] on how to see the path of all plugins.

Fade-in slideshow

I would like to create a fade-in slideshow for a homepage. No
forward, back, play and pause buttons - just a simple slideshow of
3 images shown in rotation with a gentle fade effect. I'm looking
at the pros and cons of; animated gifs, Flash, CSS (though not sure
my CSS is up to this yet), and javascript. Does anyone have any
recommendations?

Dawn Wilson wrote:
> I would like to create a fade-in slideshow for a
homepage. No forward, back,
> play and pause buttons - just a simple slideshow of 3
images shown in rotation
> with a gentle fade effect. I'm looking at the pros and
cons of; animated gifs,
> Flash, CSS (though not sure my CSS is up to this yet),
and javascript. Does
> anyone have any recommendations?
I used some JS for this:
http://www.acspecialprojects.com/
I used the previous version of this:
http://slideshowjs.com/blog/2009/01/29/slideshow-js-20-released/
It was very easy to implement, and now has many more
features. It uses
the Scriptaculous Javascript library, as used by Lightbox JS,
which is
why I used it on this site.
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html
How To Report A Bug To Adobe
http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

Slideshow Needed

Hello,
I need to create a transitioning slideshow in Dreamweaver CS4 for my site's homepage. I would like to link some of the images in the slideshow. The current homepage is a template-based page. I don't want to use flash to create it. I would prefer it to be javascript-based or some other method.
Any suggestions? Thanks!

Image Effects
http://www.dynamicdrive.com/dynamicindex4/
DHTML Fade-in slideshow
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
A nice list of image gallery & lightbox resources can be found here:
http://www.1stwebdesigner.com/resources/57-free-image-gallery-slideshow-and-lightbox-solut ions/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Image not displaying in Slideshow Javascript

Hello there,
I am using the Ultimate Fade-In Slideshow from Dynamic Drive.
It's working well apart from the fact that one of my images is not
displaying at all. It's the image called "laurentbio1.jpg". Can
anyone tell me what I'm doing wrong? I've attached the script code
here:
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script type="text/javascript">
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (
http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit
http://www.dynamicdrive.com/
for this script and 100s more.
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["restaurantinterior5.jpg"]
fadeimages[1]=["restaurantinteriorwall.jpg"]
var fadebgcolor="#0A1369"
var fadeimages2=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["restaurantinteriorframed.jpg"]
fadeimages2[1]=["restaurantsign.jpg"]
fadeimages2[2]=["tablefortwo2.jpg"]
fadeimages2[3]=["laurentbio1.jpg"]
var fadebgcolor="#0A1369"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding
clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight,
borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
//thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers
(ie: Firefox)
document.write('<div id="master'+this.slideshowid+'"
style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"> <div
id="'+this.canvasbase+'_0"
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filte r:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml- opacity:0.1;background-color:'+fadebgcolor+'"></div><div
id="'+this.canvasbase+'_1"
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filte r:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml- opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img
name="defaultslide'+this.slideshowid+'"
src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers
such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()",
this.delay)
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if
IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if
(obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")?
obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] :
document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)?
obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()",
obj.delay)
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
slideHTML+='<img src="'+this.postimages[picindex].src+'"
border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link
exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache
object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser?
iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")?
this.canvasbase+"_1" : this.canvasbase+"_0"
else{
var
ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
this.curimageindex=(this.curimageindex<this.postimages.length-1)?
this.curimageindex+1 : 0
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] :
document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] :
document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE
ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser?
iebrowser["master"+this.slideshowid] :
document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
this.rotateimage()
</script>
Thank you so much!

So, the problem described in the other forum post does not match the title of this thread. Are you trying to address two different things? These are unrelated btw.
For the issue in the other thread, you'll have to troubleshoot your content distribution to the selected DP. The distmgr.log and pkgxfermgr.log (assuming you chose to distribute the image to a DP directly attached to your primary site) are the places to
start and will show you exactly what's going on.
As for the title of this thread, we'll need a lot more info to help you there.
Finally, I would suggest you copy your questions from other sources into the thread -- this will help other folks in the future that may stumble upon this thread and will prevent any confusion.
Jason | http://blog.configmgrftw.com | @jasonsandys

Jquery Image Slideshow

Hi All,
I have searched through Google looking for a simple image fade Jquery Slideshow and I am yet to find a nice looking simple one.
Can anyone point me in the direction of an good ones, preferably free (I know this doesn't help).
Thanks in advance.
Alex

How about Cycle2?
Cycle2 Getting Started
Nancy O.

Plain jane image slideshow wont run in safari?

Hello all....
at www.midainternationalinc.com I've got a plain jane image rotator javascript that is supposed to run a set of images nicely in the top right hand corner. in IE and FF it runs fine...but NOT in Chrome and Safari? the script is this one -- Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
I've asked for help in the Chrome help areas, but wonder why it wont run in Safari? I'm running 3.2.1 on XPPro/SP3....and I'm stumped....and yes, javascript is enabled in Safari and I can go to a javascript page say at dynamicdrive.com and things work fine....
? can someone help here?
Jim

I'm not a Webpage designer/coder, so there's a limit to the advice I can give you here. But I can see the effect you're describing on my Safari 4.0.4 for Windows.
I tried using the Web Inspector and the Error Console (in the Develop menu in Safari 4.0.4) to have a look at your page. Both of them are reporting the following error about your javascript:
*ReferenceError: Can't find variable: obj*
Since both Safari and Chrome are WebKit-based:
http://en.wikipedia.org/wiki/Webkit#Usage
... I figure the Chrome browsers are running into a similar sort of trouble when viewing the page.

- Looking for element Fader script...

Anyone know where I can find a script that will allow an
element (table,
div, image or other) to fade in at a controlled rate? I'd use
it for nav
menus (making a table or a cell light up progressively on
mouseover, for
instance).
Thanks!

Have a look at this page:
http://www.eclipsme.com/tablefade.shtml
I'm not sure this covers everything you want, in fact
probably doesn't,
but is a script I was playing around with a bit. I have no
idea where I
got it from, but perhaps it can help.
Harvey
Reese wrote:
> Thanks, but this seems limited to images. I'd like to
fade a variety of
> objects (images, tables, divs, etc.)
>
> "eclipsme" <[email protected]> wrote in message
> news:eruve0$ghe$[email protected]..
>> I have had luck with this. I believe it allows you
to adjust the interval
>> between fades and the rate of fade itself, though it
has been a while
>> since I played with it. Here is the info from the
script:
>>
>>> * Ultimate Fade-In Slideshow (v1.5): ©
Dynamic Drive
>>> (
http://www.dynamicdrive.com)
>>> * This notice MUST stay intact for legal use
>>> * Visit
http://www.dynamicdrive.com/
for this script and 100s more.
>>
>> Harvey
>
>

Rotating images fade-in

i managed to create a rotating image banner with the help from this website
http://www.communitymx.com/content/article.cfm?cid=651FF
but without the fade-in fade-out effect it doesn't look very nice. how can i make the images fade-in like in the below website
http://www.flipflopflo.co.uk/home
i found some help here
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
but (as i am not professional user) i dont understand what to do with the scripts shown there. for example on "Step 2" it says
"Step 2: Then, insert the following sample HTML for 2 sample Fade In slideshows:"
insert where?

free flash tutorials sites list here
http://www.links-mylinks.com/2007/10/flash-sites-free-tutorial-templates.html

Menu dropping down behind image.

http://72.29.76.51/~organica/index.html
If you scroll over the GROCERY tab, you'll see that the pull down is hidden behind the image below. Any hints on getting the menu to appear in front of the image? Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Organica Natural Foods | Northvale, New Jersey</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [600, 493], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["media/slide_2.jpg", "", "", ""],
        ["media/slide_1.jpg", "", "", ""],
         //<--no trailing comma after very last image element!
    displaymode: {type:'auto', pause:6000, cycles:1, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 2000, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
</script>

<link href="main.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:#003300;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: bold;
    font-size: 12px;
    font-style: normal;
    padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 100%;
.MenuBarFixedCentered {
    float: none;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;
     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 0px 8px 0px 8px;
    background-color:transparent;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
#MenuBar .MenuItemFirst {
    border-style: none none none none;
#MenuBar .MenuItemLast {
    border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1.4em;
    color:#ffffff;
    background-color:transparent;
    padding: 6px 15px 6px 15px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    font-style: normal;
    background-color:transparent;
    padding:0px 8px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:transparent;
    color:#ffffff;
    padding: 6px 12px 6px 5px;
    width: 7em;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: transparent;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #999999;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #999999;
#MenuBar .SubMenu .MenuItemHover {
    background-color: #003300;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #999999;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: #003300;
    min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #003300;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #999999;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #999999;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">

</script>


</head>
<body bgcolor="#17321A">
<div id="outerWrapper">
<div id="header"><img src="media/header.jpg" width="960" height="160" alt="organica title" /></div>
<div id="navbar">
    <ul id="MenuBar">
      <li> <a href="index.html">Home</a></li>
      <li> <a href="kitchen.html">Kitchen</a>
      <ul>
          <li> <a href="menus.html">Menus</a></li>
          <li> <a href="catering.html">Catering</a></li>
      </ul>
      </li>
      <li> <a href="juicebar.html">Juice Bar</a></li>
      <li> <a href="produce.html">Produce</a></li>
      <li> <a href="supplements.html">Supplements</a></li>
      <li> <a href="grocery.html">Grocery</a>
      <ul>
          <li> <a href="packaged.html">Packaged Goods</a></li>
          <li> <a href="refrigerated.html">Refrigerated</a></li>
          <li> <a href="frozen.html">Frozen Foods</a></li>
          <li> <a href="glutenfree.html">Gluten Free</a></li>
      </ul>
      </li>
      <li> <a href="bodycare.html">Body Care</a></li>
      <li> <a href="events.html">Events</a></li>
      <li> <a href="contact.html">Contact</a>
      <ul>
          <li> <a href="directions.html">Directions</a></li>
          <li> <a href="employment.html">Employment</a></li>
      </ul>
      </li>
      </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarFullwidth",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
    </script>
</div>
<div id="contentWrapper">
    <div id="sidebar">
      <h2>Get Your Organica Loyalty Card<br />
        <img src="media/loyalty.jpg" width="200" height="129" alt="loyalty" /></h2>
      <hr width="90%" size="1" />
      <p>
        <style>
.link,
.link a,
.signupframe
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    .link,
    .link a {
        text-decoration: none;
    .signupframe {
        border: 0px solid #000000;
        background: #ffffff;
.signupframe .required {
    font-size: 10px;
    </style>
      </p>
      <form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup8190" accept-charset="UTF-8" onsubmit="return verifyRequired8190();" >
        <input type="hidden" name="redirect" value="http://organicanaturalfoods.com/thanks.html" />
        <input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html" />
        <div id="SignUp">
          <h2>Sign-up for our Organica e-News<br />
            Receive coupons, event info, and more! </h2>
          <table width="200" align="center" class="signupframe" border="0" cellspacing="0" cellpadding="5">
            <tr>
              <td align="center"><input type="text" name="fields_email" /></td>
            </tr>
            <input type="hidden" name="listid" value="70490" />
            <input type="hidden" name="specialid:70490" value="HHBU" />
            <input type="hidden" name="clientid" value="971128" />
            <input type="hidden" name="formid" value="8190" />
            <input type="hidden" name="reallistid" value="1" />
            <input type="hidden" name="doubleopt" value="0" />
            <tr>
              <td><div align="center">
                <input type="submit" name="Submit" value="Submit" />
              </div></td>
            </tr>
          </table>
        </div>
      </form>
      <script type="text/javascript">
var icpForm8190 = document.getElementById('icpsignup8190');
if (document.location.protocol === "https:")
    icpForm8190.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired8190() {
if (icpForm8190["fields_email"].value == "") {
    icpForm8190["fields_email"].focus();
    alert("The Email field is required.");
    return false;
return true;
    </script>
      <p></p>
      <p>
<iframe src=
"http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOrganicaN aturalFood&width=250&colorscheme=light&show_faces=true&border_color&stream=false&header=fa lse&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
      </p>
    </div>

    <div id="content"><div id="slide"><div id="fadeshow1"></div></div>
    </div>
    
    <div id="footer">
      <a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="links.html">Links</a> | <a href="directions.html">Directions</a> | <a href="employment.html">Employment</a> | <a href="contact.html">Contact Us</a><br />
    All contents ©2011 Organica Natural Foods | Site Design: <a href="http://nowagenewmedia.com" target="_blank">Now Age New Media</a><br />
    *Statements on this site relating to any dietary supplements have not been evaluated by the Food and Drug Administration. <br />
    These products are not intended to diagnose, treat, cure or prevent any disease. If you are pregnant, nursing, taking medication, <br />
    or have a medical condition, consult your physician before using these products. </div>
</div>
</div>
</body>
</html>

IE doesn't like something about
http://72.29.76.51/~organica/fadeslideshow.js
Perhaps try re-uploading it.

Page coming up blank in IE & Safari

The website I am designing is driving me crazy. One of the pages is coming up blank in IE & Safari but works fine in FF. I assume it is something in the code but I can't figure it out.I am somewhat new to this type of stuff so any help would be appreciated.
Here is the code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to ACE Hardware of Rome</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

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

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body onload="MM_preloadImages('images/sidebuttons_roll_01.png','images/sidebuttons_roll_02.png ','images/sidebuttons_roll_03.png','images/sidebuttons_roll_04.png','images/sidebuttons_ro ll_05.png','images/bottombuttons_roll_01.png','images/bottombuttons_roll_02.png','images/b ottombuttons_roll_03.png','images/bottombuttons_roll_04.png')">
<div align="center">
<table width="751" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="4"><img src="topredstrip.jpg" width="751" height="24" border="0" usemap="#Map" /></td>
    </tr>
    <tr>
      <td height="89" colspan="4"><img src="aceheader.jpg" width="751" height="101" /></td>
    </tr>
    <tr>
      <td colspan="4" bgcolor="#E20014"><div align="left">
          <ul class="MenuBarHorizontal style2" id="MenuBar1">
            <li><a href="index.html" class="style7"><strong>Home</strong></a> </li>
            <li><a href="about.html" class="style7"><strong>About Us</strong></a></li>
            <li><a href="staff.html" class="style7"><strong>Our Team</strong></a></li>
            <li><a href="departments.html" class="style5 style3"><strong>Departments</strong></a> </li>
            <li><a href="#" class="style8"><strong>Services</strong></a></li>
            <li><a href="#" class="MenuBarItemSubmenu style7"><strong>Vendor Links</strong></a>
              <ul>
                  <li><a href="http://www.stihldealer.net/default-dealer-043026.aspx" target="_blank">Stihl</a></li>
                  <li><a href="http://www.weber.com/us/" target="_blank">Weber</a></li>
                  <li><a href="http://www.scotts.com/smg/" target="_blank">Scotts</a></li>
                  <li><a href="http://www.naturapet.com/" target="_blank">Natura Pet Products</a></li>
                  <li><a href="http://www.nutroproducts.com/" target="_blank">Nutro Pet Food</a></li>
                </ul>
            </li>
          </ul>
      </div></td>
    </tr>
    <tr>
      <td width="170" valign="top" bgcolor="#000000"><a href="signup.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/sidebuttons_roll_01.png',1)"><img src="images/sidebuttons_01.png" name="Image14" width="170" height="69" border="0" id="Image14" /></a><a href="http://www.acehardware.com/infohome/index.jsp?clickid=body_projectsandsolutions_img" target="_blank" onmouseover="MM_swapImage('Image15','','images/sidebuttons_roll_02.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/sidebuttons_02.png" name="Image15" width="170" height="66" border="0" id="Image15" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/sidebuttons_roll_03.png',1)"><img src="images/sidebuttons_03.png" name="Image16" width="170" height="66" border="0" id="Image16" /></a><a href="https://www.acehardware.com/acerewards/index.jsp" target="_blank" onmouseover="MM_swapImage('Image17','','images/sidebuttons_roll_04.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/sidebuttons_04.png" name="Image17" width="170" height="67" border="0" id="Image17" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','images/sidebuttons_roll_05.png',1)"><img src="images/sidebuttons_05.png" name="Image18" width="170" height="72" border="0" align="top" id="Image18" /></a></td>
      <td colspan="3"><table width="581" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="9" height="219"> </td>
          <td width="340"><p align="center"><span class="style1">Welcome to ACE Hardware</span><br />
              <img src="rotating pics/storefront.png" width="321" height="210" /></p>
            </td>
          <td width="232" height="219"><div align="right">
            <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','222','height','219','src','rotating pics/rotatingpics','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','rotating pics/rotatingpics' ); //end AC code
          </script>
            <noscript>
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="222" height="219">
                <param name="movie" value="rotating pics/rotatingpics.swf" />
                <param name="quality" value="high" />
                <embed src="rotating pics/rotatingpics.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="222" height="219"></embed>
              </object>
              </noscript>
          </div></td>
        </tr>
        <tr>
          <td height="100" colspan="3"><table width="581" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="140" height="112"><a href="http://acehardware.shoplocal.com/acehardwarecircular/default.aspx?action=browsepageflash&s toreid=2432523&rapid=756011&prvid=ace-091001SS&promotioncode=ace-091001SS" target="_blank">
                <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 100, 0, 6000, 0, "R")
                </script>
              </a></td>
              <td><a href="http://www.edenpure.com/main" target="_blank">
                <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','441','height','100','src','banner ads/edenpure','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','banner ads/edenpure' ); //end AC code
              </script>
                <noscript>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="441" height="100">
                    <param name="movie" value="banner ads/edenpure.swf" />
                    <param name="quality" value="high" />
                    <embed src="banner ads/edenpure.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="441" height="100"></embed>
                  </object>
                  </noscript>
              </a></td>
            </tr>
          </table></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td><a href="http://www.stihldealer.net/default-dealer-043026.aspx" target="_blank" onmouseover="MM_swapImage('Image12','','images/bottombuttons_roll_01.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/bottombuttons_01.png" name="Image12" width="170" height="150" border="0" id="Image12" /></a></td>
      <td width="204"><a href="http://www.edenpure.com/main" target="_blank" onmouseover="MM_swapImage('Image13','','images/bottombuttons_roll_02.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/bottombuttons_02.png" name="Image13" width="204" height="150" border="0" id="Image13" /></a></td>
      <td width="199"><a href="keurig.html" onmouseover="MM_swapImage('Image19','','images/bottombuttons_roll_03.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/bottombuttons_03.png" name="Image19" width="199" height="150" border="0" id="Image19" /></a></td>
      <td width="178"><a href="http://www.acehardware.com/category/index.jsp?categoryId=2568447&clickid=topnav_paint" target="_blank" onmouseover="MM_swapImage('Image20','','images/bottombuttons_roll_04.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/bottombuttons_04.png" name="Image20" width="177" height="150" border="0" id="Image20" /></a></td>
    </tr>
    <tr>
      <td colspan="4"><table width="750" border="0" cellpadding="0" cellspacing="0" dwcopytype="CopyTableCell">
        <tr>
          <td><a href="http://maps.google.com/maps?hl=en&q=115+Black+River+Blvd.,+Rome+NY&ie=UTF8&split=0&gl=us&e i=8BNJSpL-B5LCtwf26eGmBg&ll=43.218688,-"><img src="find.jpg" width="266" height="53" border="0" /></a><img src="middle_find.jpg" width="298" height="53" /><img src="contact_top.jpg" width="186" height="53" border="0" usemap="#Map2" /></td>
        </tr>
      </table>
        <map name="Map2" id="Map2">
          <area shape="rect" coords="46,19,167,54" href="#" />
          <area shape="rect" coords="46,51,136,69" href="#" />
        </map>      </td>
    </tr>
    <tr>
      <td colspan="4"><img src="bottom.jpg" alt="" width="750" height="25" border="0" usemap="#Map3" />
        <map name="Map3" id="Map3">
          <area shape="rect" coords="610,-1,733,13" href="#" />
          <area shape="rect" coords="168,3,236,18" href="#" />
          <area shape="rect" coords="245,1,290,19" href="#" />
          <area shape="rect" coords="299,1,361,18" href="#" />
          <area shape="rect" coords="369,2,424,18" href="contact.html" />
        </map>      </td>
    </tr>
</table>
</div>
<map name="Map" id="Map"><area shape="rect" coords="2,3,86,18" href="contact.html" />
</map><script type="text/javascript">

</script></body>
</html>

In your code you are missing a closing --> comment tag just before the closing </script> tag (I've included it below)
<script type="text/javascript">

</script>

Weird issue with background image (Safari)

Just wonder if anyone can shed any light on this one....
Basically have a design in progress here:
http://www.hpwebdesign.co.uk/rachelworrall/index101.php
All was fine until I added the three images that fade into one another using the Ultimate Fade In slideshow script ( http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm )
When the page is initially loaded in Safari (5), the top section of the background image doesn't display - it starts just beneath the main content below the navigation.
The weird part is that it literally only takes a click of the mouse outside that Safari window to make it appear. A refresh, however, won't.
It seems fine in Firefox on a Mac, and the client didn't report any issue in IE.
Can anyone with Safari have a quick look and replicate that glitch? If not, then it might just be some weird local issue here.
Many thanks.

I've put up a couple of screenshots here:
http://www.hpwebdesign.co.uk/rachelworrall/screenshots.htm
Its like that in Safari 5.0.3 (and 5.0.4 which I've just updated.)
Again, it literally just needs a click out of the Safari window to make it appear correctly as per the second screenshot.
Its like this on a 27" iMac, but had a look on the macbook, and its fine on there.
So if it looks OK with anyone else, I'm just going to put it down to a weird glitch on my machine here.

Looking for a random image extension

Does anybody know of a good FREE extension that will put a
random image inside a cell of a table?
I'm actually looking to do two different things. The first: I
want a random image from about 10 images to change every time the
user reloads the page. The second: I want images from about 10
images to fade up, stay on the page for a few seconds, then fade
down and have another one of the 10 fade up, so on and so forth.
If anyone knows of a free extension that will do this, I
would love to know about it, thanks!

This one works fine for me,
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (
http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit
http://www.dynamicdrive.com/
for this script and 100s more.
hth

Why is Javascript sometimes not working?

Hello -
I am a web programmer, and also design websites. One of my clients tells me that the javascript slide show on three of her pages is not working in Safari. She wants it fixed, but I have no idea why it isn't working.
1) It works fine in Internet Explorer, Firefox, and Flock.
2) I have other javascripts on the same page, and they're working fine in Safari.
3) I went back to the ReadMe file for the script, "Ultimate Fade-in slideshow", and they indicated that it should work in Safari.
Since I didn't write the script myself, I am not even going to attempt to figure out how to change it to make it work ( it's a VERY long script ).
However, I'm wondering if anyone has experienced a similar problem, namely 1) and 2) above ( not necessarily the same script, but the same type of problem ). If so, then I'll attempt to find a work-around.
If you want to see what's wrong, look at http://www.simpleislandweddings.com . In Safari, you'll notice a big empty box. But notice that the copyright date (2008) is filled in in the footer. This is entered with javascript.
prof611

http://www.simpleislandweddings.com/include/slideshow.js
Click the link and it will open (like the text file it is) and you'll see it is very old and not supported by "modern" browsers.
Check http://www.dynamicdrive.com (the authors of the code) for more answers.

How can I delete the link to part of this script?

Hi there,
Can anyone tell me how to delete the 'link to' part of this
JavaScript as I am using this slideshow from Dynamic Drive however
I don't want to be able to click on the pictures and be taken to
another website. I'm not familiar with JavaScript so any help would
be much appreciated.
Thanks!
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script type="text/javascript">
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (
http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit
http://www.dynamicdrive.com/
for this script and 100s more.
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["restaurantexterior1.jpg"]
fadeimages[1]=["restaurantinterior2.jpg"]
fadeimages[2]=["restaurantinteriorwall.jpg"]
var fadebgcolor="white"
var fadeimages2=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["restaurantinteriorframed.jpg"]
fadeimages2[1]=["restaurantsign.jpg"]
fadeimages2[2]=["tablefortwo.jpg"]
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding
clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight,
borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
//thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers
(ie: Firefox)
document.write('<div id="master'+this.slideshowid+'"
style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"> <div
id="'+this.canvasbase+'_0"
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filte r:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml- opacity:0.1;background-color:'+fadebgcolor+'"></div><div
id="'+this.canvasbase+'_1"
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filte r:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml- opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img
name="defaultslide'+this.slideshowid+'"
src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers
such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()",
this.delay)
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if
IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if
(obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")?
obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] :
document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)?
obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()",
obj.delay)
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache
object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser?
iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")?
this.canvasbase+"_1" : this.canvasbase+"_0"
else{
var
ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
this.curimageindex=(this.curimageindex<this.postimages.length-1)?
this.curimageindex+1 : 0
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] :
document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] :
document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE
ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser?
iebrowser["master"+this.slideshowid] :
document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
this.rotateimage()
</script>

Hello,
It looks like you already removed some code from the
fadeimages Array.
In the fadeimages Array, the script is looking for three
things: the image
path, the link and the target.
Since you don't want a link and don't need a target, just
insert an "empty
value" for each of these.
You only have the image path in the code, so the script fails
"when it
doesn't find the other two things it's looking for"..
Change this:
fadeimages[0]=["restaurantexterior1.jpg"]
fadeimages[1]=["restaurantinterior2.jpg"]
fadeimages[2]=["restaurantinteriorwall.jpg"]
To this:
fadeimages[0]=["restaurantexterior1.jpg", "", ""]
fadeimages[1]=["restaurantinterior2.jpg", "", ""]
fadeimages[2]=["restaurantinteriorwall.jpg", "", ""]
"" means no value, so now the script finds the image path,
then finds the
link which is empty and lastly, finds the target which is
empty.
Since it finds the three things it's looking for, it
processes.
Take care,
Tim
"Bashful Girlie" <[email protected]> wrote
in message
news:[email protected]...
> Hi there,
>
> Can anyone tell me how to delete the 'link to' part of
this JavaScript as
> I am
> using this slideshow from Dynamic Drive however I don't
want to be able to
> click on the pictures and be taken to another website.
I'm not familiar
> with
> JavaScript so any help would be much appreciated.
>
> Thanks!
>
> <script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
> <script type="text/javascript">
>
> /***********************************************
> * Ultimate Fade-In Slideshow (v1.51): © Dynamic
Drive
> (
http://www.dynamicdrive.com)
> * This notice MUST stay intact for legal use
> * Visit
http://www.dynamicdrive.com/
for this script and 100s more.
> ***********************************************/
>
> var fadeimages=new Array()
> //SET IMAGE PATHS. Extend or contract array as needed
> fadeimages[0]=["restaurantexterior1.jpg"]
> fadeimages[1]=["restaurantinterior2.jpg"]
> fadeimages[2]=["restaurantinteriorwall.jpg"]
>
> var fadebgcolor="white"
>
> var fadeimages2=new Array()
> //SET IMAGE PATHS. Extend or contract array as needed
> fadeimages2[0]=["restaurantinteriorframed.jpg"]
> fadeimages2[1]=["restaurantsign.jpg"]
> fadeimages2[2]=["tablefortwo.jpg"]
>
> var fadebgcolor="white"
>
> ////NO need to edit beyond here/////////////
>
> var fadearray=new Array() //array to cache fadeshow
instances
> var fadeclear=new Array() //array to cache corresponding
clearinterval
> pointers
>
> var dom=(document.getElementById) //modern dom browsers
> var iebrowser=document.all
>
> function fadeshow(theimages, fadewidth, fadeheight,
borderwidth, delay,
> pause,
> displayorder){
> this.pausecheck=pause
> this.mouseovercheck=0
> this.delay=delay
> this.degree=10 //initial opacity degree (10%)
> this.curimageindex=0
> this.nextimageindex=1
> fadearray[fadearray.length]=this
> this.slideshowid=fadearray.length-1
> this.canvasbase="canvas"+this.slideshowid
> this.curcanvas=this.canvasbase+"_0"
> if (typeof displayorder!="undefined")
> theimages.sort(function() {return 0.5 - Math.random();})
//thanks to Mike
> (aka
> Mwinter) :)
> this.theimages=theimages
> this.imageborder=parseInt(borderwidth)
> this.postimages=new Array() //preload images
> for (p=0;p<theimages.length;p++){
> this.postimages[p]=new Image()
> this.postimages[p].src=theimages[p][0]
> }
>
> var fadewidth=fadewidth+this.imageborder*2
> var fadeheight=fadeheight+this.imageborder*2
>
> if (iebrowser&&dom||dom) //if IE5+ or modern
browsers (ie: Firefox)
> document.write('<div id="master'+this.slideshowid+'"
>
style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:
> hidden;"><div id="'+this.canvasbase+'_0"
>
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;lef
>
t:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-
>
opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div
> id="'+this.canvasbase+'_1"
>
style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;lef
>
t:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-
>
opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
> else
> document.write('<div><img
name="defaultslide'+this.slideshowid+'"
> src="'+this.postimages[0].src+'"></div>')
>
> if (iebrowser&&dom||dom) //if IE5+ or modern
browsers such as Firefox
> this.startit()
> else{
> this.curimageindex++
>
setInterval("fadearray["+this.slideshowid+"].rotateimage()",
this.delay)
> }
> }
>
> function fadepic(obj){
> if (obj.degree<100){
> obj.degree+=10
> if
(obj.tempobj.filters&&obj.tempobj.filters[0]){
> if (typeof obj.tempobj.filters[0].opacity=="number")
//if IE6+
> obj.tempobj.filters[0].opacity=obj.degree
> else //else if IE5.5-
> obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
> }
> else if (obj.tempobj.style.MozOpacity)
> obj.tempobj.style.MozOpacity=obj.degree/101
> else if (obj.tempobj.style.KhtmlOpacity)
> obj.tempobj.style.KhtmlOpacity=obj.degree/100
> else if
(obj.tempobj.style.opacity&&!obj.tempobj.filters)
> obj.tempobj.style.opacity=obj.degree/101
> }
> else{
> clearInterval(fadeclear[obj.slideshowid])
> obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")?
obj.canvasbase+"_0" :
> obj.canvasbase+"_1"
> obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] :
> document.getElementById(obj.nextcanvas)
> obj.populateslide(obj.tempobj, obj.nextimageindex)
>
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)?
> obj.nextimageindex+1 : 0
>
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()",
obj.delay)
> }
> }
>
> }
>
>
>
>
> fadeshow.prototype.rotateimage=function(){
> if (this.pausecheck==1) //if pause onMouseover enabled,
cache object
> var cacheobj=this
> if (this.mouseovercheck==1)
> setTimeout(function(){cacheobj.rotateimage()}, 100)
> else if (iebrowser&&dom||dom){
> this.resetit()
> var crossobj=this.tempobj=iebrowser?
iebrowser[this.curcanvas] :
> document.getElementById(this.curcanvas)
> crossobj.style.zIndex++
>
>
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"]
> )",50)
> this.curcanvas=(this.curcanvas==this.canvasbase+"_0")?
> this.canvasbase+"_1" :
> this.canvasbase+"_0"
> }
> else{
> var
ns4imgobj=document.images['defaultslide'+this.slideshowid]
> ns4imgobj.src=this.postimages[this.curimageindex].src
> }
>
this.curimageindex=(this.curimageindex<this.postimages.length-1)?
> this.curimageindex+1 : 0
> }
>
> fadeshow.prototype.resetit=function(){
> this.degree=10
> var crossobj=iebrowser? iebrowser[this.curcanvas] :
> document.getElementById(this.curcanvas)
> if (crossobj.filters&&crossobj.filters[0]){
> if (typeof crossobj.filters[0].opacity=="number") //if
IE6+
> crossobj.filters(0).opacity=this.degree
> else //else if IE5.5-
> crossobj.style.filter="alpha(opacity="+this.degree+")"
> }
> else if (crossobj.style.MozOpacity)
> crossobj.style.MozOpacity=this.degree/101
> else if (crossobj.style.KhtmlOpacity)
> crossobj.style.KhtmlOpacity=this.degree/100
> else if
(crossobj.style.opacity&&!crossobj.filters)
> crossobj.style.opacity=this.degree/101
> }
>
>
> fadeshow.prototype.startit=function(){
> var crossobj=iebrowser? iebrowser[this.curcanvas] :
> document.getElementById(this.curcanvas)
> this.populateslide(crossobj, this.curimageindex)
> if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE
ONMOUSEOVER
> var cacheobj=this
> var crossobjcontainer=iebrowser?
iebrowser["master"+this.slideshowid] :
> document.getElementById("master"+this.slideshowid)
>
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
>
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
> }
> this.rotateimage()
> }
>
> </script>
>
>
>

Fade to Slideshow ?

Similar Messages

Maybe you are looking for