Skip navigation
Currently Being Moderated

Dreamweaver * effects. 2 questions

Jun 18, 2012 10:43 AM

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

 
Replies
  • Currently Being Moderated
    Jun 18, 2012 2:00 PM   in reply to harvey waxman

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2012 3:46 PM   in reply to harvey waxman

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

    Oh sure.

     

    N

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 9:21 AM   in reply to harvey waxman

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 12:00 PM   in reply to harvey waxman

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

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 1:16 PM   in reply to harvey waxman

    @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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points