Sujet Précédent Sujet Suivant

Agrandir une vignette d'image au click de souris

hic8716 Messages postés 16 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 28 juillet 2011 - 27 juil. 2011 à 16:57
hic8716 Messages postés 16 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 28 juillet 2011 - 28 juil. 2011 à 12:42
Bonjour,
Je suis débutant en HTML5, j'ai réalisé une petite page qui permet de sélectionner des images et de les mettre dans une zone en vignettes.
J'aimerais bien que lors d'un Click de souris, l'image s'agrandit.
Merci d'avance de votre aide
Voici le code source de ma page!!

<html>
<head>
<title>HTML5:Palette d'images </title>

<STYLE TYPE="text/css">
<!--
TD{font-family: Arial, Helvetica, sans-serif; font-size: 8pt;}
--->
</STYLE>

<style type="text/css">
<!--


.bandehaute {
//fond de la bande
background-color: #7B7B7B; //couleur grise
background-position: 0px -545px;
//sépare le contenu d'un élément de sa bordure gauche.
padding-left: 10px;
font-weight: bold;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
//la couleur de la bordure
border-top-color: #B06C27;
border-bottom-color: #B06C27;
//la taille du titre
font-size: 12px;
}
.remplissage {
margin: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.bordure {
border: 1px solid #cccccc;
}



.images { //choisir les dimensions des vignettes
height:150px;
width:150px;
border:0px;
margin:15px 15px 0 0;

}
-->
</style>

<style type="text/css">

table, td
{
border-color: #7B7B7B;
border-style: solid;
}
</style>

<script>
//la fonction permettant de selectionner les images
function SelectionImage(mesFichiers) {
for (var i 0, f; f mesFichiers[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(fichier) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = [''].join('');
document.getElementById('thumbs').insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
//fonction qui permet de déposer les images
function deposer(e) {
SelectionImage(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}


</script>

</head>





<center>
<!-- width largeur de la bande, largeur du bord
- cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau
- cellspacing : Spécifie l'espace en pixels entre les cellules du tableau -->
<!-- placement du titre a gauche -->
Palette miniatures d'images,

----

<!-- //aligner les images du gauche à droite -->
<output id="thumbs"></output>,

----

<!-- //bouton parcourir avec choix multiple -->
Glisser-déposer ou choisir des images :

</center>


</html>

1 réponse

Réponse 1 / 1
hic8716 Messages postés 16 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 28 juillet 2011
28 juil. 2011 à 12:42
pas de réponse??
0

Discussions similaires

Simuler une frappe clavier et un click souris
cs_pedro -
Claiyah -

7 réponses
Simuler un click gauche de souris (souris droitier)
Teclis01 -
claudiusse -

6 réponses
simuler un click gauche...
al78310 -
al78310 -

33 réponses
un simulateur de clic
tikaprod -
Anthomicro -

4 réponses
Simuler un click de souris
NetCyrille -
Zareth -

4 réponses
Rejoignez-nous