change image source with javascript - what's wrong?

Question

<IMG onmouseover="document.swap2.src='http://www.grlf.com/pics/png';" id="brewmp" alt=Brew src=changeOSImage() width=26 height=24>


function changeOSImage() {
    var mp_os = "x";

    if (mp_os) == "Brew MP") {
        document.getElementById("brewmp").src = "http://www.greengo-cellular.com/ebay_files/images/features_n_02.png";
    } else {
        document.getElementById("brewmp").src = "http://www.greengo-cellular.com/ebay_files/images/features_02.png";
    }
};

For some reason instead of changing the url, the url displays the function name inside of it (therefore leading to nowhere). What have I done wrong?

Background read: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice and http://en.wikipedia.org/wiki/Unobtrusive_JavaScript and http://stackoverflow.com/questions/3142710/inline-styles-vs-classes — Xotic750, May 16 '13 at 22:12

score 3 · Answer 1 · answered May 16 '13 at 22:08

3

You can not specify a function at the src attribute of an image.

Try putting the changeOSImage() function at the onload event of the document, or calling it from some other function.

answered May 16 '13 at 22:08

Vinícius Gobbo A. de Oliveira

2,239
23
26

score 0 · Accepted Answer · answered May 16 '13 at 22:17

As already mentioned, the src of your image cannot be a function. Also I cannot see what document.swap2 actually refers to in your code. try something like

  <img id="brewmp" src="http://www.grlf.com/pics/png" />

  <script>
  window.onload = (function(){
         var mp_os = 'x';
         document.getElementById('brewmp').onmouseover = (function(){
              this.src = 'path/to/different/image';
         });
  });
  </script>

I'm not sure what mp_os is referring to in your initial code as it's set as x and you never change it, plus it is defined within the scope of your function which means it will always be 'x' in this case.The above should give you a good starting point to add your "if" statement into though, but you should declare var mp_os outside of the function

score 0 · Answer 3 · answered May 16 '13 at 22:19

As noted in the other answers, you have an extra ) in your if statement. Try this:

Example: JsFiddle

JavaScript (added inside <head></head>):

<script>
var mp_os = '';

function changeImage(){

    if (mp_os == "Brew MP") {
        mp_os = "x";
        document.getElementById("brewmp").src = "http://png-5.findicons.com/files/icons/75/i_like_buttons_3a/512/perspective_button_stop.png";
    } else {
        mp_os = "Brew MP";
        document.getElementById("brewmp").src = "http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Perspective-Button-Go-icon.png";
    }

}
</script>

HTML:

<img onmouseover="changeImage()" onmouseout="changeImage()" id="brewmp" alt="Brew" src="http://png-5.findicons.com/files/icons/75/i_like_buttons_3a/512/perspective_button_stop.png" width="20%">

change image source with javascript - what's wrong?

3 Answers3