SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Rollovers

    Hey all,

    I just read Kevin Yank's article on creating image rollovers, and implemented the code on my website.

    However, I keep getting several errors.

    Here's the code that sits in the <HEAD> section of the page:
    Code:
    <script language="JavaScript">
    <!-- Hide from older browsers
    
       var about_off = "images/layout/about_off.gif";
       var about_on = "images/layout/about_on.gif";
       
       var progs_off = "images/layout/progs_off.gif";
       var progs_on = "images/layout/progs_on.gif";
       
       var resources_off = "images/layout/resources_off.gif";
       var resources_on = "images/layout/resources_on.gif";
       
       var tools_off = "images/layout/tools_off.gif";
       var tools_on = "images/layout/tools_on.gif";
       
       var clients_off = "images/layout/clients_off.gif";
       var clients_on = "images/layout/clients_on.gif";
       
       var tests_off = "images/layout/tests_off.gif";
       var tests_on = "images/layout/tests_on.gif";
       
       var services_off = "images/layout/services_off.gif";
       var services_on = "images/layout/services_on.gif";
    
    function loadImages() {
      if (document.images) {
        var about_off.src = "images/layout/about_off.gif";
        var about_on.src = "images/layout/about_on.gif";
        
        var progs_off.src = "images/layout/progs_off.gif";
        var progs_on.src = "images/layout/progs_on.gif";
        
        var resources_off.src = "images/layout/resources_off.gif";
        var resources_on.src = "images/layout/resources_on.gif";
        
        var tools_off.src = "images/layout/tools_off.gif";
        var tools_on.src = "images/layout/tools_on.gif";
        
        var clients_off.src = "images/layout/clients_off.gif";
        var clients_on.src = "images/layout/clients_on.gif";
        
        var tests_off.src = "images/layout/tests_off.gif";
        var tests_on.src = "images/layout/tests_on.gif";
        
        var services_off.src = "images/layout/services_off.gif";
        var services_on.src = "images/layout/services_on.gif";
      }
    }
    
    function activate(imgName) {
      if (document.images) {
        if ( eval(imgName + "_on.complete") ) {
          document.images[imgName].src = eval(imgName + "_on.src");
        }
      }
    }
    
    function deactivate(imgName) {
      if (document.images) {
        if ( eval(imgName + "_off.complete") ) {
          document.images[imgName].src = eval(imgName + "_off.src");
        }
      }
    }
    
    // End script hiding -->
    </script>
    And the way it's called in the <BODY> tag:
    Code:
    <body bgcolor... onLoad="loadImages()">
    And finally how it's called on the page:
    Code:
    <a href="about/index.html" onMouseOver="activate('about')" onMouseOut="deactivate('about')"><img src="images/layout/about_off.gif" height="17" width="53" alt="About" name="about" border="0"></a>
    <a href="progs/index.html" onMouseOver="activate('progs')" onMouseOut="deactivate('progs')"><img src="images/layout/progs_off.gif" height="17" width="92" alt="Programs" name="progs" border="0"></a>
    <a href="resources/index.html" onMouseOver="activate('resources')" onMouseOut="deactivate('resources')"><img src="images/layout/resources_off.gif" height="17" width="135" alt="Free Resources" name="resources" border="0"></a>
    <a href="tools/index.html" onMouseOver="activate('tools')" onMouseOut="deactivate('tools')"><img src="images/layout/tools_off.gif" height="17" width="61" alt="Tools" name="tools" border="0"></a>
    <a href="clients/index.html" onMouseOver="activate('clients')" onMouseOut="deactivate('clients')"><img src="images/layout/clients_off.gif" height="17" width="72" alt="Clients" name="clients" border="0"></a>
    <a href="testimonials/index.html" onMouseOver="activate('tests')" onMouseOut="deactivate('tests')"><img src="images/layout/tests_off.gif" height="17" width="119" alt="Testimonials" name="tests" border="0"></a>
    <a href="services/index.html" onMouseOver="activate('services')" onMouseOut="deactivate('services')"><img src="images/layout/services_off.gif" height="17" width="73" alt="Services" name="services" border="0"></a>
    I have a feeling the errors have to deal with the onLoad attribute in the <BODY> tag because it was working just fine until I put this in.

    Any help is greatly appreciated,

    Note: Please note that while I'm relatively comfortable with JavaScript, I do not know all that much. Please provide as much documentation and code as possible. Thanks.
    Last edited by JustForWebmasters; Mar 5, 2002 at 15:02.
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right in my face and I still didn't see it right away.

    Take the var from infront of the name_name.src thing like this

    test_off.src = "images/layout/about_off.gif";
    test_on.src = "images/layout/about_on.gif";

    progs_off.src = "images/layout/progs_off.gif";
    progs_on.src = "images/layout/progs_on.gif";

    that should fix the problem.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Maelstrom,

    Thanks for your help. While I'm not getting any errors, I'm not getting any rollovers either. Here's part of the JavaScript code:
    Code:
    function loadImages() {
      if (document.images) {
        about_off.src = "images/layout/about_off.gif";
        about_on.src = "images/layout/about_on.gif";
        
        progs_off.src = "images/layout/progs_off.gif";
        progs_on.src = "images/layout/progs_on.gif";
        
        resources_off.src = "images/layout/resources_off.gif";
        resources_on.src = "images/layout/resources_on.gif";
        
        tools_off.src = "images/layout/tools_off.gif";
        tools_on.src = "images/layout/tools_on.gif";
        
        clients_off.src = "images/layout/clients_off.gif";
        clients_on.src = "images/layout/clients_on.gif";
        
        tests_off.src = "images/layout/tests_off.gif";
        tests_on.src = "images/layout/tests_on.gif";
        
        services_off.src = "images/layout/services_off.gif";
        services_on.src = "images/layout/services_on.gif";
      }
    }
    Thanks,
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this when defining the variables (another thing right in my face but I didn't catch it)

    about_off=new Image();
    about_off.src = "images/layout/about_off.gif";

    you will have to do that for all of them. Here is a good reference point for this very thing.

    http://www.sitepointforums.com/showt...threadid=30006
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  5. #5
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maelstrom,

    Last night I thought that I had posted a note saying that I did not copy the code correctly...for some reason it didn't go through.

    Thanks for your help though!
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  6. #6
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by JustForWebmasters
    Maelstrom,

    Last night I thought that I had posted a note saying that I did not copy the code correctly...for some reason it didn't go through.

    Thanks for your help though!
    My pleasure. Is it working for you now?
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  7. #7
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it is.

    Thanks again!
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  8. #8
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    looping to save size

    You could use a loop to do this quite easily.

    instead of using each name/src pair individually:
    name an array, and fill it with the image names.
    Then use this to generate the image lists.

    eg: (not tested)
    Code:
    if (document.images){
    var images=new Array('cat','dog','fish','rat');
    var states=new Array('','_o','_d')'
    for (i=0;i<images.length;i++){
     for (a=0;a<states.length;a++){
      eval('var '+images[i]+states[a]+'=new Image();');
      eval(images[i]+states[a]+'.src =
        "/path/images/'+images[i]+states[a]+'.gif";';
      }
     }
    }
    this means each image would have three states.
    (i call them static, over, and down).

    You could then use a basic handler for all states:
    Code:
    var de=document.getElementById;
    function handle(i,s){
          de(i).src=eval(i+s+'.src');
          }
    
    <img src="/gfx/cat.gif" id="cat"
         onmouseover = "handle(this.id,'_o');"
         onmouseout  = "handle(this.id,'');"
         onmousedown = "handle(this.id,'_d');"
         onmouseup   = "handle(this.id,'_o');">
    Now this above tag is fairly lengthy... SO if you wanted to use the states technique on a few images.. you COULD create a method to create the states for you.

    if you used a class to handle them .. it would be a quick way of looping.
    So... foreach image you want to have a staged state system you give it a class of "HANDLE".

    You then loop on page load and assign the handlers:
    Code:
    for (i=0;i<document.images.length;i++){
     var iref=document.images[i];
     if (iref.className == "HANDLE"){
      iref.onmouseover = "handle(this.id,'_o')";
      iref.onmouseout  = "handle(this.id,'')";
      iref.onmousedown = "handle(this.id,'_d')";
      iref.onmouseup   = "handle(this.id,'_o')";
      }
     }
    **** incidently.. this techinique can be used with the document.images[i].complete technique as a page loader... If i get enough requests i'll go into that in another thread. ****

    This is all off the top of my head, so i'm not sure it would work copied and pasted, but the theory is sound, and works on many sites i've done.

    Hope this helps.

    Flawless
    Last edited by Flawless_koder; Mar 16, 2002 at 05:12.
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  9. #9
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Flawless,

    That seems a bit over my head. I think I'll stick with what I have. Thanks for the help though!
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  10. #10
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorry it's like that

    I keep fogetting to use quotes to nest my code properly.
    Perhpahs that way you'd get what i meant.

    JS isn't hard.. you just have to get used to some of the shortcuts.

    I've edited my above post to have nesting. Take another look at it and see if it makes sense. If it doesn't ... tell me what you don't get... The site is here to help people learn.. i guess.. not just answer specific quesiton.


    Flawless
    Last edited by Flawless_koder; Mar 16, 2002 at 05:14.
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  11. #11
    SitePoint Evangelist
    Join Date
    Dec 2000
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you maybe explain it in more detail? Like what each thing means? Or, even comment the script?

    Thanks,
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  12. #12
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Sorry it's like that

    Originally posted by Flawless_koder
    I keep fogetting to use quotes to nest my code properly.
    Perhpahs that way you'd get what i meant.

    JS isn't hard.. you just have to get used to some of the shortcuts.

    I've edited my above post to have nesting. Take another look at it and see if it makes sense. If it doesn't ... tell me what you don't get... The site is here to help people learn.. i guess.. not just answer specific quesiton.


    Flawless
    Just wanted to say nice coding Flawless...I will let you explain since it is yours but not too many people using functions correctly for good reusability.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  13. #13
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you

    That's a nice compliment Maelstrom... Thank you

    I find Javascript is under appreciated, and a LOT more could be done with it a lot of the time.
    Code:
    if (document.images){
    var images=new Array('cat','dog','fish','rat');
    var states=new Array('','_o','_d')'
    for (i=0;i<images.length;i++){
     for (a=0;a<states.length;a++){
      eval('var '+images[i]+states[a]+'=new Image();');
      eval(images[i]+states[a]+'.src =
        "/path/images/'+images[i]+states[a]+'.gif";';
      }
     }
    }
    Line 0: images is an array with the names/id's of the images to be used as buttons. The actual src should be named this as well.
    Line 1: states are the three states of the image. normal, over, and down.
    This means there should be a cat.gif cat_o.gif and a cat_d.gif corresponding to the standard three states of a button.
    lines onward:
    The two for loops loop through each of the images, and then for each image, loops through each of the states and creates an image object .. and sets a src for it.
    Normally this would be used to the appendChild, but in our case we're simply going to use it to preload the images and store the src's.

    The first handler makes it fairly simple to understand what you're doing... you just put onmouse'events in the image tags you want and the function is called normally.
    However if you want to keep src down and be tidy, you *could* give the images a class of HANDLE.

    Code:
    for (i=0;i<document.images.length;i++){
     var iref=document.images[i];
     if (iref.className == "HANDLE"){
      iref.onmouseover = "handle(this.id,'_o')";
      iref.onmouseout  = "handle(this.id,'')";
      iref.onmousedown = "handle(this.id,'_d')";
      iref.onmouseup   = "handle(this.id,'_o')";
      }
     }
    Finally the function to handle the three states:



    This loops through all the images in the document hierarchy, and if it finds an image (short ref'ed by iref) with a class of HANDLE it will give the onmouse'event properties the right values.

    Code:
    var de=document.getElementById;
    function handle(i,s){
          de(i).src=eval(i+s+'.src');
          }
    I normally set 'de' as getElementById for use throughout my functions. it's 5+ compliant and i find it saves me a lot of time.
    Failing that you set it as document.all if !document.getElementById.

    handle then takes i (the id of the calling element) and s (the state) and sets the src of the calling image to the src of the id + the state.
    so since in our first loop we set
    cat_o.src="/images/cat_o.gif";
    that means the src of the image of the will be the same as the image we created earlier.

    you don't NEED to send it i.. you could use:

    Code:
    function handle(s){
          var i=window.event.srcElement.id;
          de(i).src=eval(i+s+'.src');
          }
    I hope this has helped to clear some of the areas up.

    Good luck and i hope this saves you a LOT of code

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  14. #14
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have to agree with your assesment of javascript. Althoguh since I have started using PHP I have used javascript less and less leaving it to validation and animation techniques. Although some of the report software I am writing are creating some interesting choices for me. So I think I will be diving into some printer options. Anyways cheers on the tutorial.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  15. #15
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anytime

    Well believe it or not, Javascript is just a hobby really.
    I do devel in directX online and other stuff.
    But really my job is a Postgres <- Perl/Mason -> Cobol -> SRVDB (or other) programmer.

    I like using Javascript though, it's very tidy.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


Bookmarks

Posting Permissions

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