JavaScript - Adding A Third Color Scheme. Syntax In Question.
My site will change color schemes when a user presses the button in the top left. I want to add a third theme though. I can't figure it out though.
My html as relevent Code: <!--EXTERNAL FILES--> <link rel="stylesheet" type="text/css" href="main.css" /> <!--[if IE]><link rel="stylesheet" type="text/css" href="mainIE.css" /><![endif]--> <link id="altstyle" rel="stylesheet" type="text/css" href="main.css" /> <script type="text/javascript" src="main.js"></script> <!--STOP EXTERNAL FILES--> <title>Votillity.com</title> <!--CSS INTERNAL--> <!--CSS INTERNAL--> <!--JAVASCRIPT INTERNAL--> <!--JAVASCRIPT INTERNAL--> </head> <body onload="startTime()"> <img class="Zindexsty1" style="position: fixed; top: 0px; left: 0px;" src="http://votillity.com/VotillityLogo1.png" alt="VOTILLITY" /> <img class="Zindexsty2" style="position: fixed; top: 0px; left: 0px;" src="http://votillity.com/VotillityLogo2.png" alt="VOTILLITY" /> <button id="altstyact" class="button" style="position: fixed; top: 0px; left: 170px; width: 60px;">Theme</button> Javascript Code: //ALTERNATE STYLES function changeStyle() { var obj1=document.getElementById('altstyact'); var obj2=document.getElementById('altstyle') test=true; obj1.onclick=function() { test==true? (obj2.href='main2.css',obj1.firstChild.nodeValue='Classic',test=false): (obj2.href='main.css',obj1.firstChild.nodeValue='Ice',test=true) } } if(window.addEventListener) { window.addEventListener('load',changeStyle,false); } else { if(window.attachEvent) { window.attachEvent('onload',changeStyle); } } //STOP ALTERNATE STYLES I don't think you need the css's. If, however, I'm wrong just let me know. Keep in mind that the javascript is external. Here's my site if you need a better look Votillity Thank you Similar TutorialsI am trying to display code on a web page in a readable and formatted fashion with color highlighting idealy. I am assuming that something of this nature would have to be done with javascript to calculate the css styling based on the keywords. Been trying to find something on this for a while but cant find anything Any suggestions would be appreciated Hi Im taking a course in web design and am working on a basic javascript page. I have a drop down box where you select a item and it opens a new window. How would I get the back ground color to be the same as the web page color (lightblue), what code would I use and where in my code would I put it? [CODE] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>MEG</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var content; var oneWindow; var fullWindow; var oneWindowStatus = false; var fullWindowStatus = false; function closeAllWindows() { if((oneWindowStatus) && (!oneWindow.closed)) oneWindow.close(); if((fullWindowStatus) && (!fullWindow.closed)) fullWindow.close(); oneWindowStatus = false; fullWindowStatus = false; } function productObject(name,description,use,image) { this.name = name; this.description = description; this.use = use; this.image = image; this.displayOne = displayOne; } //Add products here var products = new Array(); products[0] = new productObject("Ears", "Fluffy, pointy, big", "For hearing other dogs near by, for listening to my owner but ignoring her", "images/ears.jpg"); products[1] = new productObject("Eyes", "Shiny, brown, pretty", "To see dogs to bark at, to see when treats are available", "images/eyes.jpg"); products[2] = new productObject("Nose", "Black, wet", "For sniffing out food and squirrels", "images/nose.jpg"); products[3] = new productObject("Mouth", "BIG", "For barking loudly with", "images/mouth.jpg"); products[4] = new productObject("Tongue", "Pink, wet", "To lick you with when you really dont want her to", "images/tongue.jpg"); products[5] = new productObject("Legs", "Short, fluffy", "To run as fast as possible with after squirrels", "images/legs.jpg"); products[6] = new productObject("Paws", "Small", "To raise when I want treats/food of any sort", "images/paws.jpg"); var len = products.length; function displayOne() { content=""; content+="<HTML><HEAD><TITLE>" + this.name + "</TITLE></HEAD>"; content+="<BODY><DIV ALIGN='center'>"; content+="<TABLE WIDTH='90%'><TR><TD COLSPAN='3' ALIGN='center'>"; content+="<H3>Name: " + this.name.bold() + "</H3><HR>"; content+="<TR><TD><B>Name:</B> " + this.name; content+="<TR><TD><B>Description:</B> " + this.description; content+="<TR><TD><B>Use:</B> " + this.use; content+="<TR><TD><IMG SRC= '" + this.image + "' HEIGHT='100' WIDTH='100'>"; content+="</TABLE><FORM>"; content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>"; content+="</FORM></DIV></BODY></HTML>"; oneWindow = open("","OneWindow","width=500,height=400"); newWindow(oneWindow); oneWindowStatus = true; } function showAll() { content=""; content+="<HTML><HEAD><TITLE>All that is Meg</TITLE></HEAD>"; content+="<BODY><DIV ALIGN=center>"; content+="<TABLE WIDTH='90%' BORDER CELLPADDING='2'>"; content+="<TR><TH COLSPAN='2' ALIGN='center'>"; content+="All that is Meg"; content+="<TR><TH>Name<TH>Image"; for (var i = 0; i < len; i++) { content+="<TR><TD>"; content+="<A HREF='javascript:void(window.opener.products[" + i + "].displayOne());'>"; content+=products[i].name + "</A>"; content+="<TD>" + products[i].description; } content+="</TABLE><FORM>"; content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>"; content+="</FORM></DIV></BODY></HTML>"; fullWindow = open("","AllWindow","width=500,height=400,resizable=1"); newWindow(fullWindow); fullWindowStatus = true; } function newWindow(x) { x.document.close(); x.document.open(); x.document.write(content); x.document.close(); x.moveTo(20,20); x.focus(); } //--> </SCRIPT> </SELECT> </HEAD> <BODY onFocus="closeAllwindows();" bgcolor="lightblue"> <DIV ALIGN="center"> <H2>Meg</H2> <HR> <FORM NAME="prodForm"> <TABLE WIDTH="100%"> <TR> <TD WIDTH="50%" ALIGN="right"> <SELECT NAME="itemName"> <SCRIPT LANGUAGE="JavaScript"> <!-- for (var i = 0; i < len; i++) { document.write("<OPTION>" + products[i].name); } //--> </SCRIPT> </SELECT> <TD> <INPUT TYPE="button" VALUE="Get Info" onClick=" var i = document.prodForm.itemName.selectedIndex; products[i].displayOne();"> <TR><TD ALIGN="right"> <TR><TD colspan="2" ALIGN="center"> <TR><TD colspan="2" ALIGN="center"> <INPUT TYPE="button" VALUE="Show All Products" onClick="showAll();"> </TABLE> </FORM> <img src="images/meg1.jpg" "alt="Meg" border="2"/> </DIV> </BODY> </HTML> [CODE] Thanks and hope someone can help Claire Hi all, I have a div element (i.e. <div id="main">) that contains a number of links, each with white background colors and its top and left style properties set to different values. I need to do several things with the anchors when they are clicked: When a white anchor is clicked, its background color is turned yellow and its coordinates (top and left style property values) are added to an array. The coordinates for a single anchor is to be separated by a hyphen; coordinates for multiple anchors are to be separated by a comma (eg. "0-9,0-18") When a yellow anchor is clicked, its background color is turned white and its coordinates are removed from the array. The values in the array are to be the value for a hidden input element, all separated by commas. I'm a Javascript novice and don't know where to begin. Can someone help me with this? Thanks in advance, Dude-Dastic When using anonymous wrappers (I guess they are called like that), what does "()" part do at the end of the stack? An example: Code: ( function() {} ) () //Here! What does it do and how can we use it? I have an alert I'm using over in Salesforce to remind sales reps to use a special terms document when quoting. Problem is, the alert is going off for ALL accounts, not just "Account1" and "Account2". Is this line incorrect in syntax or something? if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2")) Thanks all. This forum has been very helpful for me in the past so this was my first stop! Jeremy Code: <html> <head> <script type="text/javascript" language="javascript" src="/js/functions.js"></script> <script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script> <script type="text/javascript"> function throwalert() { var isstatus = "{!Opportunity.StageName}"; var acct = "{!Opportunity.Account}" var msgg = "Please remember to use a special terms and conditions quote template when quoting this opportunity."; if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2")) { alert(msgg); } else { window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};" } } </script> </head> <body onload="throwalert()";> </body> </html> I am studying the javascript. I got following codes from json2.js but do not understand syntax of them. if (!this.JSON) { this.JSON = {}; } (function () { ... }()); For 2nd part, why there is () outsider function? and why these is () after function? Thanks a lot. The following code snippet: (this.inputArray is already defined and initialized prior to this code sequence) if(this.inputArray.length >= 0) { this.inputArray[this.inputArray.length] = new Object(); this.inputArray[this.inputArray.length].type = 'pcDisp'; this.inputArray[this.inputArray.length].data = a; } the first line in the code block should create a new array item and initialize it with the various assigments in the next lines. But Firefox complains "this.inputArray[this.inputArray.length] is not defined". This is very disconcerting because the code has to create array items with different data based on conditionals. So I must be able to automatically create new items as necessary. I thought that javascript had 'late binding', but maybe that doesn't apply here. So, does anyone have a clue for me? I have a simple issue that I cannot fix. The code bellow, is a while-loop with RGB color. It displays the word Hello 10 times id 10 different colors. The problem is I cannot get the correct colors displayed. I want the first Hello to be red and end up green in the last one. For some reason I cannot get the color combination correct, even after I put 255 for red and 192 for green. Can you please have a look and tell me what am I doing wrong? Thanks in advance 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>Project 4 - Exercise 10</title> </head> <body> <script language="JavaScript"> var r = 254; var g = 254; var b = 125; for (i=1; i <= 10; i++) { document.write ("<font size=7 color = rgb(" + i + "," + g + ", "+b+")> Hello <br>"); } </script> </body> </html> Is it possible to give an anchor tag an id and call it with GetElement? this is what I have tried: Code: <a id="link1" href="test.html">Part 1</a></li> Code: document.getElementById("link1").style.color = "blue"; This is my CSS: Code: A:link { color:#ffffff; font-size:14pt; font-weight:bold;} A:visited { color:#ffff00; font-size:14pt; font-weight:bold;} A:hover { color:#6698ff; font-size:14pt; font-weight:bold;} A:active { color:#c0c0c0; font-size:14pt; font-weight:bold;} Easier to show than to explain: Code: <head> <SCRIPT LANGUAGE="JavaScript"> function checkAll(field) { for (i = 0; i < field.length; i++) field[i].checked = true ; } function uncheckAll(field) { for (i = 0; i < field.length; i++) field[i].checked = false ; } </script> </head> <body> <form name="myform"> <table> <tr id="CA" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="document.getElementById('CA').style.backgroundColor=this.checked?'white':'cyan';">Choice CA</td> </tr> <tr id="CB" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="document.getElementById('CB').style.backgroundColor=this.checked?'white':'cyan';">Choice CB</td> </tr> <tr id="CC" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="document.getElementById('CC').style.backgroundColor=this.checked?'white':'cyan';">Choice CB</td> </tr> </table> <input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.myform.list)"> <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.myform.list)"> </form> <p>All never touched should be yellow. All checked should have white background. All unchecked should have cyan background.</p> <p>How do I get 'Check All' and 'Uncheck All' to obey the tr background color, too?</p> Hello, In the below script syntax, a simple table converts Celsius degrees into Fahrenheit, using the For loop and integrating it into a table. Code: <html> <head> <title>Celsius-Fahrenheit Converter</title> </head> <body> <table border=3> <tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr> <script language="javascript"> for (celsius=0; celsius<=50; celsius=celsius+1) { document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32)+"</td></tr>"); } </script> </table> </body> </html> My questions are about the following script inside the <td> tags: <td>"+celsius+"</td> <td>"+((celsius*9/5)+32)+"</td> 1) why is the script inside the above <td> tags placed between " " ? 2) why is the script inside the above <td> tags placed between + + ? Thanks a lot for your explanation to an absolute Javascript beginner...! I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code: <ul> <li><a href="1.php">Things</a></li> <li><a href="2.php">Animals</a> <ul> <li><a href="2-1.php">Cani</a> <ul> <li><a href="2-1-1.php">Domestic dogs</a></li> <li><a href="2-1-2.php">Wolves</a></li> </ul> </li> <li><a href="2-2.php">Felidae</a> <ul> <li><a href="2-2-1.php">Domestic cats</a></li> <li><a href="2-2-2.php">Wild cats</a></li> </ul> </li> </ul> </li> <li><a href="3.php">Humans</a></li> </ul> the css is as follows: Code: div#s1 { width: 200px; /* menu width */ } div#s1 ul { background-color: #036; list-style-type: none; /* get rid of the bullets */ padding:0; /* no padding */ margin:0; /* no margin for IE either */ } div#s1 ul li { margin: 0; padding: 0; background-color: #036; display:block; border-top: 1px solid white; /* lines */ } div#s1 ul li a { display: block; /* lines extend to right, make area clickable */ color: white; background-color: #036; padding: 3px 3px 3px 23px; margin:0; text-decoration: none; height:15px; /* hint for IE, alternatively remove whitespace from HTML */ } div#s1 ul ul li a { margin-left: 20px; /* indent level 1 */ } div#s1 ul ul ul li a { margin-left: 40px; /* indent level 2 */ } div#s1 ul ul ul ul li a { margin-left: 60px; /* indent level 3 */ } div#s1 li ul, div#s1 li.open li.closed ul { display: none; /* collapse */ } div#s1 li.open ul { display: block; /* expand */ } div#s1 ul li.open a { background-image: url(bullet_open.gif); background-repeat: no-repeat; } div#s1 ul li.closed a { background-image: url(bullet_closed.gif); background-repeat: no-repeat; } div#s1 ul li.leaf a { background-image: url(bullet_leaf.gif); background-repeat: no-repeat; } div#s1 li.active a { background-position: 0px -20px; color: red; /* highlight text */ } div#s1 li.active li a { background-position: 0px 0px; color: white; /* fix lower levels */ } div#s1 ul li a:hover { color: red; background-color: #06C; /* rollover effect */ } and finally the javascript: Code: var menu_active_class = "active"; var menu_leaf_class = "leaf"; var menu_open_class = "open"; var menu_closed_class = "closed"; //the default page that is displayed if URL ends in / var menu_default_page = "index.php"; var menu_url; //main function //menu_id : id of the element containing the navigation function menu_main(menu_id) { var url = location.href; if (url.lastIndexOf("/") == (url.length-1)) { url = url+menu_default_page; } if (url.lastIndexOf("?") >= 0) { url = url.substring(0, url.lastIndexOf("?")); } if (url.lastIndexOf("#") >= 0) { url = url.substring(0, url.lastIndexOf("#")); } menu_url = url; var main = document.getElementById(menu_id); if (!main) alert("No element with id '"+ menu_id +"' found"); menu_traverse(main); } /* Walks down the subtree and on the way back sets properties. returns bit set 1: set = element is a node, unset = element is a leaf 2: set = element contains the active node 4: set = element is the active A node */ function menu_traverse(element) { var props = 0; // walk down for (var i=0; i<element.childNodes.length; i++) { var child = element.childNodes[i]; props |= menu_traverse(child); // aggregate bits } // on the way back now switch (element.tagName) { case "UL": props |= 1; break; case "LI": var c1 = (props & 1) ? ((props & (2|4)) ? menu_open_class : menu_closed_class) : menu_leaf_class; element.className = element.className ? element.className+" "+c1 : c1; if (props & 4) { if (!(props & 2)) element.className += " "+menu_active_class; props |= 2; props &= 1 | 2; // reset bit 4 } break; case "A": if (props & 2) break; // once is enough var href = element.getAttribute("href"); if (menu_isSameUrl(menu_url, href)) props |= 4; break; } return props; } //matches two URIs when href is the last part of url //.. and . are correctly resolved function menu_isSameUrl(url, href) { var a = url.split(/[?\/]/i); var b = href.split(/[?\/]/i); var i = a.length - 1; var j = b.length - 1; while ((i >= 0) && (j >= 0)) { if (b[j] == "..") { j-=2; continue; } if (a[i] == "..") { i-=2; continue; } if ((b[j] == ".") || (b[j] == "")) { j--; continue; } if ((a[i] == ".") || (a[i] == "")) { i--; continue; } if (! (a[i] == b[j])) return false; i--; j--; } return true; } New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper Hey. so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that. Here is what I have so far: Code: function add_new_proj(){ new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx"); var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table //the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system) var projectID=table.insertCell(0); var ProjectName=table.insertCell(1); var Client=table.insertCell(2); var ClientProjectID=table.insertCell(3); var delete_cell=table.insertCell(4); projectID.innerHTML = new_proj_id; ProjectName.innerHTML =""; Client.innerHTML = ""; ClientProjectID.innerHTML = ""; delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>"; } this is an example of what the cells look like (the ones that already exist, generated via PHP code): PHP Code: echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event. any help would be great! thanks Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title> <script language=javascript> colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"]; cRGB = []; function toRGB(color){ var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")"; return rgb; } for(var i=0; i<colors.length; i++){ cRGB[i] = toRGB(colors[i]); } function changeColor(target){ var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor; var set = false; var xx; for(var i=0; i<cRGB.length; i++){ if(swapper == cRGB[i]){ if(((i+1)) >= cRGB.length){ xx = 0; }else{ xx = i+1; } document.getElementById(target).style.backgroundColor = colors[xx]; document.getElementById(target).style.backgroundImage.show; set = true; i=cRGB.length; } } set ? null : document.getElementById(target).style.backgroundColor = colors[1]; } </SCRIPT> </head> <body bgcolor="#333333"> <div> <div id="a1" onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div> <div id=a2 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div> <div id=a3 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div> </body> </html> Demo: http://theclutch.com/rollover_color_..._bgndimage.htm Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id) { var txtObj = document.all(id); if (txtObj.style.display == 'none') { txtObj.style.display = '' txtObj.style.backgroundColor = 'grey'; } } function hideLayer793BKColor(id) { var txtObj = document.all(id); if ( txtObj.style.backgroundColor == 'grey' ) txtObj.style.display = 'none'; } These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst I'm a PHP guy and haven't used jQuery much. I have a script I found in a book and I am trying to get working and am having trouble. It's a drop down list. I am using it in place of an HTML select box, so I want to pass the value selected from the list along with the form in a hidden field. My question is how do I extract the value out of the JS function and get it into the hidden field? Code: $(document).ready(function() { createDropDown(); $(".dropdown dt a").click(function(event) { event.preventDefault(); var dropID = $(this).closest("dl").attr("id"); $("#" + dropID).find("ul").toggle(); }); $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); $(".dropdown dd ul a").click(function() { var dl = $(this).closest("dl"); var dropID = dl.attr("id"); var text = $(this).html(); var source = dl.prev(); $("#" + dropID + " dt a").html(text); $("#" + dropID + " dd ul").hide(); source.val($(this).find("span.value").html()) }); }); function createDropDown() { var selects = $("select.dropdown_value"); var idCounter = 1; selects.each(function() { var dropID = "dropdown_" + idCounter; var source = $(this); var selected = source.find("option[selected]"); var options = $("option", source); source.after('<dl id="' + dropID + '" class="dropdown"></dl>'); $("#" + dropID).append('<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>'); $("#" + dropID).append('<dd><ul></ul></dd>'); options.each(function() { $("#" + dropID + " dd ul").append('<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>'); }); idCounter++; }); } I have a webpage that has "classes" that are dynamically populated. if a class is empty, or not populated, can I use JavaScript to hide the "class"? If so How? Sorry for such a noob question. Thanks in advance for any help Hi all, I have some card/images and would like to have the first one displayed.Which i can do. Then when I mouse click on the card/image it goes to another image for say 2 secs, then with out clicking goes back to the orignal card. I have played with the syntax for ages and also looked on the net and cannot get it right. This is what I have so far. Code: <html> <head> <script> var back = new Image(); back.src = "back.gif";// preloads the image. var ace = new Image(); ace.src = "0.gif"; //Preload the Image var two = new Image(); two.src = "1.gif";// preloads the image. var three = new Image(); three.src = "2.gif";// preloads the image. var four = new Image(); four.src = "3.gif";// preloads the image. var five = new Image(); five.src = "4.gif";// preloads the image. </script> </head> <body> <img name="img0"> <img name="img1"> // what is this for? <script> document.images['img0'].src = back.src;//displays image /*How do I have one card diplayed then mouseclick on that one card and another card will display for 2 secs then the card will go back to original card. */ </script> </body> </html> Any ideas ? Thanks heaps Shayne |