Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    rollover problems

    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
    Code:
    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:
    Code:
    <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

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try this, for your case:
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by auslin View Post
    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.
    Last edited by Kor; 06-17-2008 at 01:49 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    The code that suggested to try:

    Code:
    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

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ah, c'mon... simply use your url
    Code:
    <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)">
    ...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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?

    Code:
    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";

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by surreal5335 View Post
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    surreal5335 (06-18-2008)

  • #9
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    Smile

    Thank you very much for your help, It works now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •