...

View Full Version : Help with multiple rollovers...



New2JS
01-18-2003, 07: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">
<!-- Hide script from old browsers

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"
linksArticles.src = "http://www.geocities.com/dr_montagues_research/links/over.gif"
links4Faqs1.src = "http://www.geocities.com/dr_montagues_research/links/1faqs.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 = ""
}

// End hiding script from old browsers -->
</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, 09:15 PM
*bump*

Terry
01-20-2003, 04: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, 02: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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum