8 Replies Latest reply: Mar 13, 2013 7:54 AM by osgood_ RSS

    Swap image behaviour

    matthew stuart Community Member

      Cor... I'm busy asking questions on here today!

       

      I'm just wondering, with the growth and dominance of CSS, is the swap image behaviour now a frowned upon method for user interaction to indicate that the image does something? Are there any drawbacks in using it?

       

      Thanks.

        • 1. Re: Swap image behaviour
          osgood_ CommunityMVP

          matthew stuart wrote:

           

          Cor... I'm busy asking questions on here today!

           

          I'm just wondering, with the growth and dominance of CSS, is the swap image behaviour now a frowned upon method for user interaction to indicate that the image does something? Are there any drawbacks in using it?

           

          Thanks.

          Are you talking about the built in Dreamweaver swap image behavoiur? If so I havent used it for years.

           

          If its a simple swap image I'll just use css hover or if its something more compliacted like a photo/thumbnail library using jQuery is a much cleaner approach.

           

          The drawback is it produces bloated and messy code which can be hard to troubleshoot depending on how many swaps you are doing.

          • 2. Re: Swap image behaviour
            Jon Fritz II CommunityMVP

            There are very few occasions where you wouldn't be able to use pure css in place of the DW Image Swap Behavior. Even a disjointed or remote image swap can be done relatively easily with css if you structure your site correctly.

             

            As Osgood mentions, the css version will almost always be lighter code-wise, also viewers can't turn off css in their browser like they can with javascript. So even the users who visit your site with .js disabled, will still be able to see your image changes.

            • 3. Re: Swap image behaviour
              matthew stuart Community Member

              It's this basically:

               

              http://egdev.co.uk/av

               

              Currently this is just a holding page for a responsive website, but because the navigation is all images, I wasn't quite sure if doing this in CSS was the best way forward as this would probably create as much code as the swap image behaviour. I can do the CSS route, but I assume I am going to have to create a class for each button which I thought might be a bit code heavy.

               

              Also, when you reduce the window down in size this menu disappears and a new menu that fits better in a small screen appears that is purely code and CSS... no images. I am trying to think if this will cause any problems, but I don't think so; what do you reckon?

              • 4. Re: Swap image behaviour
                Jon Fritz II CommunityMVP

                Yep, you would need a class or id for each button so you can define the background-image for each and a :hover state as well. This is one of the situations where the menu may be a bit heavier codewise in comparison to the .js version, but it will also be compatible with more browsers.

                 

                As for issues with the responsive layout, it shouldn't cause any problems. Right now it looks like the menu disappearance is controlled by css to begin with, so the same method will likely work just as well with an all css menu.

                • 5. Re: Swap image behaviour
                  matthew stuart Community Member

                  So by changing the menu to CSS, that would enable me to indicate the current page with the nav bar morre easily. If so, how would I acheive that?

                   

                  Just anothere thought on this though... if a user does have javascript turned off in their browser, wouldn't that also disable the respond.min.js effectively disabling the responsiveness of the site?

                   

                  Thanks for your advice.

                  • 6. Re: Swap image behaviour
                    osgood_ CommunityMVP

                    matthew stuart wrote:

                     

                    So by changing the menu to CSS, that would enable me to indicate the current page with the nav bar morre easily. If so, how would I acheive that?

                     

                     

                    There are a few ways to have a 'marker' page in css. The way I do it is by setting up a page specific css area on the related page iteself.

                     

                    So for instance your 'home' icon button html code and css might look something like this

                     

                    <li id="home"><a href="index.php"></a></li>

                     

                    #home a {

                    width: 60px; /* width of your home icon image */

                    height: 80px; /* height of your home icon image */

                    display: block;

                    background-image: url(navImages/home.gif);

                    background-repeat: no-repeat;

                    }

                     

                    #home a:hover {

                    background-image: url(navImages/home_hover.gif);

                    }

                     

                     

                    But you want to display the hover css effect on the 'home' page when a user is on it so you insert the below css in the <head> section of the 'home' page:

                     

                    <style type="text/css">

                    /*page specific css*/

                    #home a {

                    background-image: url(navImages/home_hover.gif);

                    }

                     

                    NOTE: The anchor tag for 'home' now has the home_hover.gif image set instead of the home.gif image.

                     

                    This makes the 'a' and 'a:hover' css the same so the page is 'marked' and there's no visible change when the home icon is moused over.

                    • 7. Re: Swap image behaviour
                      matthew stuart Community Member

                      Oh, I think I see what you mean.

                       

                      So, the way I have my menu set at the moment is as a separate include file (as is the CSS). So in order to make sure the correct marker is used, I simply add the correct marker CSS to the actual page which overides the external CSS.

                       

                      I like it. Simples!

                      • 8. Re: Swap image behaviour
                        osgood_ CommunityMVP

                        matthew stuart wrote:

                         

                        Oh, I think I see what you mean.

                         

                        So, the way I have my menu set at the moment is as a separate include file (as is the CSS). So in order to make sure the correct marker is used, I simply add the correct marker CSS to the actual page which overides the external CSS.

                         

                         

                         

                        Yes, that's it.