PDA

View Full Version : cannot resolve the mouseover javascipt conflict. help is greatly appreciated!

ssskaya
10-19-2002, 12:19 AM
When I insert the first mouseover script, it works just fine. but after I insert the 2nd (or the rest), none of them works. below is the script. please advice. thank you.

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="description"
content="Fiscal Study is a 'Prediction-Oriented' Financial Information Website with Q&amp;A sessions and Forums. Click to explore!">
<meta name="keywords"
content="business, economy, finance, money, stock, exchange, switzerland, market, taiwan, taipei, toronto, vienna, atx, austria">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Major Markets</title>
</head>

<body bgcolor="#FFFFFF">
<div align="center"><center>

<table border="0" width="600">
<tr>
<td><div align="right"><table border="0"
bgcolor="#6699FF">
<tr>
<td align="right"><strong>Major Markets</strong></td>
</tr>
</table>
</div><p align="center">Click on flags for country facts.</p>
<div align="center"><center><table border="0"
cellspacing="1" width="310">
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/us.html"
onmouseover="mypicture.src='im/usm.gif'"
onmouseout="mypicture.src='im/us.gif'"><img
src="http://www.fiscalstudy.com/im/us.gif"
border="0" width="50" height="26"
name="mypicture"></a></td>
<td align="center"><strong>DJIA</strong></td>
<td align="center">7286.27</td>
<td align="center"><font color="#FF0000">-215.22</font></td>
</tr>
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/us.html"
onmouseover="mypicture.src='im/usm.gif'"
onmouseout="mypicture.src='im/us.gif'"><img
src="im/us.gif" border="0" width="50" height="26"
name="mypicture"></a></td>
<td align="center"><strong>NASDAQ</strong></td>
<td align="center">1114.11</td>
<td align="center"><font color="#FF0000">-15.10</font></td>
</tr>
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/us.html"
onmouseover="mypicture.src='im/usm.gif'"
onmouseout="mypicture.src='im/us.gif'"><img
src="im/us.gif" border="0" width="50" height="26"
name="mypicture"></a></td>
<td align="center"><strong>S&amp;P 500</strong></td>
<td align="center">776.26</td>
<td align="center"><font color="#FF0000">-21.79</font></td>
</tr>
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/japan.html"
onmouseover="mypicture.src='im/japanm.gif'"
onmouseout="mypicture.src='im/japan.gif'"><img
src="im/japan.gif" border="0" width="50"
height="31" name="mypicture"></a></td>
<td align="center"><strong>NIKKEI 225</strong></td>
<td align="center">8708.90</td>
<td align="center"><font color="#008000">+20.90</font></td>
</tr>
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/uk.html"
onmouseover="mypicture.src='im/ukm.gif'"
onmouseout="mypicture.src='im/uk.gif'"><img
src="im/uk.gif" border="0" width="50" height="25"
name="mypicture"></a></td>
<td align="center"><strong>FTSE 100</strong></td>
<td align="center">3742.40</td>
<td align="center"><font color="#008000">+11.90</font></td>
</tr>
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/germany.html"
onmouseover="mypicture.src='im/germanym.gif'"
onmouseout="mypicture.src='im/germany.gif'"><img
src="im/germany.gif" border="0" width="50"
height="30" name="mypicture"></a></td>
<td align="center"><strong>DAX</strong></td>
<td align="center">1923.54</td>
<td align="center"><font color="#FF0000">-17.93</font></td>
</tr>
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/france.html"
onmouseover="mypicture.src='im/francem.gif'"
onmouseout="mypicture.src='im/france.gif'"><img
src="im/france.gif" border="0" width="50"
height="33" name="mypicture"></a></td>
<td align="center"><strong>CAC 40</strong></td>
<td align="center">2656.45</td>
<td align="center"><font color="#FF0000">-37.78</font></td>
</tr>
<tr>
<td align="center"><a
href="http://www.fiscalstudy.com/hk.html"
onmouseover="mypicture.src='im/hkm.gif'"
onmouseout="mypicture.src='im/hk.gif'"><img
src="im/hk.gif" border="0" width="50" height="33"
name="mypicture"></a></td>
<td align="center"><strong>HANG SENG</strong></td>
<td align="center">8977.40</td>
<td align="center"><font color="#008000">0</font></td>
</tr>
</table>
</center></div></td>
</tr>
</table>
</center></div>
</body>
</html>
adios
10-19-2002, 01:44 AM
An Image object's 'name' property is intended to identify that object, for scripting purposes. You've 'identified' each of your embedded images - with the same name...this forces the browser to put them in an array, since you can only have one property of the same name in the same namespace (any 'area' where variables are defined). Now 'mypicture' is an array, with mypicture[0] pointing to the first image, mypicture[1] the second. Even more problemmatical, only MSIE allows you to reference elements this way (as global variables) - all other browsers make image names accessible as either document properties (document.image_name) or properties of the Images[] collection (document.images.image_name). Solution: give each image a unique name:

<td align="center"><a
href="http://www.fiscalstudy.com/us.html"
onmouseover="document.mypicture1.src='im/usm.gif'"
onmouseout="document.mypicture1.src='im/us.gif'"><img
src="http://www.fiscalstudy.com/im/us.gif"
border="0" width="50" height="26"
name="mypicture1"></a></td>

Neater way: use a function, and pass it the image name & src:

<td align="center"><a
href="http://www.fiscalstudy.com/us.html"
onmouseover="swap('mypicture1','im/usm.gif')"
onmouseout="swap('mypicture1,'im/us.gif')"><img
src="http://www.fiscalstudy.com/im/us.gif"
border="0" width="50" height="26"
name="mypicture1"></a></td>

function swap(img_name, new_src) {
document[img_name].src = new_src;
}

You'll want to rig up a preloader with this, for instant display. Look around the place, many scripts available, most about the same.

The newer DOM(s) use ids (and document.getElementById()).