Can't Find the Bug - Mouse off function

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
denewey
Forum Newbie
Posts: 9
Joined: Wed Mar 18, 2009 8:50 pm

Can't Find the Bug - Mouse off function

Post by denewey »

I am developing an application for a site selling eco friendly computers and accessories. On the page are displayed different accessories (wireless vs standard mouse, different monitors, etc). Next to each type of accessory are images I've made into buttons which, on mouse over not only does the button change, but the image of the accessory changes to the appropriate accessory image. When one of the buttons is selected, even if one mouse-overs another button (and the accessory image for that buttons appears) the accessory image should return to the selected image on mouse out, but this was not working. I finally got it to work for one set of accessory images and buttons with a function that causes the proper accessory image to display on mouse-out and thought I was home free. For the next set I created the same type of function, but when I insert the second function into the code, the whole page breaks and it's basically the exact same function with a different name. I've looked for missing semi-colons, quotes, parenthesis, etc. - can't find the bug.

Here's the code:

This works:

Code: Select all

function outMouse(){
    if (document.none.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/none_selected.gif") 
        //alert(document.none.src);
        document.mswls.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/mouse_standard.jpg";
    if (document.basic.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/basic_select.gif")
        document.mswls.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/mouse_standard.jpg";
    if (document.wireless.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/wireless_down.gif")
        document.mswls.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/mouse_wireless.jpg";
    }
The following function which is pretty much a duplicate of the above function, when inserted into the page, not only does not work, but breaks the whole page:

Code: Select all

 
function outMouseMon(){
    if (document.none_mk.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/none_selected.gif") 
        document.monit.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/monitor_19.jpg";
    if (document.19viewsonic.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/19_down.gif")
        document.monit.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/monitor_19.jpg";
    if (document.22viewsonic.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/22_down.gif")
        document.monit.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/monitor_22.jpg";
    if (document.22VXeco.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/22_VXeco_down.gif")
        document.monit.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/monitor_22vx.jpg";
    if (document.24VXeco.src == "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/24_VXeco_down.gif")
        document.monit.src = "http://localhost/NE%20Websmith%20Site/Carbon_Footprint/purchase/images/xconfiguration/monitor_24vx.jpg";
    }
 
Oddly enough, when I put in the second function with only the first if statement it doesn't break the page, but of course I don't get the function working either. If I add any of the other if statements, it breaks the page.

Any idea what I'm missing? :banghead:

Thanks, denewey
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Can't Find the Bug - Mouse off function

Post by superdezign »

You description doesn't say much about what is actually happening. However, your code is very messy at the moment and could use some touching up. I would simply approach the problem differently.

I'm guessing that what you are trying to do is have an image change based on the mouse rolling over elsewhere, right? Maybe try using CSS styles instead of the src attribute.

Code: Select all

#image {
  background-image = url("default.jpg");
}
 
#image.state1 {
  background-image = url("state1.jpg");
}
 
...
Then, use JS to select the CSS selectors.

Code: Select all

switchImageState = function() {
  var image = document.getElementById();
  image.className = this.className;
}
And use the class name of the source to determine the class name of the target, for simplicity.

Code: Select all

<ul>
  <li><a class="state1" onmouseover="switchImageState()">State 1</a></li>
  <li><a class="state2" onmouseover="switchImageState()">State 2</a></li>
  ...
</ul>
I haven't used inline events in a long time, so the "onmouseover" attribute may be used incorrectly, but you get the picture.
denewey
Forum Newbie
Posts: 9
Joined: Wed Mar 18, 2009 8:50 pm

Re: Can't Find the Bug - Mouse off function

Post by denewey »

Thank you for the mouse-over solution, but that is not what I am trying to solve. I had already solved that. Let me try to explain again what I am trying to solve.

I have an image of a monitor on the left which can be purchased as an accessory to a computer system. To the right of that image are 5 buttons, one says "None" (for no monitor) and the other four are the four choices of monitors a buyer can select. As one mouses over the buttons, the image of each monitor that corresponds to that button is displayed. That functionality is already working on the page. When one of the buttons is selected the monitor image should either remain the image of the button selected or when one mouses over another button, if that monitor image appears, it should return to the selected monitor on mouse-out. That is what is not working.

Thanks,
denewey
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Can't Find the Bug - Mouse off function

Post by superdezign »

This code already makes the image remain after the mouseover. Just make it work for the mousedown instead.

Implement a mousedown event that alters a variable (global or belonging to the #image element) which determines the state that will remain. Then, implement the current mouseover event, and implement a mouseout event for restoring the image to the saved state.
denewey
Forum Newbie
Posts: 9
Joined: Wed Mar 18, 2009 8:50 pm

Re: Can't Find the Bug - Mouse off function

Post by denewey »

Hi Superdezign,

Thanks for your solution. I'll have to play around with it to get the idea of it. In the meantime I did find my bug. I was using names for images that started with an integer, which in essence eventually became a variable in my function, thereby breaking it. :)

denewey
Post Reply