Comment afficher des photos avec un choix radio en javascript ?

 

par meltech1 |

     

Si vous avez plusieurs photos et que vous aimeriez les afficher sur votre site Internet alors cet article est fait pour vous. En effet avec un choix radio, c'est-à-dire les petits ronds qu'on coche pour choisir, votre photo va s'afficher par rapport au choix que vous avez fait. Pour programmer cet article veuillez lire ce qui suit.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel bloc notes

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet avec "bloc notes" pour afficher le code source qui est le programme de votre site Internet. C'est grâce à ce code source que vous allez programmer ce qui suit. Veuillez commencer par chercher la balise <head>.

2.

Maintenant veuillez insérer le script suivant dans cette balise :
<script language="javascript">
function choix(menu_gauche)
{
src = "";
/*
Copier les lignes suivante autant qu'il y a d'images (remplacer +1 par le chiffre adapter, il doivent être croissant de 0 à l'infini):
if (menu_gauche.photos[+1].checked)
src = "adresse de l'image";
*/
if (menu_gauche.photos[0].checked)
src = "image1.gif";
if (menu_gauche.photos[1].checked)
src = "image2.gif";
if (menu_gauche.photos[2].checked)
src = "image3.gif";
if (menu_gauche.photos[3].checked)
src = "image4.gif";

def = "";
/*
Copier les lignes suivante autant qu'il y a d'images (remplacer +1 par le chiffre adapter, il doivent être croissant de 0 à l'infini):
if (menu_gauche.photos[+1].checked)
def = "Legende de l'image";
*/
if (menu_gauche.photos[0].checked)
def = "Photo1";
if (menu_gauche.photos[1].checked)
def = "Photo2";
if (menu_gauche.photos[2].checked)
def = "Photo3";
if (menu_gauche.photos[3].checked)
def = "Photo4";

siz = "";
/*
Copier les lignes suivante autant qu'il y a d'images (remplacer +1 par le chiffre adapter, il doivent être croissant de 0 à l'infini):
if (menu_gauche.photos[+1].checked)
siz = "width='500' height='400'";
*/
if (menu_gauche.photos[0].checked)
siz = "";
if (menu_gauche.photos[1].checked)
siz = "";
if (menu_gauche.photos[2].checked)
siz = "";
if (menu_gauche.photos[3].checked)
siz = "";

/*
Vous pouver modifier la taille de l'image : width='500' height='400'
la mise en forme du texte : <b><font size='+1'>
Attention à bien respecter les différentes syntaxes ' et "
*/
DinaImg = "<img src='" + src + "'" + siz +"><br><b>" + def + "</b>";
which2 = DinaImg
if (document.getElementById){
document.getElementById("photo").innerHTML=which2;
}
}
</script>.

3.

Maintenant veuillez insérer le script suivant dans la balise <body> :
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" width="12%" valign="middle">
<p align="center"><b><font size="+2">GALERIE PHOTOS</font></b></p>
<font color="#666666"><b>Voici les photos (cochez la phot que vous voulez
afficher et appuyer sur le bouton) : </b></font>
<form name=menu_gauche>
<!--
Copier les lignes suivante autant qu'il y a d'images :
<input type=radio name=photos value=1>Texte à afficher pour l'image<br>
-->
<input type=radio name=photos value=1>Photo1<br>
<input type=radio name=photos value=2>Photo2<br>
<input type=radio name=photos value=3>Photo3<br>
<input type=radio name=photos value=4>Photo4<br>
<br>
<br>
<input type=button name=but value="Affichez une photo" onclick=choix(menu_gauche) style=background-color:yellow>
</form>
</td>
<td align="center" width="13%" valign="middle"><div id="photo"></div></td>
</tr>
</table>.

4.

Pour terminer enregistrez le tout avec "bloc notes" puis ouvrez avec IE. Vous remarquez que vos photos s'affichent quand vous faites un choix avec les boutons radio. Voilà c'est terminé.

Astuces et mises en garde

Astuce(s) :

Pour ajouter ou modifier les photos allez dans les balises <body> et <head>.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on