8 Replies Latest reply on Mar 2, 2010 8:47 AM by MJ2516

    Rotating banner with multiple links?

    MJ2516 Level 1

      Beginner question~

      Is it possible to create a rotating banner with 3 or 4 links in Dreamweaver? I need to create a banner with automatically rotating images that each link to a different page. I don't know Flash. Is this possible to do in Dreamweaver?

      Thanks for any help.

        • 1. Re: Rotating banner with multiple links?
          Turnkeye Level 1

          You can create AJAX banner, all is needed is to copy and paste ready to use code.

           

          Here are detailed instructions and examples:

          http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

           

          Demo of the script is here: http://www.sohtanaka.com/web-design/examples/image-slider/

           

          All you need to place your content inside banner divs and include the banner JS to the html.

           

          ---

          http://turnkeye.com

          • 2. Re: Rotating banner with multiple links?
            ALsp Level 4

            If you can wait about a week, we'll be releasing a fully automated image/banner rotator extension. Here is sneak peek:

            http://www.projectseven.com/products/galleries/irm/testing/sneak-peek/

             

            If you're not familiar with PVII, we are the oldest and one of the largest developers of commercial Dreamweaver extensions - having been at it since 1998.

             

            If you don't have a budget, jQuery is probably overkill and the example cited earlier is not what I would call a banner rotator - it's a horizontal slider or "carousel" as they are commonly called - sort of like one of the other widgets we produce:

            http://www.projectseven.com/products/tools/horizontal-glider/examples/headlines/index.htm

             

            In any event, jQuery is a good solution if you are willing and able to do a little custom coding yourself - and it is, of course, free. If you have a development budget, our tools cannot be beat.

             

            Good luck to you.

             

            Al Sparber - PVII
            http://www.projectseven.com
            Dreamweaver Menus | Galleries | Widgets
            http://www.projectseven.com/go/hgm
            The Ultimate Web 2.0 Carousel

            • 3. Re: Rotating banner with multiple links?
              MJ2516 Level 1

              Thank for your response.We have no budget (I work for anon-profit) and I

              can't code beyond basic HTML.

              M

              • 4. Re: Rotating banner with multiple links?
                MJ2516 Level 1

                Hi,

                Thanks for your response. The example you provided show a horizontal

                sliding image, which is not what I need. I need an image to slowly fade

                into another image on top of it.

                Do you have any other suggestions?

                Would there be somewhere I could get Flash code I could copy and paste?

                Thanks for any help.

                M

                • 5. Re: Rotating banner with multiple links?
                  John Waller Adobe Community Professional & MVP

                  jQuery requires no more than basic HTML. Give it a go.

                  • 6. Re: Rotating banner with multiple links?
                    Turnkeye Level 1

                    Here is another script with fade effect:

                     

                    "A Simple jQuery Slideshow"

                     

                    http://jonraasch.com/blog/a-simple-jquery-slideshow

                     

                    You need to copy and paste the code, it is even better that flash (+ it is SEO freindly!)

                     

                    Let us know if you need any help.

                     

                     

                    ---

                    http://turnkeye.com

                    • 7. Re: Rotating banner with multiple links?
                      MJ2516 Level 1

                      Thanks for your help. Is it possible to link each image with a separate url?

                       

                      -


                      Turnkeye <forums@adobe.com> wrote:

                      Here is another script with fade effect:

                       

                      "A Simple jQuery Slideshow"

                       

                      http://jonraasch.com/blog/a-simple-jquery-slideshow

                       

                      You need to copy and paste the code, it is even better that flash (+ it is SEO freindly!)

                       

                      Let us know if you need any help.

                       

                       

                      ---

                      http://turnkeye.com

                      >

                      • 8. Re: Rotating banner with multiple links- Please help!
                        MJ2516 Level 1

                        I created an html file with the banner images;

                        ---------

                         

                        <div id="slideshow">
                        <img src="banner images/legis3.jpg" alt="" class="active" />
                        <img src="banner images/store_icon.jpg" alt="" />
                        <img src="banner images/tr_corner.jpg" alt="" />
                        </div>


                        ---------

                        I created a CSS file and applied it to the html. The images stacked on

                        top of each other- good;

                        ----------

                        @charset "utf-8";
                        /* CSS Document */

                         

                        #slideshow {
                            position:relative;
                            height:157px;
                            width: 220;
                        }

                         

                        #slideshow IMG {
                            position:absolute;
                            top:0;
                            left:0;
                            z-index:8;
                        }

                         

                        #slideshow IMG.active {
                            z-index:10;
                        }

                         

                        #slideshow IMG.last-active {
                            z-index:9;

                        ------------

                         

                        I'm not sure what to do with the remaining jQuery code. I created a new

                        javascript file;

                         

                        ------------

                        function slideSwitch() {
                            var $active = $('#slideshow IMG.active');
                            var $next = $active.next();

                         

                            $next.addClass('active');

                         

                            $active.removeClass('active');
                        }

                         

                        $(function() {
                            setInterval( "slideSwitch()", 5000 );
                        });
                        function slideSwitch() {
                            var $active = $('#slideshow IMG.active');
                            var $next = $active.next();

                         

                            $active.addClass('last-active');

                         

                            $next.css({opacity: 0.0})
                                .addClass('active')
                                .animate({opacity: 1.0}, 1000, function() {
                                    $active.removeClass('active last-active');
                                });
                        }

                         

                        $(function() {
                            setInterval( "slideSwitch()", 5000 );
                        });
                        function slideSwitch() {
                            var $active = $('#slideshow IMG.active');

                         

                            if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

                         

                            var $next =  $active.next().length ? $active.next()
                                : $('#slideshow IMG:first');

                         

                            $active.addClass('last-active');

                         

                            $next.css({opacity: 0.0})
                                .addClass('active')
                                .animate({opacity: 1.0}, 1000, function() {
                                    $active.removeClass('active last-active');
                                });
                        }

                         

                        $(function() {
                            setInterval( "slideSwitch()", 5000 );
                        });

                        ----------------

                        I added a behavior to the HTML file. I added "Call Javascript" on load, and browsed to the javascript file in a desktop folder with all the other elements. The final HTML code was;

                        -----------------

                        <link href="banner images/banner.css" rel="stylesheet" type="text/css">
                        <script type="text/javascript">
                        <!--
                        function MM_callJS(jsStr) { //v2.0
                          return eval(jsStr)
                        }
                        //-->
                        </script>

                         

                        <div id="slideshow">
                            <img src="banner images/wiseye_corner_legis3.jpg" alt="" class="active" onClick="MM_callJS('banner.js')" /><img src="banner images/DVD_store_icon.jpg" alt="" /><img src="banner images/wiseye_tr_corner_cpn2010.jpg" alt="" />
                        </div>

                         

                        -----------------

                        The preview doesn't rotate.

                        Can anyone tell me how to apply the jQuery code, and any correction to the code.

                        The final banner needs a separate link with each image.

                        Thanks for any and all help.