Help with multiple rollovers...

New2JS

01-18-2003, 06:46 PM

OK, I finally got A rollover to work but now I'm having trouble with multiple ones. The first one works fine, but none of the others do, just says that there is an error on the page. Please help as I'm about to go bold from ripping my hair out... I mean everything looks good to me. But I don't know much so here.

Here is the <head></head> part:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">

</SCRIPT>

Then my links... sorry that it expends the page...

<A HREF="next.html" onMouseover="document.links1.src=links1Home1.src" onMouseout="document.links1.src=links1Home.src"><IMG SRC="links/home.gif" BORDER="0" NAME="links1" ALT="Home"></A>
<A HREF="http://pso.proboards.com" onMouseover="document.links2.src=linksForums1.src" onMouseout="document.links2.src=linksForum.src"><IMG SRC="links/forum.gif" BORDER="0" NAME="links2" ALT="Forums"></A>
<A HREF="articles.html" onMouseover="document.links3.src=linksRarticles.src" onMouseout="document.links3.src=linksArticles.src"><IMG SRC="links/over.gif" BORDER="0" NAME="links3" ALT="Articles"></A>
<A HREF="faqs.html" onMouseover="document.links4.src=linksFaqs1.src" onMouseout="document.links4.src=linksFaqs.src"><IMG SRC="links/faqs.gif" BORDER="0" NAME="links4" ALT="Faqs"></A>

Thank you:D

New2JS

01-19-2003, 08:15 PM

*bump*

Terry

01-20-2003, 03:32 AM

Hi,
Your naming of these images were confusing you. I think you might want to try a better naming method. Even when you called the image swap you got confused as to what you called the images. I had to look in your directory: http://www.geocities.com/dr_montagues_research/links/
to see what you had for images.

http://www.geocities.com/dr_montagues_research/links/1forum.jpg doesn't exist so the rollover won't work no matter what.

Your over image for articles is:
http://www.geocities.com/dr_montagues_research/links/1char.jpg

I got the rest to work though.

if (document.images) {
links1Home1 = new Image();
links1Home = new Image();
links2Forums1 = new Image();
links2Forums = new Image();
links3Rarticles = new Image();
links3Articles = new Image();
links4Faqs1 = new Image();
links4Faqs = new Image();
links1Home1.src = "http://www.geocities.com/dr_montagues_research/links/1home.jpg"
links1Home.src = "http://www.geocities.com/dr_montagues_research/links/home.gif"
links2Forums1.src = "http://www.geocities.com/dr_montagues_research/links/1forum.jpg"
links2Forums.src = "http://www.geocities.com/dr_montagues_research/links/forum.gif"
links3Rarticles.src = "http://www.geocities.com/dr_montagues_research/links/rarticles.jpg"
links3Articles.src = "http://www.geocities.com/dr_montagues_research/links/over.gif"
links4Faqs1.src = "http://www.geocities.com/dr_montagues_research/links/1char.jpg"
links4Faqs.src = "http://www.geocities.com/dr_montagues_research/links/faqs.gif"
}
else {
links1Home1 = ""
links1Home = ""
linksForums1 = ""
linksForums = ""
linkRasrticles = ""
linksArticles = ""
linksFaqs1 = ""
linksFaqs = ""
document.links1 = ""
document.links2 = ""
document.links3 = ""
document.links4 = ""
}

<td><a onmouseover="document.links1.src=links1Home1.src"
onmouseout="document.links1.src=links1Home.src"
href="http://www.geocities.com/dr_montagues_research/next.html"><img
alt="Home" src="Dr Montague's Research_files/home.gif" border="0"
name=links1></a><a onmouseover="document.links2.src=links2Forums.src"
onmouseout="document.links2.src=links2Forums1.src"
href="http://pso.proboards.com/"><img alt="Forums"
src="Dr Montague's Research_files/forum.gif" border=0 name="links2"></a><a
onmouseover="document.links3.src=links3Rarticles.src"
onmouseout="document.links3.src=links3Articles.src"
href="http://www.geocities.com/dr_montagues_research/articles.html"><img
alt="Articles" src="Dr Montague's Research_files/over.gif" border="0"
name="links3"></a><a onmouseover="document.links4.src=links4Faqs1.src"
onmouseout="document.links4.src=links4Faqs.src"
href="http://www.geocities.com/dr_montagues_research/faqs.html"><img
alt="Faqs" src="Dr Montague's Research_files/faqs.gif" border="0"
name="links4"></a><a
href="http://www.geocities.com/dr_montagues_research/sucks/html"><img
src="Dr Montague's Research_files/drops.gif"></a><a
href="http://www.geocities.com/dr_montagues_research/sucks.html"><img
src="Dr Montague's Research_files/links.gif"></a>
</td>

I have an easier way to do this. When you make your images for the rollovers you can call them menu0, menu1, menu2, menu3 etc. when you save them. For your page, menu0 would be the "Home" gif, menu1 would be the "Home" over gif. "Forum" would be menu2 etc. Make sure you save them all as either gifs or jpgs. Then in your js script you would code:

var myMenu = new Array(12);
// 12 for the number you have, or some other number depending on the total
if(document.images)
{
var mLen = myMenu.length;
for(var i = 0; i < mLen; i++)
{
myMenu[i] = new Image();
myMenu[i].src = "images/tMenu" + i + ".gif";
}
}

function chgImg(imgName, imgSrc)
{
if(document.images) {
document.images[imgName].src = imgSrc;
}

}

In your table you could do something like this:

<td>
<a href="Skills_Training.htm" onmouseout="chgImg('Skills', myMenu[0].src)"
onmouseover="chgImg('Skills', myMenu[1].src)">
<img src="images/tMenu0.gif" width="137" height="37" name="Skills"
border="0" alt="Skills and Training" /></a></td>
<td>
<a href="Portfolio.htm" onmouseout="chgImg('Portfolio', myMenu[2].src)"
onmouseover="chgImg('Portfolio', myMenu[3].src)">
<img src="images/tMenu2.gif" width="91" height="37" name="Portfolio"
border="0" alt="Portfolio" /></a></td>
<td>
<a href="Javascript.htm" onmouseout="chgImg('Javascript', myMenu[4].src)"
onmouseover="chgImg('Javascript', myMenu[5].src)">
<img src="images/tMenu4.gif" width="145" height="37" name="Javascript"
border="0" alt="Javascript and DHTML" /></a></td>
<td>
<a href="CPP.htm" onmouseout="chgImg('CPP', myMenu[6].src)"
onmouseover="chgImg('CPP', myMenu[7].src)">
<img src="images/tMenu6.gif" width="83" height="37" name="CPP"
border="0" alt="C++ and Java Code" /></a></td>
<td>
<a href="Links.htm" onmouseout="chgImg('Links', myMenu[8].src)"
onmouseover="chgImg('Links', myMenu[9].src)">
<img src="images/tMenu8.gif" width="148" height="37" name="Links"
border="0" alt="Links and Resources" /></a></td>
<td>
<img src="images/wddBig_08.gif" width="52" height="37" alt="right" /></td>

It's a lot less confusing, the for loop and simple mouseover/mouseout function will take care of most of it as long you remember to name your images menu0, menu1 etc.

- Terry

New2JS

01-21-2003, 01:18 AM

Hey Terry thanks, you’re awesome!:D

It took me awhile to figure out how to use your script, I couldn’t get it to work in the beginning then I realized that my rollover images were .jpg’s. After I got that sorted It was all down hill from there. It is a lot more convenient and as you said not so confusing. I'm still thinking about what graphic I should change on the rollover. If you want to see what I've done so far check this (http://www.geocities.com/dr_montagues_research/). I think I'll go with the Forum one, I like the twist. No content yet, just the basic layout, tell me what you think. Anyway Thanks again!