10 Replies Latest reply: Jun 19, 2012 2:20 PM by harvey waxman RSS

    Dreamweaver * effects. 2 questions

    harvey waxman Community Member

      I'm trying to change a swap image behavior so it fades when I click a word.  Tutorials show "effects" option which would do what I want but I use Dreamweaver 8 and I don't seem to have the effects option in my behaviors panel.  Am I missing something?

       

      JQuery is supposed to be 'simple' but I'm afraid I'm the simple one and can't seem to adapt it to what I want to do.

       

      Suggestions welcome.

       

      And when should one use <A>onMouseout  instead of onMouseout?

       

      Thanks

        • 1. Re: Dreamweaver * effects. 2 questions
          Nancy O. CommunityMVP

          jQuery is worth knowing how to use.  Very versatile and pretty easy to implement once you understand the basics.

          The demo below uses jQuery fadeTo on CSS Disjointed Rollovers.

          http://alt-web.com/DEMOS/jQuery-Disjointed-Image-Gallery.shtml

           

           

           

          Nancy O.

          • 2. Re: Dreamweaver * effects. 2 questions
            harvey waxman Community Member


            Thanks for the suggestion.  Before I try to adapt it, will it work with text as the trigger?

            • 3. Re: Dreamweaver * effects. 2 questions
              Nancy O. CommunityMVP

              Before I try to adapt it, will it work with text as the trigger?

              Oh sure.

               

              N

              • 4. Re: Dreamweaver * effects. 2 questions
                harvey waxman Community Member

                It looks simple but I guess I'm the simple one becaue I can't adapt the code to do what I want.

                 

                I have an image(1).  I want it to fade into another image(2) which is the exact same size. It could be either a mouseOver/mouseOut or a click on some text or an image(3) or even image(1).  I was hoping for a simple method to do this without having to buy a new DW.  I have DW8 and there are no built-in menu choices to do this. I believe CS3 can do this in the behavior panel.

                 

                Maybe using CSS opacity on image(2) to reveal underlying image(1) placed in a layer I suppose.

                 

                JQuery is clearly able to do it but even the basic tutorials assume too much in my case.  :-(

                • 5. Re: Dreamweaver * effects. 2 questions
                  Nancy O. CommunityMVP

                  It looks simple but I guess I'm the simple one because I can't adapt the code to do what I want.

                  Let's see your test page.

                   

                  CS3 is long gone.  The current DW release is CS6 which contains a bevy of new features including CSS Transitions.

                  http://tv.adobe.com/watch/digital-design-cs6/creating-css-transitions-in-dreamweaver-cs6/

                   

                   

                   

                  Nancy O.

                  • 6. Re: Dreamweaver * effects. 2 questions
                    harvey waxman Community Member

                    Thanks Nancy,

                     

                    (The link wouldn't play with Safari or Firefox)

                     

                    I've made some progress by trial and mostly error http://dinghydogs.com/indexJQuery.html  The central images work with mouseOver on my desktop.   I uploaded everything I edited so I have no explanation for the images not showing.

                     

                    (PS. found out what was wrong.  I named the images index......jpg.   and apparently that's a no no.)

                     

                     

                    Many puzzles:  The layers didn't line up when I did it manually or by the numbers  (top  and left).  I had to move them with the arrow keys and try over and over in the browser until they lined up.

                     

                    I still don't know how to make the same fade effect using text.

                     

                    Message was edited by: harvey waxman

                    • 7. Re: Dreamweaver * effects. 2 questions
                      Ken Binney CommunityMVP

                      Do not attempt to use Absolutely positioned divs for layout purposes.

                      http://www.apptools.com/examples/pagelayout101.php

                      • 8. Re: Dreamweaver * effects. 2 questions
                        harvey waxman Community Member

                        Thanks, but my main concern is for the divs that have only images, the two in the center of the page.  What and how would you suggest I change?

                         

                        Also, might you have an explanation of why I can't change the duration of the fade?  I tried changing the '1000' in the JQuery functions:

                         

                        $(this).stop().animate({opacity: "0.0"}, '1000');    but it made no difference at all.

                        • 9. Re: Dreamweaver * effects. 2 questions
                          Nancy O. CommunityMVP

                          @Harvey,

                          You don't need .animate for this.  Try copying & pasting code below into a new, blank document. 

                           

                          @Ken,

                          I'm using APDiv layers for the disjointed rollovers.  Normally I don't use APDivs except in special situations like this.

                           

                           

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                          <html xmlns="http://www.w3.org/1999/xhtml">
                          <head>
                          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                          <title>CSS Rollovers with jQuery fade</title>
                          
                          <!--link to latest jQuery core library-->
                          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
                          </script>
                          
                          <style type="text/css">
                          /**BEGIN DISJOINTED IMAGE ROLLOVERS**/
                          #rollover {
                          position:relative; 
                          margin-left: 550px; 
                          margin-top: 300px; 
                          width: 250px;
                          border: 1px solid silver;
                          }
                          #rollover ul li {list-style:none}
                          #rollover li a {color: #000}
                          #rollover a:hover {color:#C00;}
                          
                          /**images**/
                          #rollover span {
                          display:none;
                          position: absolute;
                          /**adjust position of images**/
                          left: 40px;
                          top: -125px;
                          /**optional image captions**/
                          font-size: 12px;
                          line-height: 1.2;
                          color:#666;
                          text-align: center;
                          }
                          /**Click on links text**/
                          #rollover h4 {
                          position: absolute;
                          /**adjust position**/
                          left: 40px;
                          top: -120px;
                          /**style text**/
                          font-size: 14px;
                          letter-spacing:-1px;
                          width: 100px;
                          }
                          /**END DISJOINTED ROLLOVER STYLES**/
                          </style>
                          </head>
                          
                          <body>
                          <!--begin disjointed rollovers. Change images and captions to your own.-->
                          <div id="rollover">
                          <h4>Click links below for details:</h4>
                          
                          <ul>
                          <li><a href="#">Some link</a><span><img src="Image1.jpg" alt=" " /><br />optional caption #1</span></li>
                          
                          <li><a href="#">Some link</a><span><img src="Image2.jpg" alt=" " /><br />optional caption #2</span></li>
                          
                          <li><a href="#">Some link</a><span><img src="Image3.jpg" alt=" " /><br />optional caption #3</span></li>
                          
                          <li><a href="#">Some link</a><span><img src="Image4.jpg" alt=" " /><br />optional caption #4</span></li>
                          </ul>
                          <!--end #rollovers --></div>
                          
                          
                          
                          <!--jQuery fade function, put this above the end of body tag-->
                          <script type="text/javascript">
                          $(document).ready(function(){
                           $("#rollover a").hover (function(){
                            $(this).next("span").fadeTo("slow", 1.00);
                            },function(){
                            $("#rollover span").fadeTo("normal", 0.00);
                          });
                          });
                          </script> 
                           </body>
                          </html>
                          

                           

                           

                          Nancy O.

                          • 10. Re: Dreamweaver * effects. 2 questions
                            harvey waxman Community Member

                            Hi Nancy,

                             

                            I really appreciate all your efforts but this didn't come close to what I was looking for and exhibited some bizarre effects to boot.  Maybe due to my version of DW.  I won't take up the time of the group explaining what happened but I had seen it before with other scripts copied from different  sites.

                             

                            Thanks again.