...

View Full Version : rollover problems



surreal5335
06-16-2008, 09:05 PM
I have a tried a number of different codes and I am not seeming to get it to work. Here is a sample of the code I am using:

Javascript


homewhite = new image ();
homeblue = new image ();
foreclosureswhite = new image ();
foreclosuresblue = new image ();
listingswhite = new image ();
listingsblue = new 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:


<a href="index.html"><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"></a>

Obviously there is a lot more but its all the same format.
Any suggestions as to what Im missing.
On a side note, the html code seems rather redundant with the mouseover and mouseout events, is repeating the file path really necessary if its already in the Javascript?
Thanks for the input

Kor
06-17-2008, 12:15 PM
Try this, for your case:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript">
function rollOn(obj){
obj.src=obj.src.replace(/.png/,'blue.png');
}
function rollOf(obj){
obj.src=obj.src.replace(/blue.png/,'.png');
}
</script>
</head>
<body>
<img src="http://whichever/home.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)">
<img src="http://whichever/forclosures.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)">
....
</body>
</html>

auslin
06-17-2008, 12:27 PM
Hi there,

There's one problem I can see - to create a new Image object, the correct syntax is:

homewhite = new Image();
or homewhite = new Image;

Note the case - Image, not image. That may fix the problem.

Regarding the verbose URLs, you can certainly shorten them in the main JavaScript, e.g.

var url1 = "http://i95.photobucket.com/albums/l136/surreal5335/RE%20site/";
homesite.src = url1 + "home.png";
homeblue.src = url1 + "homeblue.png";
etc.

But I don't think there's anything possible in the inline event handlers - the full URL must go into each event handler.

Hope this helps. :)

Kor
06-17-2008, 12:46 PM
But I don't think there's anything possible in the inline event handlers - the full URL must go into each event handler.

It is possible, but it is not a wise idea. It is better to separate the content from the behavior and presentation. Usually a handler should call a function, and the javascript function should be rather placed inside the HEAD section.

surreal5335
06-17-2008, 09:14 PM
The code that suggested to try:



function rollOn(obj){
obj.src=obj.src.replace(/.png/,'blue.png');
}
function rollOf(obj){
obj.src=obj.src.replace(/blue.png/,'.png');
}
</script>
</head>
<body>
<img src="http://whichever/home.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)">
<img src="http://whichever/forclosures.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)">

I am not sure as to where I should place the url for the images in there. Could you please specify?
Thanks a lot

Kor
06-18-2008, 09:53 AM
ah, c'mon... simply use your url


<img src="http://95.photobucket.com/albums/l136/surreal5335/RE&#37;20site/home.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)">
<img src="http://i95.photobucket.com/albums/l136/surreal5335/RE%20site//forclosures.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)">
...

surreal5335
06-18-2008, 06:30 PM
well I new about that one, but I guess Im surprised to see that the javascript in the <head> tag doesnt require the path as well. Infact the path for the mouseover image is no where in the code. Should I add this in on top of the code I already have?



homewhite = new image ();
homeblue = new 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";

Kor
06-18-2008, 07:13 PM
Infact the path for the mouseover image is no where in the code.
Oh, but it is. The argument this (passed to the function rollOn()) is a self reference of the HTML element, in your case, each IMG element. A HTML element is nothing but an object, and, as any object, it bears all his properties. An IMG elements bears also his SRC attribute/property. The url of your image is obj.src

You don't need to add anything. Just insert in each your IMG elements:

onmouseover="rollOn(this)" onmouseout="rollOff(this)"

and put that function, in the HEAD of the document, the same I did in my example.

surreal5335
06-18-2008, 10:07 PM
Thank you very much for your help, It works now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum