effetto rollover come su html.it

[equiweb.it]

ciauz a tutti, premetto che ho cercato sia in rete che qui nel forum ma non sono riuscito a trovare nessun esempio simile.
tutti glie sempi di rollover su pulsanti eran costituiti da un immagine che conteneva i 3 stati (over, attivo, out) opppure il bottone era completamente realizzato con i css.
io invece vorrei realizzare dei pulsanti come qui sopra... cioè... scrivere il testo che deve visualizzare in una lista, e poi creare solamente le immagini che creino i bordi destro e sinistro.
al passaggio del mouse deve cambiare sia l'immagine del bordo destro, sia quello del bordo sinistro e sia il colore di sfondo (magari impostato con un altra img) del bottone...

qualcuno ha qualche link utile dove poter vedere qualche esempio?

ciauz e grazie davvero a tutti

[equiweb.it]

olè...spulciando per bene l'elencod elle pillone ho trovato questo interessante articolo
http://www.gdesign.it/pages/howto/ar...ss/slidcss.php

il quale spiega come creare l'immagine di destra e di sinistra....quell'esempio sarebbe perfetto per me..
ora il mio problema è...
come fare cambiare entrambe le immagini e lo sfondo centrale, al passaggio del mouse sul bottone?


ciauz e grazie a tutti

[equiweb.it]

ce l'ho quasi fatta....adesso ho davvero bisogno del vostro aiuto...
il codice originale era

BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
	FONT-SIZE: small
}
#header {
	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#header LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header A {
	PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
	FLOAT: none
}
#header A:hover {
	COLOR: #333;
}
#header #current {
	BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
	BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}

io ho aggiunto questa parte...

BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
	FONT-SIZE: small
}
#header {
	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#header LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header A {
	PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
	FLOAT: none
}
#header A:hover {
	COLOR: #333;
BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333  

}
#header #current {
	BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
	BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}

ora...al passaggio del moouse mi cambia l'immagine di destra...
ma non riesco a cambiare quella di sinistra!
qualcuno ha qualche suggeirmento?
nn ditemi che devo usare js ... il problema è che sto proprio cercando di fare tutto senza l'utilizzo di js

ciauz e grazie a tutti

[equiweb.it]

l'ho trovato!!!

ecco il link della guida http://www.gdesign.it/pages/howto/ar...2/slidcss2.php


l'unico esempio che sembra funzionare con IE7 è l'8a
io credo proprio che userò quello...è perfetto!
se qualcuno ha qualche commento...ben volentieri

ciauzzz

[Another-Life]

Questa tecnica alla fine per quanto riguarda il peso del documento è migliore rispetto alla tecnica del fast rollovers?

[equiweb.it]

nn saprei... io nn me ne intendo affatto...
aspettiamo la risposta di qualche guru :-)

ciauz

[Another-Life]

Non serve un guru....se avessi tempo le metterei a confronto....te lo chiesto solo perchè credevo che tu le avessi gia provate entrambe^^