Menu' JS con azione hover su immagini

[Lumdir]

Ciao a tutti mi chiamo Andrea.
Avrei bisogno di uno script JS che mi permetta di ottenere quanto segue:

Ho due immagini di una scatola (immaginate due parentesi quadre) tali [.jpg e ].jpg .
Queste due immagini sono attaccate in modo tale da formare la scatola completa [].
Al passaggio del mouse sopra a questa scatola le due immagini si devono allontanare lasciando al centro un DIV contenente del testo (per un menu') con magari il backgroundcoloro dello stesso colore delle immagini laterali in modo tale da dar la sensazione di un "prolungamento".

Per cui da:

[]

al passaggio del mouse diventa:

[ Contatti ]

Tuttavia di JS non conosco proprio una cicca... ho provato a scaricare qualche script di quelli presenti su HTML.it ma sebbene capisca, più o meno, il loro funzionamento dato che ho studiato programmazione, non riesco proprio a capirne la dinamica.

Potete aiutarmi??

[artorius]

carina come idea... Ho buttato giù una cosetta con MooTools, che mi sembra andare, bisogna vedere su explorer se ci sono problemi di visualizzazione, ma il funzionamento è simplerrimo.

<script type="text/javascript" src = "js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src = "js/mootools-1.2.4.2-more-yc.js"></script>

<script type="text/javascript">

window.addEvent('domready', function(){
    var opened = false;
    $("Test").set("os", $("Test").getSize().x);
    $("Test").addEvent('click', function(){
        var inner = this.getElement(".CenterParentesis");
        
        var iw = opened ? 0 : inner.get("mw").toInt();        
        var wa = opened ? this.get("os") : this.getSize().x + iw;
        
        this.tween("width", wa);
        inner.tween("width", iw);        
        
        opened = !opened;
    });
});

</script>

<style type="text/css">
    .AllParentesis{
        width: auto;
        height: 20px;
        width: 20px;
        cursor: pointer;
        overflow: hidden;
    }
    
    .LeftParentesis{
        background-color: #fff;
        float: left;
        width: 10px;
    }
    
    .RightParentesis{
        background-color: #fff;
        float: right;
        width: 10px;
    }
    
    .CenterParentesis{
        width: 0px;
        float:left;
        text-align: center;
    }
</style>

<div class = "AllParentesis" id = "Test">
    <div class = "LeftParentesis">
    [
    </div>
    <div class = "CenterParentesis" mw="150">
        Test di Scrittura
    </div>
    <div class = "RightParentesis">
    ]
    </div>
</div> 

[Lumdir]

ho trovato sul sito il file "mootools-1.2.4-core-yc.js" ma non riesco a trovare il tuo corrispondenza nella tabella "more" ... c'è troppa roba

[Lumdir]

Ok ho risolto, ho scaricato i due .js e li ho piazzati nella directory.

L'effetto è bellissimo e molto simile a quello che devo ottenere ma mi chiedevo se è possibile farlo passandoci sopra il mouse e non cliccando.

[artorius]

scusasse...

window.addEvent('domready', function(){
	$("Test").set("os", $("Test").getSize().x);
	$("Test").addEvents(
	{
		'mouseenter': function(){
			var inner = this.getElement(".CenterParentesis");
		
			var iw = inner.get("mw").toInt();		
			var wa = this.getSize().x + iw;
		
			this.tween("width", wa);
			inner.tween("width", iw);		
		},
		'mouseleave' : function(){
			var inner = this.getElement(".CenterParentesis");
		
			var iw = 0;		
			var wa = this.get("os");
		
			this.tween("width", wa);
			inner.tween("width", iw);		
			
		}
	});
});

[Lumdir]

Mamma mia, mi hai risolto un problemone in pochissimo tempo. Grazie tante!

Ora provo a sistemarlo come vorrei e se ho ancora difficoltà so dove postare!!

PS: ho provato con Explorer, la seconda immagine me la mette in basso a destra rispetto alla prima con il DIV centrale "scoperto".

[artorius]

quando c'è

var wa = this.getSize().x + iw;


aggiungici due pixel

var wa = this.getSize().x + iw + 2;