[Javascript] - function doesn't work properly in IE{Resolved}

I've got a function that changes a dot beside navigations to a larger dot, symbolizing you are hovering over the navigation. On mouse out, the dot is suppose to change back to being small. This script works perfectly in firefox, but doesn't work correctly in IE. I'm thinking there is something wrong with my syntax, but not sure what it is:

Code:

---

                <script language="javascript">
                        function change(name)
                        {
                                if((document.getElementById(name).getAttribute('src')) == "dotTWO.jpg")
                                {
                                        document.getElementById(name).src = "dotONE.jpg";
                                }
                                else
                                {
                                        document.getElementById(name).src = "dotTWO.jpg";
                                }
                        }
                               
                </script>

---

Code:

---

                <script language="javascript">
                        function change(name)
                        {
                                if((document.getElementById(name).getAttribute('src')) == "dotTWO.jpg")
                                {
                                        document.getElementById(name).setAttribute('src', "dotONE.jpg");
                                }
                                else
                                {
                                        document.getElementById(name).setAttribute('src', "dotTWO.jpg");
                                }
                        }
                               
                </script>

---

Thanks, but it's still doing the same thing :(

Do you have all the source code? Can you post it?

I'll try to post all that I can. There are tons of tables and stuff in there, so I'll only post the relevant parts to clear any confusion. It's still working fine in FF, but not in IE. That doesn't make any sense to me, because I thought the scripts would work about the same.
Anyways, here is where the functions are called:

Code:

---

<td valign="top" width="110" bgcolor="#00006B" background="sidepanel.jpg">
                                        <p align="center"><br><br><br><br>
                                        <font color="white"><b>Goto:</b> </font><br><br>
                                      <a href="http://www.ncstatefair.org/2005/"
                                          onMouseOver="change('dot1');" onMouseOut="change('dot1');"><font color="white">
                                          <img id="dot1" src="dotONE.jpg" border="0"></blink>Fair Home</blink></font></a>
                                        <br><br><a href="http://www.ncstatefair.org/2005/tickets.htm" onMouseOver="change('dot2');"
                                          onMouseOut="change('dot2');">
                                          <font color="white"><img id="dot2" src="dotONE.jpg" border="0">Tickets</font></a>
                                          <br><br><a href="http://www.ncstatefair.org/2005/entertainment.htm" onMouseOver="change('dot3');"
                                          onMouseOut="change('dot3');"><font color="white">
                                          <img id="dot3" src="dotONE.jpg" border="0">Entertainment</font></a></p></td>
                                <td width="400" bgcolor="#3395D9" valign="top">

---

I'm setting the mouseOut and mouseOver properties in the anchor tags. I'm wondering if it's something to do with capitilization or something, but I don't have a book or anything to go by.

The onmouseover and onmouseout attributes should be lower case. Let me know if it works, if not I'll test it at my end.

Thanks for the help. That didn't work on my end, but I'm going to take it to school with me and test it on a computer there. I'm thinking there is something up with my browser, because this should be working. Anyways, I'll get back to you this afternoon, and let you know if it worked or not.

Don't you just love IE?? :D

Anyway, I found out what your problem is. The src value returned by Internet Explorer includes the full path of the URL to the image not the relative URL as set in Firefox. Therefore, a bit of string extraction solves the problem:

Code:

---

                <script type="text/javascript">
                        function change(name)
                        {
                                var src = document.getElementById(name).getAttribute('src');

                                if (src.lastIndexOf('/') != -1) {
                                        src = src.slice(src.lastIndexOf('/') + 1);
                                }
                               
                                if(src == "dotTWO.jpg")
                                {
                                        document.getElementById(name).setAttribute('src', "dotONE.jpg");
                                       
                                }
                                else
                                {
                                        document.getElementById(name).setAttribute('src', "dotTWO.jpg");
                                }
                        }
                               
                </script>

---

Sorry for the late reply, my computer has came down with a dirty disease. Anyways, that worked perfectly, I want to thank you for all your kind help. I really appreciate the time you took for me!

PS: It says I must spread some reputation around before giving you any :(