Oppure

Loading
15/11/09 15:16
Marininho
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="ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></…;
<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>
aaa
15/11/09 18:57
Mte90
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?
aaa