Discussion :

[delas]

salut,

je me demandais s'il existait une methode facile a mettre en ouvre pour donner un effet de 3D sur mes boutons, lorsqu'un utilisateur clic dessus.

Pour l'instants, mes boutons se resument en une simple image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<html:button property="avance" value="&nbsp;" styleClass="rechercheavance" onclick="document.location.href='./AdvanceSearch.jsp'"/>

et dans ma css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
input.rechercheavance{
	display: block;
	width: 150px;
	height: 35px;
	background-image: url(../images/buttons/rechercheavance.png);
background-repeat: no-repeat;
	border: 0;
	text-align: center;
	FONT-SIZE: 10px
	text-decoration: none;
	cursor:hand;
}

est-ce que je dois forcement créer une nouvelle image avec des ombres et tout?

merci de vos idées

[titoumimi]

CSS à appliquer à tes images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.boutonup {
	border:outset 2px;
	background-color: #3674AB;
     }
.boutondown {
	border :inset 2px;
	background-color: #3674AB;
     }

et ça se gère comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="image" src="toto.gif" alt="coucou" name="azerty" class="boutonup" onmousedown="this.className='boutondown';" onmouseup="this.className='boutonup';" onmouseout="this.className='boutonup';">

(Merci SF au passage de m'avoir filé cette astuce y'a quelques temps )

[delas]

wé sympa cette solution!

facile a mettre en oeuvre, sauf qu'il faut que je remplace tous mes boutons pas des images dans mes 364 313 584 JSP.....

ctrl+R power

merci

[delas]

et petite question qui m'arrangerais :

on peut pas mettre quelque chose du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onmousedown="this.className='boutondown';"

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onmousedown="this.className='boutondown';"

?

[delas]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onmousedown="this.style.border='inset 2px;';"

ca marche!

encore merci

[delas]

pour ceux qui veulent garder les boutons, pas mettre d'image, qui sont sous ie6 voila une solution qui marche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<html:button property="avance" value="&nbsp;" 
styleClass="rechercheavance" onclick="document.location.href='./AdvanceSearch.jsp'" />

dans le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
input.rechercheavance{
	display: block;
	width: 150px;
	height: 35px;
	background-image: url(../images/buttons/rechercheavance.png);
	background-repeat: no-repeat;
	border: 0;
	text-align: center;
	FONT-SIZE: 10px
	text-decoration: none;
	cursor:hand;
	behavior:url(/ecrm/theme/buttonEffect.htc);
}

et dans mon fichier buttonEffect.htc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<public:component>
<script>
element.onmouseout=oute;
element.onmousedown=downe;
element.onmouseup=upe;
 
function oute(e){
this.style.border='inset 0px;';
}
 
function downe(e){
this.style.border='inset 2px;';
}
 
function upe(e){
this.style.border='inset 0px;';
}
 
</script>
</public:component>