Question

I am using Visual Studio. My javascript is functioning if I debug it at local host, the function is very simple, photo change at mouseOver.

But after I upload my file to my server, this function is not working. I have tried it on Chrome, Firefox, IE and Safari:

function mouseOver1()
{
    var category1 = document
         .getElementById('ctl00_ContentPlaceHolder1_lblItemID')
         .innerHTML + '_1.jpg';

    document
      .getElementById('<%= iPhotoMain.ClientID.Replace("$","_") %>')
      .src = 'photos/product/' + category1;
}

<img id ="photo1" 
     src ="photos/product/noImage.gif" 
     onmouseover="mouseOver1();"  
     class="thumbpic" 
     runat ="server" />

Answer 1

In light of comments made by the OP, my original answer is partially incorrect (although I still don’t think you should be using static ID for the lblItemID – so will leave the answer below).

My new guess would be that you have a second mouseOver1(); function defined somewhere on your page, or more likely an external JavaScript file that you are linking to. So I would recommend that you check all external JavaScript files on your server that you link to and make sure they’re as you would expect.

I can recommend firebug for firefox or the developers tools under IE and Chrome (F12 on both). With firebug you can breakpoint on the next Javascript to fire, so you can easily find out where the call is going to

---

Original Answer

My guess is that you have mixed up your object ID’s. You are also using a static string to find one of your objects.

If I am correct, please try this – if I am incorrect in my guess, I will happily delete my answer.

(Note, I have changed iPhotoMain into photo1)

function mouseOver1(){
  var category1 = document
    .getElementById('<%=lblItemID.ClientID%>')
    .innerHTML + '_1.jpg';

  document
    .getElementById('<%=photo1.ClientID%>')
    .src = 'photos/product/' + category1;
}