Ce script est déclaré obsolète. Il n'est conservé que pour information.

Script : Case à cocher en images

Remplace les cases à cocher de formulaire par des images cliquables. Possède le même fonctionnement qu'un champ checkbox, mais avec des images.

<HTML>
<HEAD>
<TITLE>Tout JavaScript.com - Remplacer une case à cocher par une image</TITLE>
<SCRIPT LANGUAGE="JavaScript">
//D'autres scripts sur http://www.toutjavascript.com
//Si vous utilisez ce script, merci de m'avertir !

var imgON="green.gif"; // Image pour la case cochée
var imgOFF="red.gif";  // Image pour la case décochée

// Gère le clic sur une CheckBox
function ClicCB(nom) {
  var src=document.images[nom].src;
  src=src.substring(src.lastIndexOf("/")+1);
  if (src==imgON) {
    document.images[nom].src=imgOFF;
  } else {
    document.images[nom].src=imgON;
  }
}

// Donne la valeur d'une CheckBox, true si cochée, false sinon.
function GetCB(nom) {
  var src=document.images[nom].src;
  src=src.substring(src.lastIndexOf("/")+1);
  if (src==imgON) {
    return true;
  } else {
    return false;
  }
}

// Affiche le résultat par le bouton 
function Result() {
  var Z="La case classique";
  if (document.forms[0].elements["case"].checked) {
    Z+=" est cochée.";
  } else {
    Z+=" n'est pas cochée.";
  }
  Z+="\nLa case personnalisée";

if (GetCB('CB1')) { 
    Z+=" est cochée.";
  } else {
    Z+=" n'est pas cochée.";
  }
  alert(Z);
}

</SCRIPT>
</HEAD>

<BODY bgcolor="white" text="#FAFAFF" alink="#000066" link="#000066" vlink="#000066" >
<FONT FACE="Arial" SIZE='-1' COLOR="navy">
<CENTER><B><BIG>Remplace une case à cocher par une image</B></BIG></CENTER>
Ici, une case rouge n'est pas cochée, une case verte est cochée. Naturellement, il est possible de modifier les images associées.<BR>
Compatible pour tous les navigateurs.
<FORM>
  Une case à cocher classique : <INPUT type='checkbox' name="case"><BR>
  Une case à cocher personnalisée : <A href="javascript:ClicCB('CB1')"><IMG id="CB1" src="red.gif" width="17" height="17" border=0></A><BR>
<INPUT type="button" value="Voir les valeurs" onClick="Result()">

</FORM>

<BR>
<CENTER><A href="http://www.toutjavascript.com"><FONT size="1" face="arial" color="#CCCCFF">Tout JavaScript.com</FONT></A></CENTER>

</BODY></HTML>

Exécution du script

Code source

<HTML><HEAD><TITLE>Tout JavaScript.com - Remplacer une case à cocher par une image</TITLE><SCRIPT LANGUAGE="JavaScript">//D'autres scripts sur http://www.toutjavascript.com//Si vous utilisez ce script, merci de m'avertir !var imgON="green.gif"; // Image pour la case cochéevar imgOFF="red.gif";  // Image pour la case décochée// Gère le clic sur une CheckBoxfunction ClicCB(nom) {  var src=document.images[nom].src;  src=src.substring(src.lastIndexOf("/")+1);  if (src==imgON) {    document.images[nom].src=imgOFF;  } else {    document.images[nom].src=imgON;  }}// Donne la valeur d'une CheckBox, true si cochée, false sinon.function GetCB(nom) {  var src=document.images[nom].src;  src=src.substring(src.lastIndexOf("/")+1);  if (src==imgON) {    return true;  } else {    return false;  }}// Affiche le résultat par le bouton function Result() {  var Z="La case classique";  if (document.forms[0].elements["case"].checked) {    Z+=" est cochée.";  } else {    Z+=" n'est pas cochée.";  }  Z+="nLa case personnalisée";  if (GetCB('CB1')) {     Z+=" est cochée.";  } else {    Z+=" n'est pas cochée.";  }  alert(Z);}</script></HEAD><BODY bgcolor="white" text="#FAFAFF" alink="#000066" link="#000066" vlink="#000066" ><FONT FACE="Arial" SIZE='-1' COLOR="navy"><CENTER><B><BIG>Remplace une case à cocher par une image</B></BIG></CENTER>Ici, une case rouge n'est pas cochée, une case verte est cochée. Naturellement, il est possible de modifier les images associées.<BR>Compatible pour tous les navigateurs.<FORM>  Une case à cocher classique : <INPUT type='checkbox' name="case"><BR>  Une case à cocher personnalisée : <A href="javascript:ClicCB('CB1')"><IMG id="CB1" src="red.gif" width="17" height="17" border=0></A><BR><INPUT type="button" value="Voir les valeurs" onClick="Result()"></FORM><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><CENTER><A href="http://www.toutjavascript.com"><FONT size="1" face="arial" color="#CCCCFF">Tout JavaScript.com</FONT></A></CENTER></BODY></HTML><!-- Script développé par Olivier Hondermarck  --><!-- http://www.toutjavascript.com             -->

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...

Script : Case à cocher en images

Exécution du script

Code source

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...

Le graph des objets JavaScript