Rollover help needed

S

surreal5335

New Member
Messages
28
Reaction score
0
Points
0
I am in need of some Javascript rollover help.

Here is the code that I have so far which does not seem to work

Code: 
	[I]if[/I] (images) {
	
homewhite = [I]new[/I] image ();
homeblue = [I]new[/I] image ();
foreclosureswhite = [I]new[/I] image ();
foreclosuresblue = [I]new[/I] image ();
listingswhite = [I]new[/I] image ();
listingsblue = [I]new[/I] image ();

homewhite.src = "http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/home.png";
homeblue.src = "http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/homeblue.png";
foreclosureswhite.src = "http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/forclosures.png";
foreclosuresblue.src = "http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/foreclosuresblue.png";
listingswhite.src = "http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/listings.png";
listingsblue.src = "http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/listingsblue.png";

}

HTML:
Code: 
[B]<a href="index.html">[/B][B]<img src="http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/home.png" onmouseover="homeblue.src='http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/homeblue.png';" onmouseout="homewhite.src='http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/home.png';" vspace="1" hspace="1">[/B][B]</a>[/B]

There is a lot more of the same stuff obviously. Does anyone have any suggestions as to what I can do?
Thanks a lot
 
leafypiggy

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
use css? it loads easier.

make a id for all of your nav, and do:

Code: 
#home a {
//yourcss or image info
}
and
Code: 
#home a:hover {
//your css or image info
}

that way all the images are preloaded into the CSS.
and
 
S

surreal5335

New Member
Messages
28
Reaction score
0
Points
0
Thanks a lot for the help but it seems the tutorial link you provided doesnt work. I making slight changes all over the place as well, and I still get no result. Do all of the rollover buttons need to be changed to the new format to get the effect?
 
mattura

mattura

Member
Messages
570
Reaction score
2
Points
18
Why don't you put your images on the web server (where your index.html is), instead of photobucket.
They would load much quicker and be sure to work.
 
W

woiwky

New Member
Messages
390
Reaction score
0
Points
0
Your html should be:

HTML: 
<a href="index.html"><img src="http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/home.png" onmouseover="this.src=homeblue.src;" onmouseout="this.src=homewhite.src;" vspace="1" hspace="1"></a>

Also, are you sure the if should be 'if (images)' and not 'if (document.images.length)'?
 
S

surreal5335

New Member
Messages
28
Reaction score
0
Points
0
I have tried most of the different ways to get it to work, I do have one question about the "onmouseover" event you stated

Code: 
[COLOR=#800080]onmouseover=[COLOR=#0000FF]"this.src=homeblue.src;"[/COLOR][/COLOR]

The part about "this.src" what does "this" apply to? should that located somewhere in the Javascript? or is that a generic name which I am suppose to substitue with something?

Thanks
 
W

woiwky

New Member
Messages
390
Reaction score
0
Points
0
There's no need to change anything, except homeblue and homewhite which will change for the other images of course.

'this' is a keyword which refers to the current object. For instance, if you gave your image the name 'img1', this.src would be equivalent to document.img1.src.
 
S

surreal5335

New Member
Messages
28
Reaction score
0
Points
0
ok so seeing as the name of the image on photobucket is "homeblue.png" Then the syntax would be:

Code: 
onmouseover="document.homeblue.src=homeblue.src";

If I am using a "document" tag in the mouseover event should I add a
Code: 
document.homeblue = " "

to the Javascript in the <head> tags?

I realize that I am asking a lot of questions, but I have been trying to find a succesful syntax for rollovers for about 3 days.
I appreciate your continous help in the matter.
 
W

woiwky

New Member
Messages
390
Reaction score
0
Points
0
I didn't mean the actual name of the image, I meant the name attribute of the <img> tag. Also, I didn't mean to say you should replace 'this' with the document.* format. Sorry for the confusion.

What I meant was that there's no need to change anything at all in the html I provided except when adapting it for the other images I assume you have which use the other image rollovers(foreclosures and listings).

So, I believe your image tags should look *exactly* like this:

HTML: 
<img src="http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/home.png" onmouseover="this.src=homeblue.src;" onmouseout="this.src=homewhite.src;" vspace="1" hspace="1" />
<img src="http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/forclosures.png" onmouseover="this.src=foreclosuresblue.src;" onmouseout="this.src=foreclosureswhite.src;" vspace="1" hspace="1" />
<img src="http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/listings.png" onmouseover="this.src=listingsblue.src;" onmouseout="this.src=listingswhite.src;" vspace="1" hspace="1" />
If no images come up when you move your mouse over them, then I would assume that you need to change your JS if statement to:

if (document.images.length) {
 
You must log in or register to reply here.
Top