Image mosaïque avec affichage de textes...
Résolu
gabriel92
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
gabriel92 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
gabriel92 Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite créer une page ou sera affichée une image "mosaïque", c'est à dire séparée en parties, comme un puzzle. Lorsque la souris passe sur l'une de ces parties d'images, je souhaite que le site affiche un texte donné à droite de l'image. Et lorsqu'on clique sur une partie d'image, je souhaite renvoyer à un lien.
Problèmes pour moi :
1. Je ne sais pas générer d'images qui ne soient pas rectangulaires, donc je suis pour l'instant limité au format quadrillage (bof).
2. Je n'ai pour l'instant fait que du html avec dreamweaver MX 2004, et jamais de dynamique.
Si vous connaissez des sites, des scripts, des tutos qui peuvent m'aider, merci mille fois.
Gabriel
PS. Un bon exemple de ce que je veux faire :
http://turquand.dauzay.free.fr/btapage/accvac.html
Mais en affichant le code de la page, je n'y comprends rien...
Je souhaite créer une page ou sera affichée une image "mosaïque", c'est à dire séparée en parties, comme un puzzle. Lorsque la souris passe sur l'une de ces parties d'images, je souhaite que le site affiche un texte donné à droite de l'image. Et lorsqu'on clique sur une partie d'image, je souhaite renvoyer à un lien.
Problèmes pour moi :
1. Je ne sais pas générer d'images qui ne soient pas rectangulaires, donc je suis pour l'instant limité au format quadrillage (bof).
2. Je n'ai pour l'instant fait que du html avec dreamweaver MX 2004, et jamais de dynamique.
Si vous connaissez des sites, des scripts, des tutos qui peuvent m'aider, merci mille fois.
Gabriel
PS. Un bon exemple de ce que je veux faire :
http://turquand.dauzay.free.fr/btapage/accvac.html
Mais en affichant le code de la page, je n'y comprends rien...
A voir également:
- Image mosaïque avec affichage de textes...
- Mosaique instagram - Guide
- Image iso - Guide
- Affichage double ecran - Guide
- Extraire texte d'une image - Guide
- Windows 11 affichage classique - Guide
2 réponses
c'est une image qui est "mappée" ...
et en plus avec du javascript dedans ... un peu compliqué pour pas grand chose ... il y a plus simple quand même, pour le code :
et en plus avec du javascript dedans ... un peu compliqué pour pas grand chose ... il y a plus simple quand même, pour le code :
<html><head><title>Le lieu des vacances de mon enfance</title>
<meta name="GENERATOR" content="Optima PageSpinner for MacOS">
<meta name="ROBOTS" content="ALL">
<meta name="KEYWORDS" content="exposition,peinture,sculpture,création">
<meta name="DESCRIPTION" content="travail artistique">
<meta name="AUTHOR" content="Béatrice Turquand d'Auzay">
<script language="JavaScript">
<!-- Beginning of JavaScript -
//swap fonction
function SwapOut(num){
if (num==1) { document.debut.src=debut.src}
else if (num==2) {document.suitea.src=suitea.src}
else if (num==3) {document.suiteb.src=suiteb.src}
else if (num==4) {document.suitec.src=suitec.src}
}
function SwapBack(num){
if (num==1) { document.debut.src=vide.src}
else if (num==2) {document.suitea.src=vide.src}
else if (num==3) {document.suiteb.src=vide.src}
else if (num==4) {document.suitec.src=vide.src}
}
//chargement des imagettes
debut=new Image()
debut.src='../btaimage/texte1.jpg'
suitea=new Image()
suitea.src='../btaimage/texte2.jpg'
suiteb=new Image()
suiteb.src='../btaimage/texte3.jpg'
suitec=new Image()
suitec.src='../btaimage/texte4.jpg'
vide=new Image()
vide.src='../btaimage/vide.gif'
// - End of JavaScript - -->
</script>
</head>
<body bgcolor='#FFFFFF' link='#000000' vlink='#000000' alink='#000000' marginwidth='30' marginheight='2' topmargin='30' leftmargin='30'>
<table border='0' cellspacing=0 cellpadding=0>
<tr>
<td rowspan='4'><img src="../btaicone/gplclic2.jpg" border='0' width="600" height="437" alt="Le lieu des vacances de mon enfance" usemap="#plan1">
<map name="plan1">
<area shape=poly coords=86,285,86,232,111,185,158,148,174,146,181,135,204,130,230,108,255,119,261,139,247,155,236,257,244,193,311,121,314,107,325,102,331,114,315,124,303,138,248,200,259,315,237,345,205,365,165,365,117,338
href="accsouv1.html" target='_top'
onMouseOver="SwapOut(1); self.status= 'J\'ai toujours été tiraillée entre les histoires de mes deux familles, ...' ; return true;"
onMouseOut="SwapBack(1)">
<area shape=poly coords=0,247,0,436,306,436,307,379,239,349,205,367,159,368,107,332,81,287,49,278,37,285 href="accsouv2.html" target='_top'
onMouseOver="SwapOut(2); self.status= 'rehaussé de couleurs, représentant des arrière-arrière-grands-parents français, ...' ; return true;"
onMouseOut="SwapBack(2)">
<area shape=POLY
coords=496,0,599,0,599,436,308,436,309,375,347,263,410,150,454,88
href="accsouv3.html" target='_top'
onMouseOver="SwapOut(3); self.status= ' développa en moi une fascination pour l\'enfermement, pour ce qui est proche et inaccessible à la fois.' ; return true;"
onMouseOut="SwapBack(3)">
<area shape=poly coords=0,243,0,0,494,0,450,91,383,180,349,250,307,374,241,346,261,320,264,305,250,202,315,127,333,114,326,99,312,106,309,120,246,189,239,159,251,157,265,139,257,115,228,105,219,117,208,119,199,128,180,132,173,145,156,144,108,183,83,231,81,283,47,271,39,281 href="accsouv4.html" target='_top'
onMouseOver="SwapOut(4); self.status= 'les gens écartelés entre plusieurs frontières. D\'où une envie de restituer ...' ; return true;"
onMouseOut="SwapBack(4)">
</map></td>
<td width=150 align='right'><img src="../btaimage/vide.gif" width="120" height="65" alt="" name="debut"></td>
</tr>
<tr>
<td align='right'><img src="../btaimage/vide.gif" width="120" height="65" alt="" name="suitea"></td>
</tr>
<tr>
<td align='right'><img src="../btaimage/vide.gif" width="120" height="75" alt="" name="suiteb"></td>
</tr>
<tr>
<td align='right'><img src="../btaimage/vide.gif" width="120" height="75" alt="" name="suitec"></td>
</tr>
</table>
</body>
</html>
vois du côté de jalbum
https://jalbum.net/en/
il peut fonctionner en local et il est simple pour un débutant
ou ici:
http://www.jmberthier.com/fr/photogallery.html
;)
https://jalbum.net/en/
il peut fonctionner en local et il est simple pour un débutant
ou ici:
http://www.jmberthier.com/fr/photogallery.html
;)
Oui, ça m'avait l'air bien compliqué (mais je manque de références).
Connais-tu un moyen de faire ça simplement ? Du genre scripts tout prêts (au hasard...)