Mouse effect: switching text & image... help!

[Cynical]

Hi,
For my site's navigation menu there will be six image links, and when the user moves their mouse over an image I want the image to change (easy) and the text in a certain box to change (easy).

I can do either part invidually, but I am unable to combine them, hopefully somebody here will be able to :). I don't think it's hard, but I am very new to JS.

Here is the code that creates the functions and whatnot:<SCRIPT language="JavaScript">
var linktext=new Array()
var linkimg_on=new Array()
var linkimg_off=new Array()

linktext[0]="Games, programs, and screen savers"
linkimg_on[0] = "images/nav_downloads_on.png"
linkimg_off[0] = "images/nav_downloads_off.png"
linktext[1]="Examples, scripts, and action libraries"
linkimg_on[1] = "images/nav_gm_on.png"
linkimg_off[1] = "images/nav_gm_off.png"
linktext[2]="PHP Software and HTML templates"
linkimg_on[2] = "images/nav_web_on.png"
linkimg_off[2] = "images/nav_web_off.png"
linktext[3]="Affiliated websites"
linkimg_on[3] = "images/nav_affiliates_on.png"
linkimg_off[3] = "images/nav_affiliates_off.png"
linktext[4]="Tech support"
linkimg_on[4] = "images/nav_support_on.png"
linkimg_off[4] = "images/nav_support_off.png"
linktext[5]="Assorted articles, tutorials, and more"
linkimg_on[5] = "images/nav_misc_on.png"
linkimg_off[5] = "images/nav_misc_off.png"

function show_text(thetext, whichdiv, whichimg) {
eval("document.all."+whichdiv).innerHTML=linktext[thetext]
document.whichimg=linkimg_on[thetext]
}

function reset(whichdiv, thetext){
eval("document.all."+whichdiv).innerHTML='www.cynicalgames.com'
document.whichimg = linkimg_off[thetext]
}
</SCRIPT>This code would be an example of what I am trying to use on the page:<a href="" onMouseOver="show_text(0,'div2','img1')" onMouseOut="reset('div2',0)"><img name="img1" src="images/nav_downloads_off.png" width="96" height="24" border="0"></a>
&nbsp;&nbsp;&nbsp;<a href="" onMouseOver="show_text(1,'div2','img2')" onMouseOut="reset('div2',1)"><img name="img2" src="images/nav_gm_off.png" width="96" height="24" border="0"></a> <BR><BR><span id="div2">Description here</span>(simplified for time's sake)

No errors are given, which is even less helpful to me trying to solve this problem. The text changing works wonderfully, though the image changer does not work at all (the image remains in the "off" status). I just need to know what is wrong with the codes above that is preventing the images from changing on the onMouseOver and onMouseOut events.

Thanks for any help, it would be greatly appreciated :)
--Cynical

[Mongus]

You were referencing the images incorrectly. I also changed the way you referenced the text div and reworked the reset function's parameters.

<SCRIPT language="JavaScript">
var linktext=new Array()
var linkimg_on=new Array()
var linkimg_off=new Array()

linktext[0]="Games, programs, and screen savers"
linkimg_on[0] = "image.jsp?c=f00"
linkimg_off[0] = "image.jsp?c=00f"
linktext[1]="Examples, scripts, and action libraries"
linkimg_on[1] = "image.jsp?c=ff0"
linkimg_off[1] = "image.jsp?c=0f0"
linktext[2]="PHP Software and HTML templates"
linkimg_on[2] = "images/nav_web_on.png"
linkimg_off[2] = "images/nav_web_off.png"
linktext[3]="Affiliated websites"
linkimg_on[3] = "images/nav_affiliates_on.png"
linkimg_off[3] = "images/nav_affiliates_off.png"
linktext[4]="Tech support"
linkimg_on[4] = "images/nav_support_on.png"
linkimg_off[4] = "images/nav_support_off.png"
linktext[5]="Assorted articles, tutorials, and more"
linkimg_on[5] = "images/nav_misc_on.png"
linkimg_off[5] = "images/nav_misc_off.png"

function show_text(thetext, whichdiv, whichimg) {
document.getElementById(whichdiv).innerHTML=linktext[thetext]
document.getElementById(whichimg).src = linkimg_on[thetext]
}

function reset(thetext, whichdiv, whichimg){
document.getElementById(whichdiv).innerHTML='www.cynicalgames.com';
document.getElementById(whichimg).src = linkimg_off[thetext];
}
</SCRIPT>

<a href="" onMouseOver="show_text(0,'div2','img1')" onMouseOut="reset(0,'div2','img1')"><img id="img1" src="image.jsp?c=00f" width="96" height="24" border="0"></a>
&nbsp;&nbsp;&nbsp;<a href="" onMouseOver="show_text(1,'div2','img2')" onMouseOut="reset(1,'div2','img2')"><img id="img2" src="image.jsp?c=0f0" width="96" height="24" border="0"></a> <BR><BR><span id="div2">Description here</span>
You can see it live here (http://www.scriptingmagic.com/Forums/110019/).

[wasim_@_drushti]

In stead of such a huge code you may use a short code for this:



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>img id =</title>
<script language="javascript">
var img_url = "";
function swapImage(img_name,description,area, act){

var doc = document.getElementById(img_name);
if(act == 1)
{
doc.src = "images/"+img_name+"_on.jpg";
document.getElementById(area).innerHTML=description;
} else {
doc.src = "images/"+img_name+"_off.jpg";
document.getElementById(area).innerHTML=description;
}
}
</script>


</head>

<body>

<a href="index.htm"
onmouseover="window.status='Home'; swapImage('home','On','display',1); return true;" onmouseout="window.status=''; swapImage('home','Off','display',2); return true;">

<img id = "home" border="0" src="images/home_off.jpg" width="234" height="18" ></a>
<div id="display">Your text will be displayed here</div>
</body>

</html>




Let me know your view

[Cynical]

Thanks for the quick replies both of you, I think I am going to the code Mongus posted for now, but I am going to save your's too wasim_@_drushti. I am using the first because it is more similar to my original, and the size really doesn't matter -- I hardly ever will have to access the page that the code will be on, which is the page that sets up the structure and navigation menu for the site.

Thanks again for the quick help :),
--Cynical