I have an onmouseover function which works in IE, but not in FF, can anybody inform me as to how I can rework the following to make it work in both browsers? This is in the head section. <script type="text/javascript"> <!-- currentPic = "albums"; function hot(name){ eval(currentPic + ".style.display='none'"); eval(name + ".style.display='inline'"); mainPic.src= "http://www.accidentrecordings.com/members/images/" + name + ".JPG"; currentPic = name; } // --> </script> Code (markup): This is what I use to activate the onmouseover in the body section. <a href='http://www.accidentrecordings.com/members/albums.html'><img src="http://www.accidentrecordings.com/members/images/albums_link.JPG" alt="Accident Albums" onmouseover="hot('albums');" /></a> <a href='http://www.accidentrecordings.com/members/websites.html'><img src="http://www.accidentrecordings.com/members/images/website_button.JPG" alt="Home-Groan Websites" onmouseover="hot('websites');" /></a> <a href='http://www.accidentrecordings.com/members/screensavers.html'><img src="http://www.accidentrecordings.com/members/images/godsplayground_button.JPG" alt="Home-Groan Screen Savers" onmouseover="hot('godsplayground');" /></a> <div id="albums" style="display:inline;">Home-Groan are the publishers of the recorded works of the group Accident, and it is around Accident Albums that everything else revolves, the web sites are created to display them, and the screen savers include them.</div> <div id="websites" style="display:none;">Web sites are an integral aspect of marketing these days, and the creation of: <i>XHTML, Javascript, CSS, Java, PHP</i> and <i>MySQL</i> mean that sophisticated web sites can be created to develop attractive places for database driven sales sites.</div> <div id="godsplayground" style="display:none;">Throughout history the Human Race has used the technology of the day to create images that portray their lifestyle or events that are special to them, from cave drawings to tapestries. A Screen Saver is just one method we can use today.</div> Code (markup):
Is the following what you are trying to do? Do not use "name" for any reason. It's a JavaScript reserved word. There are very few situations where using "eval" is appropriate. More often than not, use document.getElementById. Divs are block style elements. You shouldn't set the display property of a div to "inline." Use style.display = "" to display ANY element in its default style. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function hot(nItem,nName){ var nCurrPic = document.getElementById(nName); nCurrPic.style.display = ''; nItem.onmouseout = function() { nCurrPic.style.display = 'none'; } } </script> <style type="text/css"> body {background-color:#eae3c6;margin-top:60px} </style> </head> <body> <a href='http://www.accidentrecordings.com/members/albums.html'><img src="http://www.accidentrecordings.com/members/images/albums_link.JPG" alt="Accident Albums" onmouseover="hot(this,'albums');" /></a> <a href='http://www.accidentrecordings.com/members/websites.html'><img src="http://www.accidentrecordings.com/members/images/website_button.JPG" alt="Home-Groan Websites" onmouseover="hot(this,'websites');" /></a> <a href='http://www.accidentrecordings.com/members/screensavers.html'><img src="http://www.accidentrecordings.com/members/images/godsplayground_button.JPG" alt="Home-Groan Screen Savers" onmouseover="hot(this,'godsplayground');" /></a> <div id="albums" style="display:none">Home-Groan are the publishers of the recorded works of the group Accident, and it is around Accident Albums that everything else revolves, the web sites are created to display them, and the screen savers include them.</div> <div id="websites" style="display:none;">Web sites are an integral aspect of marketing these days, and the creation of: <i>XHTML, Javascript, CSS, Java, PHP</i> and <i>MySQL</i> mean that sophisticated web sites can be created to develop attractive places for database driven sales sites.</div> <div id="godsplayground" style="display:none;">Throughout history the Human Race has used the technology of the day to create images that portray their lifestyle or events that are special to them, from cave drawings to tapestries. A Screen Saver is just one method we can use today.</div> </body> </html> Code (markup):
Sorry Mike, tried that but the images are sitll not swapping on FireFox, this is what I am doing. <head> <script type="text/javascript"> nName = "albums"; function hot(nItem,nName){ var nCurrPic = document.getElementById(nName); nCurrPic.style.display = 'inline'; nItem.onmouseout = function() { nCurrPic.style.display = 'none'; } } </script> </head> Code (markup): This is something I didn't put in last time, could it be something that is stopping the images from exchanging onmouseover? <td align="left" style="height: 100px"><img src="http://www.accidentrecordings.com/members/images/albums.JPG" alt="Accident Albums" id="mainPic" /></td> Code (markup): This is where I try to activate the exchanging. <a href='http://www.accidentrecordings.com/members/albums.html'><img src="http://www.accidentrecordings.com/members/images/albums_link.JPG" alt="Accident Albums" onmouseover="hot(this, 'albums');" /></a> <a href='http://www.accidentrecordings.com/members/websites.html'><img src="http://www.accidentrecordings.com/members/images/website_button.JPG" alt="Home-Groan Websites" onmouseover="hot(this, 'websites');" /></a> <a href='http://www.accidentrecordings.com/members/screensavers.html'><img src="http://www.accidentrecordings.com/members/images/godsplayground_button.JPG" alt="Home-Groan Screen Savers" onmouseover="hot(this, 'godsplayground');" /></a> <div id="albums" style.display="inline";>Home-Groan are the publishers of the recorded works of the group Accident, and it is around Accident Albums that everything else revolves, the web sites are created to display them, and the screen savers include them.</div> <div id="websites" style="display:none">Web sites are an integral aspect of marketing these days, and the creation of: <i>XHTML, Javascript, CSS, Java, PHP</i> and <i>MySQL</i> mean that sophisticated web sites can be created to develop attractive places for database driven sales sites.</div> <div id="godsplayground" style="display:none">Throughout history the Human Race has used the technology of the day to create images that portray their lifestyle or events that are special to them, from cave drawings to tapestries. A Screen Saver is just one method we can use today.</div> Code (markup):