Newbie question about getElementById

[cs.punk]

Can anyone tell me if there is any difference between:

 

function changeImgOn(picID, imgSrc)
    {
        var img = document.getElementById(picID);
        img.src = imgSrc;
    }

 

or

 

function changeImgOn(picID, imgSrc)
    {
        var img = document.getElementById(picID);
        img.setAttribute("src", imgSrc);
    }

 

Where my HTML is:

 

    <img id='pic1' src='home_off.jpg'
        onmouseover='changeImgOn("pic1", "home_on.jpg")'
        onmouseout='changeImgOn("pic1", "home_off.jpg")'/>

 

They both work but just wanted to know.

 

Thank you!

[codefossa]

They would both do the same thing essentially.  Why do you create a var when you're only using it one time though?

 

Also, this can be accomplished in JQuery much easier with $("#picID").val(imgSrc);

[haku]

Actually this doesn't need to be done with javascript at all, and should be done in CSS.

[codefossa]

Actually this doesn't need to be done with javascript at all, and should be done in CSS.

True, but I was just answering the question.

[RussellReal]

haha could be done in CSS Completely like HAKU said, I'll show you an example (without CSS:background-image hacks or CSS:background-position hacks)

 

<style type="text/css">
a img { border: none; }
a .dn { display: none; }
a:hover .dn { display: block; }
a:hover .up { display: none; }
</style>
<a href="link.html">
<img class='up' src="linkUp.gif" />
<img class='dn' src="linkDn.gif" />
</a>

 

oh and to answer your question.. You're most likely better off using .src as setAttribute might not be supported by all browsers

 

[cs.punk]

Thank you!

 

As for the var, was just testing code as such. As  for using css, I guess but I find javascript is allot easier to work with. What is the worst that can happen? JS turned off and the rollovers don't work?