Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - Problema con un codice Html/javascript
Forum - Javascript - Problema con un codice Html/javascript

Avatar
Marininho (Normal User)
Newbie


Messaggi: 1
Iscritto: 15/11/2009

Segnala al moderatore
Postato alle 16:16
Domenica, 15/11/2009
Ho preso questo codice dal web. Si tratta di un menù con visualizzazione di immagini quando passi sulle voci.
Più o meno capisco cosa c'è scritto, ma ho un problema.. Nella parte che ho messo in grassetto corsivo, ho provato ad inserire i link delle pagine che ogni voce mi deve aprire. Il fatto è che quando li inserisco non mi funziona più la visualizzazione delle immagini al passaggio del cursore. Dov'è che sbaglio :d
Grazie in anticipo per la risposta...

body {
  background: #eee;
  font-size: 62.5%;
  font-family: helvetica, arial, sans-serif;
}

.zoomoutmenu {
  border: 0.5em solid #fff;
  position: relative;
  height: 23.5em;
  width: 50em;
  margin: 0 auto;
}

.panels {
  height: 23.5em;
  width: 50em;
  overflow: hidden;
}

.tabs {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.tabs li {
  float: left;
  display: block;
  width: 10em;
  background-color: #fff;
  text-align: center;
}

.tabs li a {
  padding: 0.2em;
  display: block;
  text-decoration: none;
  color: #000;
  border-top: 5px solid #fff;
  font-size: 1.3em;
}

.tabs li a:hover {
  border-top: 5px solid #333;
  background-color: #666;
  color: #fff;
}

.panel {
  background: #ccc;
  padding: 1em;
  height: 21.5em;
  position: relative;
}

.panel h2 {
  font-size: 3em;
  color: #fff;
  font-family: Garamond, times, serif;
  padding: 1em;
  margin: 0;
  text-align: right;
}

#one {
  background: url(one.jpg) no-repeat center center;
}

#two {
  background: url(two.jpg) no-repeat center center;
}

#three {
  background: url(three.jpg) no-repeat center center;
}

#four {
  background: url(four.jpg) no-repeat center center;
}

#five {
  background: url(five.jpg) no-repeat center center;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.m ...;
<script type="text/javascript" charset="utf-8">
    $.fn.zoomtabs = function (zoomPercent, easing) {
        if (!zoomPercent) zoomPercent = 10;
        
        return this.each(function () {
            var $zoomtab = $(this);
            var $tabs = $zoomtab.find('.tabs');
            var height = $tabs.height();
            
            var panelIds = $tabs.find('a').map(function () {
                return this.hash;
            }).get().join(',');
            
            $zoomtab.find('> div').scrollTop(0);
            
            var $panels = $(panelIds);
            var images = [];
            
            $panels.each(function () {
                var $panel = $(this),
                    bg = ($panel.css('backgroundImage') || "").match(/url\s*\(["']*(.*?)['"]*\)/),
                    img = null;
                
                if (bg !== null && bg.length && bg.length > 0) {
                    bg = bg[1];
                    img = new Image();
                    
                    $panel.find('*').wrap('<div style="position: relative; z-index: 2;" />');                    
                    $panel.css('backgroundImage', 'none');
                    
                    $(img).load(function () {
                        var w = this.width / 10;
                        var wIn = w / 100 * zoomPercent;
                        var h = this.height / 10;
                        var hIn = h / 100 * zoomPercent;
                        var top = 0;
                        
                        var fullView = {
                            height: h + 'em',
                            width: w + 'em',
                            top: top,
                            left: 0
                        };
                                                
                        var zoomView = {
                            height: (h + hIn) + 'em',
                            width: (w + wIn) + 'em',
                            top: top,
                            left: '-' + (wIn / 2) + 'em'
                        };
                        
                        $(this).data('fullView', fullView).data('zoomView', zoomView).css(zoomView);

                    }).prependTo($panel).css({'position' : 'absolute', 'top' : 0, 'left' : 0 }).attr('src', bg);
                    
                    images.push(img);
                }
            });
            
            function zoomImages(zoomType, speed) {
                $(images).each(function () {
                    var $image = $(this);
                    if ($image.is(':visible')) {
                        $image.stop().animate($image.data(zoomType), speed, easing);
                    } else {
                        $image.css($image.data(zoomType), speed);
                    }
                });
            }
                        
            $tabs.height(0).hide(); // have to manually set the initial state to get it animate properly.
            
            // this causes opear to render the images with zero height and width for the hidden image
            // $panels.hide().filter(':first').show();
            var speed = 200;
            
            $zoomtab.hover(function () {
                // show and zoom out
                zoomImages('fullView', speed);
                $tabs.stop().animate({ height : height }, speed, easing);
            }, function () {
                // hide and zoom in
                zoomImages('zoomView', speed);
                $tabs.stop().animate({ height : 0 }, speed, easing, function () {
                  $tabs.hide();
                });
            });
            
            var hoverIntent = null;
            $tabs.find('a').hover(function () {
                clearTimeout(hoverIntent);
                var el = this;
                hoverIntent = setTimeout(function () {
                    $panels.hide().filter(el.hash).show();
                }, 100);
            }, function () {
                clearTimeout(hoverIntent);
            }).click(function () {
                return false;
            });
        });
    };

    $(function () {
        $('.zoomoutmenu').zoomtabs(15);
    });
</script>
    </head>
<body>
<h1>BBC Menu</h1>

<div class="zoomoutmenu">
    <ul class="tabs">
       <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
        <li><a href="#five">Five</a></li>

    </ul>
    <div class="panels">
      <div id="one" class="panel">
        <h2>Garden life</h2>
      </div>
      <div id="two" class="panel">
        <h2>Lego</h2>
      </div>
      <div id="three" class="panel">
        <h2>Berlin</h2>
      </div>
      <div id="four" class="panel">
        <h2>New York</h2>
      </div>
      <div id="five" class="panel">
        <h2>Hungary</h2>
      </div>        
    </div>
  </div>

PM Quote
Avatar
Mte90 (Member)
Guru


Messaggi: 1144
Iscritto: 25/03/2008

Segnala al moderatore
Postato alle 19:57
Domenica, 15/11/2009
Potevi dire che usavi jquery!
Di gallerie per le immagini per jquery ce ne sono tantissime se questa non funziona trovane un altra anche perchè da come hai detto tu non è che si capisce molto il problema.
Da dove hai preso questo codice?


http://www.mte90.net/
Kde, Debian e Programmazione web/Desktop!


Linux Counter.li #482442
PM Quote