Ciao A tutti!
Avrei bisogno di un'aiuto ho un'animazione da fare,
ed è strutturata su 3 "livelli"
1°livello: background;
2°livello: ci sono 2 immagini che dovranno apparire, quando mouseover, ma che resteranno semi coperta dal 3°livello.
3°livello: un immagine in primo piano con il logo aziendale.
qui vi posto il codice del lavoro svolto fin'ora, ma ho dei seri problemi con JQuery.
Non funziona fadeIn ne fadeOut, anche se in realtà volevo fare entrare le due immagini del 2°livello ruotando... ma quello sarà più avanti.
Codice PHP:<html>
<head>
<style>
#container{width:1024px; height:768px; margin:0 auto; background-image:url(img/back.png); background-repeat:no-repeat; background-position:top left; position:relative}
#autom, #autom2{width:512px; height:500px; float:left;}
#trasm, #trasm2{width:512px; height:500px; float:left;}
#autom img{/* background-image:url(img/autom2.png); background-repeat:no-repeat; background-position:top right;*/ display:none}
#trasm img{/* background-image:url(img/trasm2.png); background-repeat:no-repeat; background-position:top left;*/ display:none}
#base{width:1024px; height:768px; margin:0 auto; background-image:url(img/base.png); background-repeat:no-repeat; background-position:bottom center; margin-top:-500px; position:absolute;}
.clear{clear:both};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
/*function mostra(img){
$(img).fadeIn('fast');
}
function nascondi(img){
$(img).fadeOut('fast');
}*/
$("#base#autom2").mouseover(function(){
$("#img_autom").fadeIn();
}).mouseout(function(){
$("#img_autom").fadeOut();
});
$("#base#trasm2").mouseover(function(){
$("#img_trasm").fadeIn();
}).mouseout(function(){
$("#img_trasm").fadeOut();
});
</script>
<title>Documento senza titolo</title>
</head>
<body>
<div id="container">
<div id="autom">[img]img/autom2.png[/img]</div>
<div id="trasm">[img]img/trasm2.png[/img]</div>
<div class="clear"></div>
<div id="base">
<div id="autom2"></div>
<div id="trasm2"></div>
</div>
</div>
</body>
</html>
Rispondi quotando
