Blue buttons should turn red when mouse over

Discussion in 'JavaScript' started by Javamama, Feb 5, 2008.

  1. #1
    Hi,

    I coded a web page with two set of maps. Left and right map has their own blue/red buttons which should turn from blue to red when the mouse is over them. The left set of buttons stay blue even mouse over. What's the problem? The play function(animate) doesn't work either. Why?

    <CODE>
    <HTML>
    <META HTTP-EQUIV="Refresh" CONTENT=300>
    <HEAD><TITLE>Parallel Visual Exploring</TITLE></HEAD>



    <SCRIPT LANGUAGE="JavaScript">

    // Animator internal variables

    var oldidxLeft = -1;
    var oldidxRight = -1;
    var isanimLeft = false; // Is animation on
    var isanimRight = false;
    var timerIDLeft = null;
    var timerIDRight = null;


    // Data size

    var n;


    // Preload all images for increased interactive speed

    pretimesoffLeft = new Array();
    pretimesoffRight = new Array ();
    pretimesonLeft = new Array();
    pretimesonRight = new Array();
    preimagesLeft = new Array();
    preimagesRight = new Array();
    preplayLeft = new Array();
    preplayRight = new Array();

    function preloadLeft()
    {
    n = files.length; // Initialize variable here

    for(var i=0 ; i<n ; i++)
    {
    var tmpLeft = timesLeft;
    pretimesoffLeft = new Image();
    pretimesoffLeft.src = tbaseLeft+offcolor+tmpLeft+".png";
    pretimesonLeft = new Image();
    pretimesonLeft.src = tbaseLeft+oncolor+tmpLeft+".png";
    preimagesLeft = new Image();
    preimagesLeft.src = fbase+files;
    }
    preplayLeft[0] = new Image();
    preplayLeft[0].src = tbaseLeft+"button_play_cyan.png";
    preplayLeft[1] = new Image();
    preplayLeft[1].src = tbaseLeft+"button_stop_orange.png";
    }

    function preloadRight()
    {
    n = files.length;

    for (var i=0 ; i<n ; i++)
    {
    var tmpRight = timesRight;
    pretimesoffRight = new Image();
    pretimesoffRight.src = tbaseRight+offcolor+tmpRight+".png";
    pretimesonRight = new Image();
    pretimesonRight.src = tbaseRight+oncolor+tmpRight+".png";
    preimagesRight = new Image();
    preimagesRight.src = fbase+files;
    }
    preplayRight[0] = new Image();
    preplayRight[0].src = tbaseRight+"button_play_cyan.png";
    preplayRight[1] = new Image();
    preplayRight[1].src = tbaseRight+"button_stop_oranssi.png";
    }

    // Function to change to a new time and picture on left

    function showpngLeft(idxLeft,overLeft) {

    if(idxLeft==oldidxLeft) return;

    if(idxLeft == n)
    {
    if(!isanimLeft)
    {
    isanimLeft = true;
    timerIDLeft = setTimeout("doanimLeft()",delay);
    }
    document.images["img"+n].src = preplayLeft[1].src;
    }
    else
    {
    if(overLeft)
    {
    document.images["img"+n].src = preplayLeft[0].src;
    if(timerIDLeft) clearTimeout(timerIDLeft);
    isanimLeft = false;
    }
    if(oldidxLeft >= 0)
    document.images["img"+oldidxLeft].src = pretimesoffLeft[oldidxLeft].src;

    document.images["img"+idxLeft].src = pretimesonLeft[idxLeft].src;
    document.images["predictionLeft"].src = preimagesLeft[idxLeft].src;
    oldidxLeft = idxLeft;
    }
    }

    // Function to change to a new time and picture on right

    function showpngRight(idxRight,overRight) {

    if(idxRight==oldidxRight) return;

    if(idxRight == n)

    {
    if(!isanimRight)
    {
    isanimRight = true;
    timerIDRight = setTimeout("doanimRight()",delay);
    }
    document.images["img"+nRight].src = preplayRight[1].src;
    }
    else
    {
    if(overRight)
    {
    document.images["img"+n].src = preplayRight[0].src;
    if(timerIDRight) clearTimeout(timerIDRight);
    isanimRight= false;
    }
    if(oldidxRight >= 0)
    document.images["img"+oldidxRight].src = pretimesoffRight[oldidxRight].src;

    document.images["img"+idxRight].src = pretimesonRight[idxRight].src;
    document.images["predictionRight"].src = preimagesRight[idxRight].src;
    oldidxRight = idxRight;
    }
    }

    function doAnimLeft() {
    if(!isanimLeft) return;
    showpngLeft( (oldidxLeft+1) % n , 0 );

    if(oldidxLeft+1==n)
    timerIDLeft = setTimeout("doanimLeft()",wrapdelay);
    else
    timerIDLeft = setTimeout("doanimLeft()",delay);
    }

    function doAnimRight() {

    if (!isanimRight) return;
    showpngRight( (oldidxRight+1) % n, 0);

    if(oldidxRight+1==n)
    timerIDRight = setTimeout("doanimRight()",wrapdelay);
    else
    timerIDRight = setTimeout("doanimRight()",delay);
    }

    // Function called to setup the animation

    function restart() {
    if(timerIDLeft) clearTimeout(timerIDLeft);
    isanimLeft = false;
    showpngLeft(0,1);
    // showgif(n-1,1); // last gif
    // showgif(n,1); // nth = PLAY

    if(timerIDRight) clearTimeout(timerIDRight);
    isanimRight = false;
    showpngRight(0,1);

    }

    // Function to produce standard HTML body

    function makeAnimBodyLeft()
    {
    document.writeln('<TABLE BORDER=0 ALIGN=LEFT>');
    document.writeln('<TR><TD>');

    document.writeln('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>');
    for(i=0 ; i<n ; i++) {
    var tmpLeft = timesLeft;
    document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="showpngLeft('+i+',1)">');
    document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+i+'" SRC="'+pretimesoffLeft.src+'"></A>');
    document.writeln('</TD></TR>');
    }
    document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="javascript:showpngLeft('+n+',1)">');
    document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+n+'" SRC="'+preplayLeft[0].src+'"></A></TD></TR>');
    document.writeln('</TABLE>');

    document.writeln('</TD><TD>');

    document.writeln('<TABLE BORDER=0 ALIGN=CENTER>');
    document.writeln('<TR ALIGN=LEFT>');
    document.writeln('<TD><IMG BORDER=1 NAME="predictionLeft" SRC="'+preimagesLeft[0].src+'"></TD>');
    document.writeln('</TR>');
    document.writeln('<TR ALIGN=CENTER><TD></TD>');
    document.writeln('</TR>');
    document.writeln('</TABLE>');

    document.writeln('</TD><TD>');
    document.writeln('</TD></TR>');
    document.writeln('</TABLE>');
    }

    function makeAnimBodyRight()
    {
    // For the map on the right hand site.
    document.writeln('<TABLE BORDER=0 ALIGN=LEFT>');
    document.writeln('<TR><TD>');

    document.writeln('<TABLE BORDER=0 ALIGN=LEFT CELLPADDING=0 CELLSPACING=0>');
    for(i=0 ; i<n ; i++) {
    var tmpRight = timesRight;
    document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="showpngRight('+i+',1)">');
    document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+i+'" SRC="'+pretimesoffRight.src+'"></A>');
    document.writeln('</TD></TR>');
    }
    document.writeln('<TR><TD><A HREF="javascript:void(0)" onMouseOver="javascript:showpngRight('+n+',1)">');
    document.writeln('<IMG ALIGN=MIDDLE HSPACE=0 VSPACE=0 NAME="img'+n+'" SRC="'+preplayRight[0].src+'"></A></TD></TR>');
    document.writeln('</TABLE>');

    document.writeln('</TD><TD>');

    document.writeln('<TABLE BORDER=0 ALIGN=CENTER>');
    document.writeln('<TR ALIGN=LEFT>');
    document.writeln('<TD><IMG BORDER=1 NAME="predictionRight" SRC="'+preimagesRight[0].src+'"></TD>');
    document.writeln('</TR>');
    document.writeln('<TR ALIGN=CENTER><TD></TD>');
    document.writeln('</TR>');
    document.writeln('</TABLE>');

    document.writeln('</TD><TD>');


    // map legend
    document.writeln('<TABLE BORDER=0 ALIGN=CENTER>');
    document.writeln('<TR ALIGN=LEFT>');
    document.writeln('<TD><IMG BORDER=0 SRC="Legend.png" width="349" height="420"></TD>');
    document.writeln('</TR>');
    document.writeln('<TR ALIGN=CENTER><TD></TD>');
    document.writeln('</TR>');
    document.writeln('</TABLE>');

    document.writeln('</TD></TR>');
    document.writeln('</TABLE>');
    }

    // Animation settings

    var delay = 2000; //Animation speed
    var wrapdelay = 4000;// Wrap-around delay

    var tbaseLeft = "./Nappulat/"; // Base name for time steps
    var tbaseRight = "./Namiskat/"; // Base name for time steps
    var fbase = "./"; // Base name for map files
    var oncolor = "red";
    var offcolor = "blue";


    var files = new Array(
    "aniframe_0015_1.jpg", "aniframe_0014_2.jpg",
    "aniframe_0013_3.jpg", "aniframe_0012_4.jpg",
    "aniframe_0011_5.jpg", "aniframe_0010_6.jpg",
    "aniframe_0009_7.jpg", "aniframe_0008_8.jpg",
    "aniframe_0007_9.jpg", "aniframe_0006_10.jpg",
    "aniframe_0005_11.jpg", "aniframe_0004_12.jpg",
    "aniframe_0003_13.jpg", "aniframe_0002_14.jpg",
    "aniframe_0001_15.jpg", "aniframe_0000_16.jpg");

    var timesLeft = new Array("+1stSummer","+1stSummer","+Winter","+2ndSummer","+Winter","+3rdSummer","+Winter","+4thSummer","+Winter","+5thSummer",
    "+Winter","+6thSummer","+Winter","+7thSummer","+Winter","+8thSummer");

    var timesRight = new Array("+1stSummer","+1stSummer","+Winter","+2ndSummer","+Winter","+3rdSummer","+Winter","+4thSummer","+Winter","+5thSummer",
    "+Winter","+6thSummer","+Winter","+7thSummer","+Winter","+8thSummer");

    preloadLeft(); // Must be after the SSI
    preloadRight();

    </SCRIPT>

    </HEAD>

    <BODY BGCOLOR=white onLoad="restart()">
    <CENTER>
    <H2><FONT COLOR=black>Compare Occurrence Probabilities of Colorado Beetle</FONT></H2>


    <!-- A HREF="_EuropeCD.html"><FONT COLOR="blue">Tulostussivu Z EuropeCD</FONT></A -->
    </CENTER>
    <BODY LINK=white VLINK=white ALINK=white>

    <SCRIPT LANGUAGE="JavaScript"><!--
    makeAnimBodyLeft();
    makeAnimBodyRight();
    // -->
    </SCRIPT>



    <NOSCRIPT>
    Sivu vaatii v&auml;hint&auml;&auml;n Netscape 4.0 tai Internet Explorer 4.0
    selaimen, ja ett&auml; JavaScript on p&auml;&auml;ll&auml;.
    </NOSCRIPT>

    </BODY>

    </HTML>
    </CODE>
     
    Javamama, Feb 5, 2008 IP
  2. Javamama

    Javamama Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    So sorry for double posting :(
    Have mercy with a noob like me.
     
    Javamama, Feb 5, 2008 IP