Slideshow che cambia col mouseover sul menù

akela86

Slideshow che cambia col mouseover sul menù

Spero possiate aiutarmi, avrò installato 4-5 slideshow per un committente che ogni volta pretende una cosa diversa ...
Mi servirebbe uno slideshow per immagini e testo che cambi quando si poggia il mouse sui tasti dei menù, in pratica per mostrare l'anteprima delle pagine a cui portano.
Qualcuno conosce qualche script che può fare al caso mio, senza smanettarci troppo sù magari, preferibilmente che sfrutti jQuery?

Grazie in anticipo per le eventuali risposte.

ayrton2001

Ciao Akela86,
potresti illustrare meglio il funzionamento?
E' uno slideshow, quello che ti serve, che in più faccia questa anteprima, oppure ti necessita solo l'anteprima?

bonzetto

se menu e slideshow sono abbastanza vicini, potresti usare addirittura solo il css impostando una background image diversa per ogni pulsante del menu, non so se mi sono spiegato.

Cioè ogni voce del menu sara di una classe diversa a cui sarà associato nel css su :hover il cambiamento dello sfondo dell'immagine che starà sopra o sotto di essa

digital.daigor

Se hai una pagina che rimane statica per parecchio, meglio che ti arrangi con div e JS...


<style>
.SlideContainer{
	width:500px;
	height:250px;
}
.SlideCont{
	position:absolute;
	width:100%;
	height:100%;
	width:500px;
	height:250px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

function SlideTab()
{
	var count_slides = 0;
	$('#SlideContainer .SlideCont').each(function(){
		
		$(this).hide();
		$(this).attr({id: 'Slide'+count_slides});
		
		var chi_chiama = $(this).attr('nome');
		
		$('*[chiama="'+chi_chiama+'"]').mouseover(function(){
			$('.SlideCont').fadeOut();
            $('*[nome="'+chi_chiama+'"]').fadeIn();
        });
		count_slides += 1;
	});
}

</script>
<div id='SlideContainer' class='SlideContainer'>
	<div class="SlideCont" nome='prima' style="background:url(http://t2.gstatic.com/images?q=tbn:ANd9GcRSsrbsdKfMAh3s_xjo8uvMxbuOJOOAD2pIDM45zXJzcEkjByfOQb49T3aH0w) repeat;">
    	<div class="SlideText" >Testo 1</div>
    </div>
    <div class="SlideCont" style="background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcScxpvSw4SuO7x6KWIuqHXKdLYT4XyRxQUdhgzfzRFanfZ4ByXHorV8CQIEqQ) repeat;" nome='due'></div>
    <div class="SlideCont" nome='biscotto' style="background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcTUfwx6BRb0eeQx561hGa1e354CH7Ax0VVS-Zk2NUdMsy3LVYi-aPzJuvoe) repeat;">
    	<div class="SlideText" >Testo 3</div>
    </div>
</div>
<button chiama='biscotto'>Biscotto</button>
<a href='javasctip:void(0)' chiama='due'>Due</a>
<div chiama='prima'>Prima</div>
<script>
SlideTab();
</script>

Dimmi se questa che ti ho fatto va bene!