Javascript Rollovers

I am fairly new to JavaScript and I am trying to make it so that when you mouseover a link, an image to the right of the page changes, then changes back on mouseout.

Here is my JavaScript:

function SwapOut(titleid){
if (titleid == video)
    document.getElementById("titleimg").src="images/videotitle.png"
else if (titleid == gamedesign)
   document.getElementById("titleimg").src="images/gametitle.png"       
else if (titleid == webdesign)
   document.getElementById("titleimg").src="images/webtitle.png"    
return true;
}

function SwapBack('titleid'){
if (titleid == home)
    document.getElementById("titleimg").src="images/hometitle.png"
else if (titleid == gamedesign)
   document.getElementById("titleimg").src="images/gametitle.png"   
else if (titleid == video)
   document.getElementById("titleimg").src="images/videotitle.png"  
else if (titleid == webdesign)
   document.getElementById("titleimg").src="images/webtitle.png" 
return true;
}

And my HTML:

<a id="eileenSmall1" href="video.html" onmouseover="SwapOut('video')" onmouseout="SwapBack('home')"></a>

<div id="title">
    <img src="images/hometitle.png" name="titleimg"/>
</div>

I would normally approach this with CSS but was having issues getting it to work as I am changing the properties of a different element. Any help would be appreciated!

Solution

1) Your trying to refer to an element with the id "titleimg", yet you haven't given the element an id at all.

2) Your if condition doesn't compare titleid with a string it compares it to what it thinks is a variable.. For example it should be 'video' not video.

3) In your second function your parameter should be a variable not a string.. For example it should be SwapBack(titleid) not SwapBack('titleid').

You should try this...

JAVASCRIPT:

function SwapOut(titleid){
if (titleid == 'video')
    document.getElementById("titleimg").src="images/videotitle.png"
else if (titleid == 'gamedesign')
   document.getElementById("titleimg").src="images/gametitle.png"       
else if (titleid == 'webdesign')
   document.getElementById("titleimg").src="images/webtitle.png"    
return true;
}

function SwapBack(titleid){
if (titleid == 'home')
    document.getElementById("titleimg").src="images/hometitle.png"
else if (titleid == 'gamedesign')
   document.getElementById("titleimg").src="images/gametitle.png"   
else if (titleid == 'video')
   document.getElementById("titleimg").src="images/videotitle.png"  
else if (titleid == 'webdesign')
   document.getElementById("titleimg").src="images/webtitle.png" 
return true;
}

HTML:

<a id="eileenSmall1" href="video.html" onmouseover="SwapOut('video')" onmouseout="SwapBack('home')"></a>

<div id="title">
    <img src="images/hometitle.png" name="titleimg" id="titleimg" />
</div>