www.webdeveloper.com
Results 1 to 4 of 4

Thread: New to JS - images dissapeared!

  1. #1
    Join Date
    Nov 2008
    Posts
    3

    Question New to JS - images dissapeared!

    Hi,

    Is there anything wrong with the code below? I was editing it, and I added the last two images.. that made the images disappear for a test, but then it fixed itself. All was good.. Until the client requested I remove the first three images, so only splash4&5 were to show..

    So I renumbered them.. and it all disappeared. So I tried to put it back (see below) and it's still gone!

    Please help!





    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <SCRIPT LANGUAGE="JavaScript">

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    image1 = new Image();
    image1.src = "../images/splash/splash_1.jpg";

    image2 = new Image();
    image2.src = "../images/splash/splash_2.jpg";

    image3 = new Image();
    image3.src = "../images/splash/splash_3.jpg";

    image4 = new Image();
    image4.src = "../images/splash/splash_4.jpg";

    image4 = new Image();
    image4.src = "../images/splash/splash_5.jpg";


    // End -->
    </script>

    <script type="text/javascript">
    tickercontent[0]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_1.jpg" width="400" height="281" border="0"></a>'
    tickercontent[1]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_2.jpg" width="400" height="281" border="0"></a>'
    tickercontent[2]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_3.jpg" width="400" height="281" border="0"></a>'
    tickercontent[3]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_4.jpg" width="400" height="281" border="0"></a>'
    tickercontent[4]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_5.jpg" width="400" height="281" border="0"></a>'
    </script>




    <script type="text/javascript">

    /***********************************************
    * DHTML Ticker script- Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/

    function domticker(content, divId, divClass, delay, fadeornot){
    this.content=content
    this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
    this.delay=delay //Delay between msg change, in miliseconds.
    this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
    this.pointer=1
    this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filterrogidXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1" : ""
    if (this.opacitystring!="") this.delay+=500 //add 1/2 sec to account for fade effect, if enabled
    this.opacitysetting=0.2 //Opacity value when reset. Internal use.
    document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
    var instanceOfTicker=this
    setTimeout(function(){instanceOfTicker.initialize()}, delay)
    }

    domticker.prototype.initialize=function(){
    var instanceOfTicker=this
    this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
    document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
    document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
    this.rotatemsg()
    }

    domticker.prototype.rotatemsg=function(){
    var instanceOfTicker=this
    if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
    setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
    else{
    this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
    this.contentdiv.innerHTML=this.content[this.pointer]
    this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
    this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
    setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
    }
    }

    // -------------------------------------------------------------------
    // fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
    // -------------------------------------------------------------------

    domticker.prototype.fadetransition=function(fadetype, timerid){
    var contentdiv=this.contentdiv
    if (fadetype=="reset")
    this.opacitysetting=0.2
    if (contentdiv.filters && contentdiv.filters[0]){
    if (typeof contentdiv.filters[0].opacity=="number") //IE6+
    contentdiv.filters[0].opacity=this.opacitysetting*100
    else //IE 5.5
    contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
    }
    else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
    contentdiv.style.MozOpacity=this.opacitysetting
    }
    else
    this.opacitysetting=1
    if (fadetype=="up")
    this.opacitysetting+=0.2
    if (fadetype=="up" && this.opacitysetting>=1)
    clearInterval(this[timerid])
    }

    </script>

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    The JavaScript appears correct, right off hand. Are you using a correct relative path to the images? Capitalization might also make a difference if the images are being served from a server running Unix or Linux.

  3. #3
    Join Date
    Nov 2008
    Posts
    3

    Here is the whole .htm

    The paths are totally accurate.. they worked yesterday.. then I removed the first 3 images and changed ticker 0, 1 to ling to jpgs, splash 4 & 5 and then it broke down and there were no images..

    http://fxscenery.com/splash/splash.htm

    <html>
    <head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <SCRIPT LANGUAGE="JavaScript">

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    image1 = new Image();
    image1.src = "../images/splash/splash_1.jpg";

    image2 = new Image();
    image2.src = "../images/splash/splash_2.jpg";

    image3 = new Image();
    image3.src = "../images/splash/splash_3.jpg";

    image4 = new Image();
    image4.src = "../images/splash/splash_4.jpg";

    image4 = new Image();
    image4.src = "../images/splash/splash_5.jpg";


    // End -->
    </script>

    <script type="text/javascript">
    tickercontent[0]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_1.jpg" width="400" height="281" border="0"></a>'
    tickercontent[1]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_2.jpg" width="400" height="281" border="0"></a>'
    tickercontent[2]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_3.jpg" width="400" height="281" border="0"></a>'
    tickercontent[3]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_4.jpg" width="400" height="281" border="0"></a>'
    tickercontent[4]='<a href="http://www.fxscenery.com/stocksets/catalog/" target="_top"><img src="../images/splash/splash_5.jpg" width="400" height="281" border="0"></a>'
    </script>




    <script type="text/javascript">

    /***********************************************
    * DHTML Ticker script- Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/

    function domticker(content, divId, divClass, delay, fadeornot){
    this.content=content
    this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
    this.delay=delay //Delay between msg change, in miliseconds.
    this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
    this.pointer=1
    this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filterrogidXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1" : ""
    if (this.opacitystring!="") this.delay+=500 //add 1/2 sec to account for fade effect, if enabled
    this.opacitysetting=0.2 //Opacity value when reset. Internal use.
    document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
    var instanceOfTicker=this
    setTimeout(function(){instanceOfTicker.initialize()}, delay)
    }

    domticker.prototype.initialize=function(){
    var instanceOfTicker=this
    this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages
    document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
    document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
    this.rotatemsg()
    }

    domticker.prototype.rotatemsg=function(){
    var instanceOfTicker=this
    if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
    setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
    else{
    this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
    this.contentdiv.innerHTML=this.content[this.pointer]
    this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
    this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
    setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container
    }
    }

    // -------------------------------------------------------------------
    // fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
    // -------------------------------------------------------------------

    domticker.prototype.fadetransition=function(fadetype, timerid){
    var contentdiv=this.contentdiv
    if (fadetype=="reset")
    this.opacitysetting=0.2
    if (contentdiv.filters && contentdiv.filters[0]){
    if (typeof contentdiv.filters[0].opacity=="number") //IE6+
    contentdiv.filters[0].opacity=this.opacitysetting*100
    else //IE 5.5
    contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
    }
    else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
    contentdiv.style.MozOpacity=this.opacitysetting
    }
    else
    this.opacitysetting=1
    if (fadetype=="up")
    this.opacitysetting+=0.2
    if (fadetype=="up" && this.opacitysetting>=1)
    clearInterval(this[timerid])
    }

    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>FX Group</title>
    </head>

    <body background="http://images.fxgrouponline.com/global/bg_2.gif" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" RIGHTMARGIN="0">

    <script type="text/javascript">

    //new domticker(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds, optionalfadeswitch)

    new domticker(tickercontent, "domticker", "someclass", 5000)
    document.write("<br />")
    </script>
    </body>
    </html>

  4. #4
    Join Date
    Nov 2008
    Posts
    3
    I fixed it..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles