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!

Mike · Answer 1 · 2012-11-12T19:42:29.317

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')

George · Accepted Answer · 2012-11-12T19:46:03.593

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>

The mouseover is working now, thanks! However, the mouseout still isn't working, the image does not return to the original. — clancimus, Nov 12 '12 at 19:45
Nevermind, file naming error on my part. Everything is working great now. Thanks! — clancimus, Nov 12 '12 at 19:49

score 0 · Answer 3 · answered Nov 12 '12 at 19:47

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).

Javascript Rollovers

3 Answers3