Javascript Rollovers

Question

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!

Answer 1

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>

Answer 2

you're referencing titleimg by id but haven't assigned it an id, just a name

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

also, the parameter you pass into your function is a string variable. Your functions should look like

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;
}

paying attention to the quotes, you're comparing strings, for example

titleid == 'home' vs titleid == home

also lose the quotations in function SwapBack('titleid')

Answer 3

For starters, if (titleid == video) isn't valid - you're trying to reference video as a variable that doesn't exist. It should be if (titleid == 'video') to signify that it's a string of text.

Secondly, you don't need that if logic in there. Where you're doing onmouseover="SwapOut('video')" you could instead pass it the image.

e.g.,

function swapOut(img)
{
    document.getElementById('titleimg').src = img;
}

HTML

<a id="eileenSmall1" href="video.html" onmouseover="SwapOut('images/videotitle.png')"></a>

Swapback doesn't need any conditional logic (assuming you always want to switch the image back to home).