JavaScript - Causing Text To Change Color On Mouseover
Hi,
I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way. Thanks! Code: //convert RGB values to hexidecimal function RGBtoHex(color) { var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color); var R = parseInt(digits[2]); var G = parseInt(digits[3]); var B = parseInt(digits[4]); Hex = new Array(R, G, B); return Hex; } // Start the text fading function FadeStart(id, FadeTo) { Element = document.getElementById(id); OriginalColor = getComputedStyle(Element, null).color; Start = RGBtoHex(FadeTo); rgb = RGBtoHex(OriginalColor); red = (Start[0] - rgb[0])/16; green = (Start[1] - rgb[1])/16; blue = (Start[2] - rgb[2])/16; BeginFading = true; Fade(); } //Actually do the fading function Fade() { var Complete = (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]); if (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]) { rgb[0] += red; rgb[1] += green; rgb[2] += blue; var ChangeColor = "rgb(" + Math.round(rgb[0]) + ", " + Math.round(rgb[1]) + ", " + Math.round(rgb[2]) + ")"; Element.style.color = ChangeColor; time = setTimeout("Fade()", 500); } } //Return text to original color function FadeStop() { BeginFading = false; clearTimeout(time); if (Element != null) Element.style.color = OriginalColor; } Similar TutorialsHi! 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, Am trying to change both, the background color and the mouse pointer to hand on the mouseover event. Am using this to change the background color: Code: onMouseover="this.bgColor='#55FF55'"onMouseout="this.bgColor='#AEFFAE'" How and i add the "change pointer to hand" on this as well? Thanks Im new to this forum and was wondering if anyone would mind helping me out. Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english. heres the code <code> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .hide { display:none; } .show { display:inline; } </style> <script type="text/javascript"> if(window.addEventListener){ window.addEventListener('load',showlinks,false); } else { if(window.attachEvent){ window.attachEvent('onload',showlinks); } } function showlinks() { lis=document.getElementById('nav').getElementsByTagName('li'); for(c=0;c<lis.length;c++){ lis[c].onmouseover=function() { this.getElementsByTagName('span')[0].className='hide'; this.getElementsByTagName('span')[1].className='show'; } lis[c].onmouseout=function() { this.getElementsByTagName('span')[0].className='show'; this.getElementsByTagName('span')[1].className='hide'; } } } </script> </head> <body> <ul id="nav"> <li> <span>[Closed]</span> <span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.google.com/">google.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://w3c.org/">w3c.org</a></span> </li> </ul> </body> </html> </code> As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages. Hello, I'm trying to put a site together and this time I'm going for an interactive feel. Code: <p id="status">[Closed]</p> Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into Code: <a href="index.php">Open</a> but I can't get this figured. Could someone help me? Thnx! I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find (so please forgive me if this has been posted somewhere else...) I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page. I REALLY hope that made sense. Someone please help me! here is my problem i need to set the color of a text here is what i need to change Code: <div style="position:absolute; left:10px; top:100px; width:250px; text-align:center;"> <font color="lightgreen" size="6"><b>* Mileage *</b></font><b> <font color="black" size="6"><div id="bullet4">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Gearbox *</b></font><b> <font color="black" size="6"><div id="bullet5">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Engine size *</b></font><b> <font color="black" size="6"><div id="bullet6">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Body style *</b></font><b> <font color="black" size="6"><div id="bullet7">Not Specified</div></font><br></b> </div> now i need to set the color from a text file server side so far i can set the contents of the div serverside but the customer needs to be able to change the color of the innerhtml . now i would like to store the color in a text file color.txt i can make the code to change the txt file myself inside the color.txt would be "lightgreen" or other color how would i go about this. so in basic terms i need to set the color of the text from a color.txt file sat next to the index.html Hi guys, Am creating a web page in which a user searches a customer using customer id. The results are then displayed in a table. This is working fine. In addition to this, I have created another form in which a user enters a value in a textbox. This value is then compared to the results obtained in the previous table.The values below should be shown in green and those above in red (identical values may be shown in amber). This should be acomplished using javascript. My code is as shown below: PHP 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>Search Script</title> <script type="text/javascript"> function hallo(){ var value1=200 var inputVal = window.document.getElementById("one").value; //alert(negNum); if(inputVal > value1){ window.document.getElementById("color").style.color="red"; } else if(inputVal < value1) { window.document.getElementById("color").style.color="green"; } else if(inputVal == value1) { window.document.getElementById("color").style.color="#FF7E00"; } } </script> </head> <body> <form> Value1: <input type="text" name="one" id="one" ><br/> Value2: <input type="text" name="two" id="two" value="" onClick="hallo();"> <br/> Value3: <input type="text" name="three" id="$cell" value="test data"> </form> <?Php require_once("database.php"); $CustID=$_POST['CustomerID']; $query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID AND c.CustomerID='".$CustID."'"; $result=mysql_query($query) ; //If no matching records are found in the database,the code below will display a customized error message $num=mysql_numrows($result)or die("No Matching Records Found In The Database!"); $fields_num = mysql_num_fields($result); echo "<h3>Historical Meter Readings</h3>"; echo "<table border='0'cellspacing='5' cellpadding='5' id ='three'><tr>"; // printing table headers for($i=0; $i<$fields_num; $i++) { $field = mysql_fetch_field($result); echo "<td >{$field->name}</td>"; } echo "</tr>\n"; // printing table rows while($row = mysql_fetch_row($result)) { echo "<tr id='color'>"; // $row is array... foreach( .. ) puts every element // of $row to $cell variable foreach($row as $cell) echo "<td align='center' <font face='Arial, Helvetica, sans-serif' >$cell</td>"; echo "</tr >\n"; } mysql_free_result($result); ?> </body> </html> Currently my javascript code changes the entire row in the table, which is not I desired. How do I edit this script so that only values in particular CELL in a row e.g CELL 5, is changed and not the entire row? Thank you. Hi, I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than. Below is my javascript code: Code: <script type="text/javascript"> function hallo(){ var value1=200 var inputVal = window.document.getElementById("one").value; //alert(negNum); if(inputVal > value1){ window.document.getElementById("color").style.color="red"; } else if(inputVal < value1) { window.document.getElementById("color").style.color="green"; } else if(inputVal == value1) { window.document.getElementById("color").style.color="#FF7E00"; } } </script> And below is my php script that displays the data in a web table. Code: <body> <form> Value1: <input type="text" name="one" id="one" ><br/> Value2: <input type="text" name="two" id="two" value="" onClick="hallo();"> <br/> Value3: <input type="text" name="three" id="$cell" value="test data"> </form> <?php require_once("database.php"); $CustID=$_POST['CustomerID']; $query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID AND c.CustomerID='".$CustID."'"; $result=mysql_query($query); $num=mysql_numrows($result); mysql_close(); ?> <table border="0" cellspacing="2" cellpadding="2"> <tr> <th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th> <th><font face="Arial, Helvetica, sans-serif">Title</font></th> <th><font face="Arial, Helvetica, sans-serif">First_Name</font></th> <th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th> <th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th> <th><font face="Arial, Helvetica, sans-serif">January</font></th> <th><font face="Arial, Helvetica, sans-serif">February</font></th> <th><font face="Arial, Helvetica, sans-serif">March</font></th> <th><font face="Arial, Helvetica, sans-serif">April</font></th> <th><font face="Arial, Helvetica, sans-serif">May</font></th> <th><font face="Arial, Helvetica, sans-serif">June</font></th> </tr> <?php $i=0; while ($i < $num) { $f1=mysql_result($result,$i,"CustomerID"); $f2=mysql_result($result,$i,"Title"); $f3=mysql_result($result,$i,"First_Name"); $f4=mysql_result($result,$i,"Last_Name"); $f5=mysql_result($result,$i,"Meter_No"); $f6=mysql_result($result,$i,"January"); $f7=mysql_result($result,$i,"February"); $f8=mysql_result($result,$i,"March"); $f9=mysql_result($result,$i,"April"); $f10=mysql_result($result,$i,"May"); $f11=mysql_result($result,$i,"June"); ?> <tr> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td> </tr> <?php $i++; } ?> </body> As you can see from my javascript, i am getting the elements by id (getElementById("color")). Currently, only the first <td> with id='color' is changing when the value is entered. How do I make the text in other table cells with id='color' change color when the comparison value is entered? I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!
I'm not completely sure this is javascript, but is there a way of changing the z-index of my flash object when hovering over it? Here is a link to my page: http://aspspider.org/Samii/HireCar.aspx As you can see, you cannot click on the link in the main content area because the menu is on a higher z-index than the content. I need a way for the content to be on a higher z-index than the menu until the menu is hovered over, in which case the z-index of the menu will be higher. I hope this makes sense. Please help, this is driving me insane! Samii x Hello I'm a beginner when it comes to javascript. I found a nice script that did what I wanted, which was have 3 "buttons" that on hover change a different image to the side of them. However, I also would like the button that if clicked to go to a section of the website - so an internal link. I was slightly confused when reading that to have a link in javascript isn't good practice. How could I achieve this? I would really appreciate any help, thank you below is the code Code: <script language="JavaScript" type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body bgcolor="FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('information-white-alt.png','training-quote.png','training-white-alt.png','consultancy-quote.png','information-white-alt.png','information-quote.png')"> <table width="350" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="javascript:;" onMouseOver="MM_swapImage('b1up','','information-white-alt.png','biganchor','','information-quote.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b1up" width="270" height="74" border="0" id="b1up"></a></td> <td rowspan="3"><div align="center"><img src="home-statement.png" name="biganchor" width="500" height="222" id="biganchor"></div></td> </tr> <tr> <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','training-quote.png','b2up','','training-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="training-white.png" name="b2up" width="270" height="74" border="0" id="b2up"></a></td> </tr> <tr> <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','consultancy-quote.png','b3up','','information-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b3up" width="270" height="74" border="0" id="b3up"></a></td> </tr> </table> I'm in the middle of teaching myself PHP and SQL so I'm only at the paste-and-tweak level with Javascript. Bear with my newbie-ness. I've seen a few solutions for creating a form dropdown menu that changes a nearby image based on what is selected. I want exactly that, but is it possible to have the images also appear on mouseover? I found a menu solution using CSS, but when I applied it to a form, it didn't work. Can anyone put me in the right direction on how to do that? I've started with this code, but need to tweak it to do this if possible: Code: <html> <body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)"> <option selected value="What is JavaScript?">What is JavaScript?</option> <option value="Why learn JavaScript?">Why learn JavaScript?</option> <option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option> <option value="What is DHTML?">What is DHTML?</option> </select><br> </td> </tr> <tr> <td width="100%"><div id="output"></div><br> <font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font> </td> </tr> </table> </form> </td> </tr> </table> <p> <script language="JavaScript"> /* Drop down messages script By JavaScript Kit (http://javascriptkit.com) Over 400+ free scripts here! */ //change contents of message box, where the first one corresponds with the first drop down box, second with second box etc var thecontents=new Array() thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects,<br> <img src="http://www.google.com.au/intl/en_au/images/logo.gif"></img>' thecontents[1]='The first word that comes to mind is: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, etc etc 1' thecontents[2]='Java is completely different from JavaScript-It\'s a lot more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, etc. etc. 2' thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable etc. etc 3' //don't edit pass this line function changecontent(which){ document.getElementById('output').innerHTML=thecontents[which.selectedIndex] } document.getElementById('output').innerHTML=thecontents[document.ddmessage.selectbox.selectedIndex] </script> </body> </html> Hi this is my first thread here and I am a beginner programmer Java/HTML/CSS only. I used google to add an interactive feature to my website that some people may be familiar with. I wanted to make an image that changes into another image when you mouse over it. Maybe there is a problem with how I integrated it into the rest of my webpage code. I am using angelfire to build my website and am a little disappointed that they don't have their own forum but this one looks really good. Following is my code that can be examined and possibly corrected. Code: <html> <head> <style type="text/css"> body {background-color:gold;} table { width:70%; } th { height:100px; } </style> <script language="JavaScript"> <!-- Hide the script from old browsers -- img0_on = new Image(400,400); img0_on.src="images/the-power-of-the-cross.JPG"; img0_off = new Image(400,400); img0_off.src="images/006.JPG"; function over_image(parm_name) { document[parm_name].src = eval(parm_name + "_on.src"); } function off_image(parm_name) { document[parm_name].src = eval(parm_name + "_off.src"); } // --End Hiding Here --> </script> <TITLE>Welcome to the Christ Alive Community Church Website</TITLE> </head> <body> <a href="http://www.angelfire.com/caccweb/index2.html" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="images/006.JPG" border="0" name="img0"> </a> <TABLE> <TR> <TD> <img src="images/006.JPG" WIDTH="400" HEIGHT="400"> </TD> <TD> <img src="images/043.JPG" WIDTH="400" HEIGHT="400"> </TD> </TR> </TABLE> </body> </html> I am using a great script i downloaded at http://kryogenix.org/code/browser/sorttable/ to sort tables by the header. my problem is I want to add to this that everyother row should have a gray background. I now do it by assigning a different class to every other row but when you sort it keeps the class. -- is there a way to change the background color of every other row in javascript that I can use with the above script? For Script http://www.dynamicdrive.com/dynamici...htmlticker.htm How do I change the "subject" color above each message from the default black to white ? Can this be done? Change background color a row of depending on cell data on that row. e.g Items <table border="1"> <tr> <td><b>Cost</b></td> <td><b>Item</b></td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>34</td> <td>socks</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>24</td> <td>gloves</td> </tr> </table> Any pointers in the right direction please Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS. When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this... Thanks for yuor time! I have a number var number = 1,235.326232 I need to display it like following with the last 4 numbers in red. 1,235.32 6232 I have tried number.slice(0,-4)+"<font color='red'>"+number.substr(number.length-5,4); however it keeps messing up the comma and decimal placement. Still need assistance, thanks Okay, so here's an example code of what I'm needing: Code: <html> <head> <title></title> <style type="text/css"> #greenrow { background-color:#090; } #redrow { background-color:#F00; } </style> <script type="text/javascript"> if (calculate.level.value >= calculate.getElementById('shrimp').value){ class = greenrow; } else { class = redrow; } </script> </head> <body> <form name="calculate"> <table> <tr> <td><label> Level<input name="level" type="text" size="5" /></label> </td> </tr> <tr id="shrimp"> <td>Shrimp</td> <td align="center"><label> <input type="text" name="shrimp" /> </label></td> <td colspan="3" align="left">10</td> </tr> </table> </form> </body> </html> Okay so what I want to be done is to get information from the input text area "level" and IF "level" is >= 10...for this one certain row, I want it to get the class #greenrow. Else, class = #redrow. Thanks |