Oui, ça peut se comparer à des boutons radio... Mais bon, je voudrais définir mes boutons moi-même.
J'avais vu sur la toile qu'on pouvait faire un rond avec 'border-radius' et qu'il fallait que la taille soit définie à la moitié du carré qui pouvait le contenir.
Or 'border-radius' n'est pas reconnu par IE8 et je suis sous XP qui n'admet pas les versions supérieures à IE8.
J'ai un bout de code qui me convient quand à la gestion des boutons, mais ils s'obstinent à rester carrés.
voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv=Accept-Language CONTENT="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!--meta http-equiv="expires" content="0"-->
<title>Combinaisons</title>
<style type="text/css" media="screen">
/*#toolbar-menubar {display: none;}*/
button.p1
{
width:50px;
height:50px;
color:black;
background-color:white;
font-weight:bold;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
-khtml-border-radius:25px;
border-radius:25px;
behavior: url('/border-radius.htc');
}
button.p1:active
{
width:50px;
height:50px;
color:black;
background-color: yellow;
font-weight:bold;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
-khtml-border-radius:25px;
border-radius:25px;
behavior: url('/border-radius.htc');
}
button.p2
{
width:50px;
height:50px;
color:black;
background-color:white;
font-weight:bold;
font-size:8pt;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
-khtml-border-radius:25px;
border-radius:25px;
behavior: url('/border-radius.htc');
}
</style>
<script type="text/javascript">
function Request(eventname)
{
var xmlHttp = null;
var dateObject = new Date();
/*try
{
// Firefox, Opera 8.0+, Safari, IE7
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
try
{
// IE 6
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
// IE 5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}*/
xmlHttp.open('GET', "empty?" + eventname + "&_id" + dateObject.getTime(), true);
xmlHttp.send(null);
return false;
}
function TriggerEvent(eventname)
{
Request(eventname + "&withoutRelease");
return false;
}
function ButtonReleased()
{
Request("ButtonReleased");
return false;
}
function KeyDownHandler(event)
{
switch(event.which)
{
case 48: case 96: TriggerEvent("Num10"); break;
case 49: case 97: TriggerEvent("Num1"); break;
case 50: case 98: TriggerEvent("Num2"); break;
case 51: case 99: TriggerEvent("Num3"); break;
case 52: case 100: TriggerEvent("Num4"); break;
case 53: case 101: TriggerEvent("Num5"); break;
case 54: case 102: TriggerEvent("Num6"); break;
case 55: case 103: TriggerEvent("Num7"); break;
case 56: case 104: TriggerEvent("Num8"); break;
case 57: case 105: TriggerEvent("Num9"); break;
case 58: case 106: TriggerEvent("Num11"); break;
case 59: case 107: TriggerEvent("Num12"); break;
case 60: case 108: TriggerEvent("Num13"); break;
case 61: case 109: TriggerEvent("Num14"); break;
case 62 case 110: TriggerEvent("Num15"); break;
case 63: case 111: TriggerEvent("Num16"); break;
case 64: case 112: TriggerEvent("Aj"); break;
default: alert(event.which); break;
}
return false;
}
function StartUp()
{
document.onkeydown = KeyDownHandler;
document.onkeyup = ButtonReleased;
/* It is important to assign a mouse-up event handler to the document body.
// Assigning it to the element (eg. button) wouldn't get triggered if the pressed
// mouse moves outside the elements area.*/
document.onmouseup = ButtonReleased;
}
</script>
</head>
<body onLoad="StartUp()" bgcolor="#3A3C69" text=white link=white vlink=white alink=white>
<center>
<br />
<br />
<br />
<br />
<table border="0">
<tr>
<td><button class="p2" onMouseDown="TriggerEvent('Ajust')" style="color:black; background-color:white;">Aj</button></td>
<td width="10"></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num1')">1</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num2')">2</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num3')">3</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num4')">4</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num5')">5</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num6')">6</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num7')">7</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num8')">8</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num9')">9</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num10')">10</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num11')">11</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num12')">12</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num13')">13</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num14')">14</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num15')">15</button></td>
<td><button class=p1 onMouseDown="TriggerEvent('Num16')">16</button></td>
<td width="10"></td>
<td><button class=p2 onMouseDown="TriggerEvent('Power')" style="color:black; background-color:white;">Ann</button></td>
</tr>
</table>
</center>
</body>
</html>
Les lignes :
behavior: url('/border-radius.htc');
dans le code CSS renvoient bien à un fichier "border-radius.htc" qui est dans le même dossier que la page.
D'un autre côté, lorsqu'un bouton est cliqué, je voudrais qu'il reste avec un fond jaune (pas seulement au moment du clic).
Partant de là, j'ai juste besoin qu'on me dise pourquoi je n'obtiens pas de boutons ronds ?
En fait un bouton rond, n'est-ce pas simplement le fait de juxtaposer les quatre angles arrondis d'une figure (carré, rectangle) sans fournir les autres dimensions (longueur, largeur) ?
Jean-Marie d'orguevirtuel
