dimensione option button

[Mich_]

Se non hai un sito provvisorio, trovatene uno e mettici la pagina (vedi nel regolamento).
Oppure va bene anche il sito definitivo, ma ricorda che il forum e` indicizzato, per cui se e` una cosa delicata non conviene inserire link a siti definitivi contenenti errori.


Comunque nella tua pagina vedo dei problemi.
1. uso di VBscript: e` una tecnologia proprietaria, che funziona solo in alcuni browser.
2. formattazione ottenuta tramite attributi HTML: potrebbero andare in conflitto con i CSS (e browser diversi risolvono i conflitti in modo diverso)
3. mancanza di DOCTYPE: ogni browser interpreta come vuole
4. formattazione tramite tabella: e` una cosa obsoleta e assolutamente da evitare sia perche` e` contrario all'accessibilita` e sia perche` i motori di ricerca penalizzano le pagine non semanticamente corrette


Per quanto riguarda il problema specifico, ci sono un paio di cose che puoi provare ancora:

A) mettere gli apici anche attorno a true:
onclick="document.getElementById('opt3').checked=' true';this.style.border='10px solid red'"

B) scambiare l'ordine alle istruzioni JS:
onclick="this.style.border='10px solid red'; document.getElementById('opt3').checked='true';"

[tep]

tutto ciò che riguarda il browser non importa perchè questa pagina deve lavorare solo per uso interno.

le due soluzioni non funzionano, ho fatto:

  <td><label> <INPUT type="radio" id="opt2" name="optclasse" value="27" /> [img]img\27.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt3" name="optclasse" value="28" /> [img]img\28.jpg[/img] </label></td>

perchè non vanno?

[tep]

forse ho capito:erano troppe immagini pressate, non facevano vedere il bordo. provero' a cambiare la pagina e vedere se funziona.


ma con una pagina vuota e solo tre radio mi sono accorto di un altro problema, queste immagini rimangono selezionate anche quando clicco sulle altre immagini. esiste oltre al onclick una specie di offclick?

cioè quando premo su una altra radio si seleziona l'immagine di quest'ultima(il bordo diventa 10px e rosso) e si deseleziona la radio precedentemente selezionata.

[Mich_]

onclick = "cambia(this,'opt3')"

function cambia (immag, IdBott) {
  var bott = document.getElementById(IdBott);
  if bott.checked {
    bott.checked = 'false;
    immag.style.border = 'none;
  } else {
    bott.checked = 'true';
    immag.style.border = '10px solid red';
  }
}

Al posto dell'attuale onclick ci metti la chiamata alla funzione. this sara` uguale per tutti, il nome dell'input corrispondente va modificato a seconda del contesto

La funzione la devi mettere in uno <script> da inserire nella head della pagina


Poi ti ci vorra` anche una funzione simile (con qualche modifica puo` anche sessere la stessa) che viene chiamata all'onchange del tag <input>

[tep]

Scusa ma questo significa che devo fare una funzione per ogni radio?

non è possibile creare una variabile che prende la radio e la controlla in modo da eseguire una sola funzione?
inoltre in questa maniera la radio no viene più selezionata quando si preme sull'immagine, giusto?

ti sei accorto che io ho già inserito diverse funzioni in vbscript, posso inserire anche funzioni in javascript nel head?

[Mich_]

Forse non hai ancora capito cosa vuol dire programmare ...

La funzione che ho scritto in JS prende due parametri, che sono passati da ciascuna chiamata (ed ho anche specificato come deve essere la chiamata).


Non ci sono problemi ad inserire anche una funzione JS: chiaramente dovra` stare in un tag <script> diverso, in cui e` opportuno (obbligatorio se usi una DTD strict) specificare il linguaggio usato.
Il problema potrebbe essere negli script VBS: sono riconosciuti solo in IE (e forse qualche altro browser) per cui la tua pagina non e` universale.

[tep]

Originariamente inviato da Mich_
onclick = "cambia(this,'opt3')"

function cambia (immag, IdBott)

Al posto dell'attuale onclick ci metti la chiamata alla funzione. this sara` uguale per tutti, il nome dell'input corrispondente va modificato a seconda del contesto

Quindi, se ho ben capito, ci sarà una sola funzione chiamata "cambia".
in automatico inserisce i valori all'interno della "function cambia (immag, IdBott)" sostituendo immag e IdBott.
Ogni immagine della radio avrà il suo onclick = "cambia(this,'opt3')", onclick = "cambia(this,'opt4')", ecc...

poi devo fare una altra funzione per onchange all'interno della radio (quando io clicco su una altra immagine la radio precedentemente selezionata si deseleziona e il suo bordo scompare).

GIUSTO?

[tep]

Continuo a non riuscire a vedere il bordo rosso delle immagini sulla mia pagina (quando clicco sopra all'immagine il bordo non cambia e la radio non si seleziona). Ho provato ad inserire delle radio e immagini in una pagina vuota e funziona il codice:

onclick="document.getElementById('opt1').checked='true';this.style.border='10px solid red'"

E' possibile che il bordo non appaia perchè le radio e le immagini sono inserite all'interno dei td di una tabella?

Ho provato a dare un bordo all'interno del tag di una immagine, il bordo appare e quando premo sull'immagine la radio si seleziona.

Ho provato invece a dare un bordo all'interno del tag immagine che contiene il codice:

onclick="document.getElementById('opt1').checked='true';this.style.border='10px solid red'"

il bordo appare ma quando provo a cliccare sull'immagine il bordo non diventa rosso e la radio non si seleziona.

Sono disperato

[Mich_]

Non riesco a seguire. Mancano sempre pezzi di codice.

Se vuoi aiuto devi mettere qualcosa in rete, perche` parlare su codice parziale supponendo che l'altro sia corretto non ha molto senso.

[tep]

Ecco il Codice (deve funzionare solo in explorer e non devo caricarlo su una pagina internet perche deve lavorare in una rete interna)(ho eliminato solo un po' di codice vb e lacune radio inutili). opt1 opt2 e opt3 non fanno ciò che ho spiegato precedentemente, la opt5 ha un suo bordo nero e il click funziona.

<html>
<head>
<title>prova</title>
<link rel="stylesheet" type="text/css" href="file.css">




<SCRIPT language="VBscript">
<!--

Sub Inseriu1()
val=document.MioForm.u1.value
document.MioForm.txtNome.value=val
end sub

Sub Inseriu2()
val=document.MioForm.u2.value
document.MioForm.txtNome.value=val
end sub

Sub Inseriu3()
val=document.MioForm.u3.value
document.MioForm.txtNome.value=val
end sub

 -->
</SCRIPT>




</head>



<style type="text/css">

</style>

<scrollingbar="no"> 


<style type="text/css"> body

	{font-family: Arial, Helvetica, sans-serif; 
	color:black; 
	font-size: 10pt;
	scrollbar-face-color:#0066B3;
	scrollbar-shadow-color:#80C8FE;
	scrollbar-highlight-color:#CCCCCC;
	scrollbar-3dlight-color:#00AAFF;
	scrollbar-darkshadow-color:#12127D;
	scrollbar-track-color:#6BC6F4;
	scrollbar-arrow-color:#0A0B0C;}
</style> 



<body link="#003C59" vLink="#006B6B" aLink="#B20000" text="#000000">

<style type="text/css"> body
{background-image: url(img\background.jpg); 
background-attachment: fixed;}
</style>


<FORM NAME="MioForm" ACTION="pass.asp" METHOD="post" >

<p align="center">
<font size="5" face="Times" align="center" color="#0066B3">prova 1</font> 
</p>

<table border="1" align="center">
 <tr>
  <td rowspan="7"> 
 	
   <table width="450" border="1">
    <tr>
     <td colspan="6"> <INPUT TYPE="text" name="txtNome" value="0" class="ciao2r"> </td>
     <td colspan="2"> [img]img\u.jpg[/img] </td>
    </tr>
    <tr>
     <td colspan="2"> <INPUT type="button" name="u1" value="1" onClick="Inseriu1()" class="ciaor"> </td>
     <td></td>
     <td colspan="2"> <INPUT type="button" name="u2" value="2" onClick="Inseriu2()" class="ciaor"> </td>
     <td></td>
     <td colspan="2"> <INPUT type="button" name="u3" value="3" onClick="Inseriu3()" class="ciaor"> </td>
    </tr>
    <tr>
     <td colspan="2"> <INPUT type="button" name="u4" value="4" onClick="Inseriu4()" class="ciaor"> </td>
     <td></td>
     <td colspan="2"> <INPUT type="button" name="u5" value="5" onClick="Inseriu5()" class="ciaor"> </td>
     <td></td>
     <td colspan="2"> <INPUT type="button" name="u6" value="6" onClick="Inseriu6()" class="ciaor"> </td>
    </tr>
   </table>
   <table width="450" border="1">
    <tr>
     <td colspan="6"> <INPUT TYPE="text" name="txtQua" class="ciao2b"> </td>
     <td colspan="2"> [img]img\q.jpg[/img] </td>
    </tr>
    <tr>
      <td colspan="2"> <INPUT type="button" name="b1" value="1" onClick="Inseri1()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="b2" value="2" onClick="Inseri2()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="b3" value="3" onClick="Inseri3()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="b4" value="4" onClick="Inseri4()" class="ciaob"> </td>
    </tr>
    <tr>
      <td colspan="2"> <INPUT type="button" name="b5" value="5" onClick="Inseri5()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="b6" value="6" onClick="Inseri6()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="b7" value="7" onClick="Inseri7()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="b8" value="8" onClick="Inseri8()" class="ciaob"> </td>
    </tr>
    <tr>
      <td colspan="2"> <INPUT type="button" name="b9" value="9" onClick="Inseri9()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="b0" value="0" onClick="Inseri0()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="bp" value="." onClick="Inserip()" class="ciaob"> </td>
      <td colspan="2"> <INPUT type="button" name="bc" value="C" onClick="Insericancq()" class="ciaob"> </td>
    </tr>
   </table>
   <table width="450" border="1">
    <tr>
     <td colspan="6"> <INPUT TYPE="password" name="txtPass" class="ciao2g"> </td>
     <td colspan="2"> [img]img\p.jpg[/img] </td>
    </tr>
    <tr>
      <td colspan="2"> <INPUT type="button" name="aa" value="1" onClick="Inseria()" class="ciaog"> </td>
      <td colspan="2"> <INPUT type="button" name="ab" value="2" onClick="Inserib()" class="ciaog"> </td>
      <td colspan="2"> <INPUT type="button" name="ac" value="3" onClick="Inseric()" class="ciaog"> </td>
      <td colspan="2"> <INPUT type="button" name="ad" value="4" onClick="Inserid()" class="ciaog"> </td>
    </tr>
    <tr>
      <td colspan="2"> <INPUT type="button" name="ae" value="5" onClick="Inserie()" class="ciaog"> </td>
      <td colspan="2"> <INPUT type="button" name="af" value="6" onClick="Inserif()" class="ciaog"> </td>
      <td colspan="2"> <INPUT type="button" name="ag" value="7" onClick="Inserig()" class="ciaog"> </td>      
      <td colspan="2"> <INPUT type="button" name="adel" value="C" onClick="Insericancp()" class="ciaog"> </td>
    </tr>
   </table>
  </td>
  <td><label> <INPUT type="radio" id="opt1" name="optclasse" value="74" /> [img]img\74.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt2" name="optclasse" value="27" /> [img]img\27.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt3" name="optclasse" value="28" /> [img]img\28.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt4" name="optclasse" value="25" /> [img]img\25.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt5" name="optclasse" value="693" /> [img]img\693.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt6" name="optclasse" value="33" /> [img]img\33.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt7" name="optclasse" value="26" /> [img]img\26.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt8" name="optclasse" value="31" /> [img]img\31.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt9" name="optclasse" value="799" /> [img]img\799.jpg[/img] </label></td>
 </tr>
 <tr>
  <td><label> <INPUT type="radio" id="opt10" name="optclasse" value="1612" /> [img]img\1612.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt11" name="optclasse" value="32" /> [img]img\32.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt12" name="optclasse" value="34" /> [img]img\34.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt13" name="optclasse" value="113" /> [img]img\113.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt14" name="optclasse" value="86" /> [img]img\86.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt15" name="optclasse" value="87" /> [img]img\87.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt16" name="optclasse" value="78" /> [img]img\78.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt17" name="optclasse" value="89" /> [img]img\89.jpg[/img] </label></td>
  <td><label> <INPUT type="radio" id="opt18" name="optclasse" value="877" /> [img]img\877.jpg[/img] </label></td>
 </tr>
</table>



<table border="0" align="center">
 <tr>
  <td> <label> <INPUT type="radio" id="opt9999" name="checor" value="1" checked="cheked" /> [img]img\s.jpg[/img] </label></td>
  <td> <label> <INPUT type="radio" id="opt9998" name="checor" value="2" /> [img]img\r.jpg[/img] </label></td>
  <td> <INPUT type="submit" value="Conferma" class="ciao3" > </td>
  <td> <INPUT type="reset" value="Annulla" class="ciao3"> </td>
  <td> <label>[img]img\P2.jpg[/img]</label> </td>
  <td> <label>[img]img\P3.jpg[/img]</label> </td>
  <td> <label>[img]img\P4.jpg[/img]</label> </td>
  <td> <label>[img]img\P5.jpg[/img]</label> </td>
 </tr>
 <tr>
  <td colspan="8"><p align="center">[img]img\sta.jpg[/img]</p></td>
 </tr>
</table>


</FORM>

</BODY>
</HTML>