Cacher une image avec une autre image

[Keskispas]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://aide-aquariophilie.forumactif.com

Description du problème

Bonjour à tous,

Cela fait un bout de temps que je cherche sur le net, mais je ne trouve rien et je manque d'idée.

En fait j'aimerais cacher une photo par une autre photo. Je m'explique.

Voici par exemple la photo de base:

Spoiler:

Maintenant sur cette image, j'aimerais placer une grille de 145 cases (nombres pas important!), cela cacherait complètement la première image et donnerait ce résultat;

Spoiler:

Et il faudrait que je puisse enlever les case une par une suivant un ordre quelconque, ce qui dévoilerais petit à petit la première image.
Je ne sais pas si cela est clair et si c'est réalisable?

Ce code serait pour poster dans un sujet du forum et serait à répéter de nombreuse fois. J'ai numéroté les cases et j'ai également placé une échélle sur le coté (A-B-C ... 1-2-3- ...) C'est l'un ou l'autre, c'est juste pour avoir plus de facilité pour déterminer la case à dévoiler.

Merci d'avance à tous.

[Neptunia]

Bonjour ^^

Techniquement c'est réalisable assez facilement :

Code:

[table style="width: 400px; height: 300px; border-collapse:collapse; border:2px solid #FF0000; background:url(http://thumbs.dreamstime.com/x/actinie-et-poissons-de-mer-amphitryon-25858845.jpg)"]
   [tr]
      [td name="A1"][img]http://i10.twenga.com/maison/service-de-table/reglisse-plat-carre-noir-tp_5493801659794106758.jpg[/img][/td]
      [td name="A2"][/td]
      [td name="A3"][img]http://i10.twenga.com/maison/service-de-table/reglisse-plat-carre-noir-tp_5493801659794106758.jpg[/img][/td]
      [td name="A4"][/td]
   [/tr]
   [tr]
      [td name="B1"][/td]
      [td name="B2"][img]http://i10.twenga.com/maison/service-de-table/reglisse-plat-carre-noir-tp_5493801659794106758.jpg[/img][/td]
      [td name="B3"][/td]
      [td name="B4"][img]http://i10.twenga.com/maison/service-de-table/reglisse-plat-carre-noir-tp_5493801659794106758.jpg[/img][/td]
   [/tr]
   [tr]
      [td name="C1"][img]http://i10.twenga.com/maison/service-de-table/reglisse-plat-carre-noir-tp_5493801659794106758.jpg[/img][/td]
      [td name="C2"][/td]
      [td name="C3"][img]http://i10.twenga.com/maison/service-de-table/reglisse-plat-carre-noir-tp_5493801659794106758.jpg[/img][/td]
      [td name="C4"][/td]
   [/tr]
[/table]

On a une table de la largeur et de la hauteur de l'image et on place l'image en tant qu'image de fond de table.
Au niveau des cellules on place le contenu normalement. Ici j'ai placé dans la moitié des cellules une image noire avec une bordure blanche.

Il suffit de vider la cellule pour faire apparaître une portion d'image.

---

Dans la pratique c'est toute autre chose. Il suffit de citer le message pour obtenir le lien de l'image complète.
Il faudrait donc :
- découper d'abord l'image en 144 morceaux.
- Héberger tous ces fragments et noter dans un coin le lien correspondant à chaque cellule
- Placer dans toutes les cellules une image de masquage
- Pour démasquer un fragment il faudrait remplacer l'image de masquage par celle du fragment dont vous aviez noté le lien à part.

[Keskispas]

Re,

Merci pour la réponse. c'est possible c'est déjà une très bonne chose.
Le problème c'est que cela dépasse bien largement mes compétences.

Si je pouvais avoir une aide pour créer ce code, cela serait bien sympa.

[Neptunia]

Je dois avouer que je ne me suis pas foulée mdr !

Générateur de tableaux (merci CSS-Actif)
Plus qu'à définir le nombre de lignes et de colonnes et d'éventuelles bordures. Pour l'exemple j'ai choisi une bordure pleine de 2 pixels uniquement pour le tableau. Rien pour les lignes et les cases.

Sinon, il y a un tuto ici même
Apprendre à faire un tableau

Une fois obtenu le code de mon tableau, j'ai édité le css de la table en modifiant sa largeur, et en définissant une hauteur. Largeur et hauteur = celles de l'image à masquer.

---

Ensuite j'ai exposé deux options.

La première passe par une image de fond, voir mon code de démonstration pour voir comment on fait.
Ensuite il suffit de mettre une balise image dans chaque case pour masquer l'image de fond. Et de les retirer une par une pour dévoiler l'image.
Cette technique demande un minimum de boulot, l'inconvénient est que n'importe quel petit malin peut dévoiler l'image complète en allant citer le message ou regarder les infos de la page.

La deuxième technique demande bien plus de travail mais est encore plus simple. Il suffit de laisser vide chaque case, ou remplir partout avec la même image. Et de ne mettre les fragments d'image que un par un pour reconstruire l'image.

[Keskispas]

Re,

Bon et bien j'ai un peu de boulot devant moi, je vais décortiquer cela!!

Je vais lire, relire, ... et essayer! Mais pas ce soir.

Mais je ne garanti pas que je vais réussir. Mais je vais essayer!
Je repasserais certainement par ici.

Merci pour le coup de main et certainement à bientôt.

[Neptunia]

Votre demande a éveillé mon intérêt dès le départ parce que les habituées de mon forum sont très joueuses.
D'où l'idée d'un jeu style schmilblick où chaque question dont la réponse est oui dévoilerait une parcelle de l'image.
Ou un calendrier de l'Avent vu que c'est la période.

L'ennui est que mes joueuses sont très malines et que la méthode 1 (image postée telle quelle en image de fond) serait inefficace dans mon cas.

D'où la méthode 2, qui me rebute pas mal, je ne me voyais pas découper manuellement mon image en petits fragments.

Comme il s'agit d'une tâche très répétitive, je me suis dit qu'il devait exister des outils plus simples qui automatiseraient le processus et une petite recherche m'a permis de trouver des outils en ligne qui assurent tout le boulot.

Image Splitter (en anglais)
- On téléverse (upload) l'image. Il est conseillé de renommer l'image en quelque chose d'impersonnel avant envoi genre image.jpg
- Direction l'onglet Split image
- On définit le nombre de lignes (rows) et de colonnes (columns)
- Clic sur split image
- On récupère une archive zip avec tous les fragments.
- Chaque fragment a un nom de type nom_de_l_image [www.imagesplitter.net]-x-y.jpeg, x et y étant des nombres entiers indiquant le numéro de ligne et de colonne en commençant par zéro. Vu que le nom original de l'image est repris dans les fragments, voilà pourquoi je conseillais au premier point de renommer l'image avant envoi.

Découper une photo en rectangles
Celui-ci est en français mais :
- Je ne l'ai pas testé
- Le découpage semble limité à 9 lignes et 9 colonnes, soit 81 fragments.

Il est évident que ce type d'outil doit proliférer sur la toile, à vous de trouver celui qui vous convient le mieux.

[Keskispas]

Bonjour,

Personnellement, je ne me sens pas capable de réaliser un tel code!

[Neptunia]

Si ce n'est qu'un problème de code, exceptionnellement je peux vous le fournir et vous expliquer ce qui restera à faire pour les messages suivants.

Mais il me faudrait le lien de l'image complète, le nombre de lignes et de colonnes, le tout entre balises hide si vous vous orientez sur la formule 1. Celle où les membres peuvent visualiser l'image complète s'ils sont un tant soit peu malins.

Et si vous choisissez la deuxième formule, il me faut les mêmes éléments mais vous aurez cette fois à insérer le lien de vos fragments d'images manuellement.

Mon code de départ a été conçu pour faciliter cette tâche.

[ td name="B2" ][ img ]url_de_l_image[ /img ][ /td ]
J'ai donné un nom à chaque cellule. Ici B2 veut dire 2^e ligne (B), et 3^e colonne (2)

[Keskispas]

Re,

C'est super gentil de vous proposer.

Je dois vous avouer que je ne veux pas "imposer" MA façon.
Déjà que vous êtes bien sympa de m'aider, donc faites comme vous il vous semble, sans trop vous compliquer la vie. Je serais déjà super content de la sorte.

Vu que l'image qui va se dévoiler petit à petit, elle changera chaque fois, je ne vois pas bien de quel lien d'image vous avez besoin?

Encore une fois, Merci.

[Neptunia]

Si on part de la méthode 1, celle que j'ai mise en application dès ma première réponse, l'image à dévoiler reste la même du début à la fin.

Imaginez un vitrail sur lequel vous recouvrez toute la surface avec des autocollants rectangulaires. Chaque fois que vous enlevez un autocollant, on découvre un morceau du vitrail qui était là depuis le début. Et comme l'image est là dès le départ, il suffit aux membres de citer le message pour débusquer l'image complète.
Méthode 1 = peu de boulot (il suffit de vider le contenu des cellules [ td ] ... [ /td ] une par une. Mais il est facile de "tricher"

Maintenant la méthode 2 consiste à chaque opération à remplacer une image insignifiante, par une image de même taille mais étant un fragment de l'image masquée.
Une bonne comparaison serait de prendre un carrelage uni et de remplacer un à un les carreaux pour former une fresque.
Là il s'agit non plus de vider les cellules une par une, mais de remplacer leur contenu.
Méthode 2 = beaucoup de boulot pour vous (il y a déjà tous les fragments d'image à héberger et à noter leur lien. Mais "tricherie" pour ainsi dire impossible.

Que ce soit une méthode ou l'autre, en ce qui me concerne, la somme de travail est similaire.

De votre côté, la méthode 2 sera plus longue à traiter. C'est plus long de remplacer un élément que de le supprimer !

[Keskispas]

Bonjour,

Alors si pour vous c'est pareil, je crois que le bon sens voudrait que la deuxième solution soit plus fiable.
Donc soyons fou et dirigeons nous vers un surplus de travail.

Bonne journée.

[Neptunia]

Alors si pour vous c'est pareil, je crois que le bon sens voudrait que la deuxième solution soit plus fiable.
Donc soyons fou et dirigeons nous vers un surplus de travail.

Mais il me faudrait le lien de l'image complète, le nombre de lignes et de colonnes, le tout entre balises hide.

Je commence dès que j'ai les informations nécessaires !

[Keskispas]

Re,

Je ne comprend pas bien??
je suppose que vous voulez l'image de départ, celle qui va servir pour tous les jeux?

Voici;

[Neptunia]

Ce que j'appelais image complète, c'était ce que vous appeliez l'image de base, celle que l'on veut masquer et dévoiler progressivement.

Mais votre grille me donne une idée.
- On met une couleur de fond à la table, du blanc par exemple
- On met les numéros en contenu de cellules. Ca tombe bien, le générateur de tableaux de CSS-Actif le fait déjà pour nous.
- Ensuite pour révéler un fragment d'image, vous remplacez l'un des numéros par la balise img contenant le fragment correspondant.

Du coup seul le lien de l'image mystère est nécessaire.
Mais attention à ses dimensions !! Il faudrait que largeur comme hauteur soient un multiple de 12 pour que chaque fragment ait bien la même dimension que ses voisins.

En fait je n'ai même pas besoin de l'image, il me faut juste ses dimensions hauteur et largeur, qui je le répète, doivent impérativement être un multiple de 12 (puisqu'il y aura 12 lignes et 12 colonnes.

---

Un avant-goût du résultat initial (fait en quelques minutes grâce aux outils de recherche/remplacement du bloc-notes)
Chaque case mesure ici 40px * 30px

1	2	3	4	5	6	7	8	9	10	11	12
13	14	15	16	17	18	19	20	21	22	23	24
25	26	27	28	29	30	31	32	33	34	35	36
37	38	39	40	41	42	43	44	45	46	47	48
49	50	51	52	53	54	55	56	57	58	59	60
61	62	63	64	65	66	67	68	69	70	71	72
73	74	75	76	77	78	79	80	81	82	83	84
85	86	87	88	89	90	91	92	93	94	95	96
97	98	99	100	101	102	103	104	105	106	107	108
109	110	111	112	113	114	115	116	117	118	119	120
121	122	123	124	125	126	127	128	129	130	131	132
133	134	135	136	137	138	139	140	141	142	143	144

[Keskispas]

Re,

je suis admiratif de pouvoir naviguer avec les codes, les chiffres et les balise comme vous le faites!!

En fait pour moi la dimension de l'image n'est pas important. Je dirais que plus ou moins 500 voir 600 px de large me parait bien pour afficher sur un forum.
L'image complète changera à chaque fois, donc pour créer l'exemple cela n'est pas important non plus, vu que je devrais la changer à chaque fois.

[Neptunia]

En fait pour moi la dimension de l'image n'est pas important. Je dirais que plus ou moins 500 voir 600 px de large me parait bien pour afficher sur un forum.

Au tout début du code du tableau on a :

Code:

[table style="width: 480px; height: 360px; background-color:#74d0f1; border-collapse:collapse; border:2px solid #0000ff;"]

width: 480px; -> Largeur de l'image à dévoiler
height: 360px; -> Hauteur de l'image à dévoiler
background-color: -> Code couleur en fond de tableau

L'intégralité du code :

Code:

[table style="width: 480px; height: 360px; background-color:#74d0f1; border-collapse:collapse; border:2px solid #0000ff;"]
   [tr]
      [td]1[/td]
      [td]2[/td]
      [td]3[/td]
      [td]4[/td]
      [td]5[/td]
      [td]6[/td]
      [td]7[/td]
      [td]8[/td]
      [td]9[/td]
      [td]10[/td]
      [td]11[/td]
      [td]12[/td]
   [/tr]
   [tr]
      [td]13[/td]
      [td]14[/td]
      [td]15[/td]
      [td]16[/td]
      [td]17[/td]
      [td]18[/td]
      [td]19[/td]
      [td]20[/td]
      [td]21[/td]
      [td]22[/td]
      [td]23[/td]
      [td]24[/td]
   [/tr]
   [tr]
      [td]25[/td]
      [td]26[/td]
      [td]27[/td]
      [td]28[/td]
      [td]29[/td]
      [td]30[/td]
      [td]31[/td]
      [td]32[/td]
      [td]33[/td]
      [td]34[/td]
      [td]35[/td]
      [td]36[/td]
   [/tr]
   [tr]
      [td]37[/td]
      [td]38[/td]
      [td]39[/td]
      [td]40[/td]
      [td]41[/td]
      [td]42[/td]
      [td]43[/td]
      [td]44[/td]
      [td]45[/td]
      [td]46[/td]
      [td]47[/td]
      [td]48[/td]
   [/tr]
   [tr]
      [td]49[/td]
      [td]50[/td]
      [td]51[/td]
      [td]52[/td]
      [td]53[/td]
      [td]54[/td]
      [td]55[/td]
      [td]56[/td]
      [td]57[/td]
      [td]58[/td]
      [td]59[/td]
      [td]60[/td]
   [/tr]
   [tr]
      [td]61[/td]
      [td]62[/td]
      [td]63[/td]
      [td]64[/td]
      [td]65[/td]
      [td]66[/td]
      [td]67[/td]
      [td]68[/td]
      [td]69[/td]
      [td]70[/td]
      [td]71[/td]
      [td]72[/td]
   [/tr]
   [tr]
      [td]73[/td]
      [td]74[/td]
      [td]75[/td]
      [td]76[/td]
      [td]77[/td]
      [td]78[/td]
      [td]79[/td]
      [td]80[/td]
      [td]81[/td]
      [td]82[/td]
      [td]83[/td]
      [td]84[/td]
   [/tr]
   [tr]
      [td]85[/td]
      [td]86[/td]
      [td]87[/td]
      [td]88[/td]
      [td]89[/td]
      [td]90[/td]
      [td]91[/td]
      [td]92[/td]
      [td]93[/td]
      [td]94[/td]
      [td]95[/td]
      [td]96[/td]
   [/tr]
   [tr]
      [td]97[/td]
      [td]98[/td]
      [td]99[/td]
      [td]100[/td]
      [td]101[/td]
      [td]102[/td]
      [td]103[/td]
      [td]104[/td]
      [td]105[/td]
      [td]106[/td]
      [td]107[/td]
      [td]108[/td]
   [/tr]
   [tr]
      [td]109[/td]
      [td]110[/td]
      [td]111[/td]
      [td]112[/td]
      [td]113[/td]
      [td]114[/td]
      [td]115[/td]
      [td]116[/td]
      [td]117[/td]
      [td]118[/td]
      [td]119[/td]
      [td]120[/td]
   [/tr]
   [tr]
      [td]121[/td]
      [td]122[/td]
      [td]123[/td]
      [td]124[/td]
      [td]125[/td]
      [td]126[/td]
      [td]127[/td]
      [td]128[/td]
      [td]129[/td]
      [td]130[/td]
      [td]131[/td]
      [td]132[/td]
   [/tr]
   [tr]
      [td]133[/td]
      [td]134[/td]
      [td]135[/td]
      [td]136[/td]
      [td]137[/td]
      [td]138[/td]
      [td]139[/td]
      [td]140[/td]
      [td]141[/td]
      [td]142[/td]
      [td]143[/td]
      [td]144[/td]
   [/tr]
[/table]

Dans ce code vous avez donc 144 cellules qui ont pour contenu un entier de 1 à 144.
Pour l'image à dévoiler, il vous faut donc la découper en 144 morceaux que vous nommerez idéalement xxxx_001 à xxxx_144.jpg (évitez le png à cause d'une éventuelle transparence qui laisserait apparaître la couleur de fond).
Vous mettez tous ces fragments dans un même dossier (appelons le "Bernard") dans lequel vous créez un nouveau sous-dossier de nom "l'hermite".

Pour dévoiler un fragment, exemple le 66 :
- vous hébergez l'image numérotée 066 sur l'hébergeur de votre choix
- vous récupérez son lien direct
- depuis le code du message précédent, vous cherchez la cellule contenant 66
- Vous effacez le 66 et vous placez le lien du fragment entre balises img
Ceci :

Code:

[td]66[/td]

doit devenir cela :

Code:

[td][img]https://ixx.servimg.com/u/fxx/xx/xx/xx/xx/nom_de_l_image.jpg[/img][/td]

- Une fois le fragment en place sur le forum, sur votre disque dur déplacez l'image correspondante dans le dossier l'hermite. Vous êtes certain de ne jamais placer par erreur un fragment déjà révélé auparavant.
Le nom des dossiers n'a évidemment aucune importance. D'ailleurs celui des images non plus, mais là c'est bien plus facile de s'y retrouver si le nom des images est similaire à la numérotation des cellules du code.

[Keskispas]

Bonsoir,

C'est extraordinaire!!
C’est vraiment ce que je désirais!

Je viens de tester, j'ai bien compris toutes vos explications, c'est que je ne suis pas aussi stupide que cela!!
Juste un petit problème. J'ai bien redimensionner mon image à 480 X 360, j'ai bien découper cette image en 144 parties de chacune 40X30.
Mais quand je les affiche sur le tableau les image ne sont pas jointives!?
En fait il y a chaque fois l'épaisseur de la ligne qui forme le tableau qui empêche les images de se joindre.

Voir forum test ;
Avez vous explication??

En tout cas je ne peux que déjà dire bravo pour le résultat!!

[Neptunia]

Je m'en veux de ne pas avoir testé en grandeur nature vu que le premier jet était fonctionnel.

Je viens d'essayer d'occulter complètement le fond, ce qui dans l'exemple de départ revenait à mettre un fragment (tjs le même) dans chaque case.


Le fond n'est apparent nulle part !
J'ai aussi essayé de remplacer l'image de fond par une couleur de fond (comme dans le code actuel). Même constat !

Et je serai bien en peine d'expliquer pourquoi ça fonctionne avec des images carrées de 100px et que ça ne fonctionne plus avec des images rectangulaires (40*30)

Je pense pouvoir contourner le souci avec un peu de css.
Remplacez l'entête de table par

Code:

[table class="img_grid" style="width: 480px; height: 360px; background-color:#74d0f1; border-collapse:collapse; border:2px solid #0000ff;"]

puis dans votre feuille de style, rajouter le bloc suivant :

Code:

table.img_grid td {
  width: 40px;
  height: 30px;
}

Je ne peux hélas pas tester, parce que soit hostingpics a un souci, soit vous avez effacé les images de test.

[Keskispas]

Re,

Il y à une nette amélioration, mais les images ne sont pas encore collée!

[Keskispas]

Voici le code placé dans le forum;

[Neptunia]

Probablement un tout petit problème de css, mais je me vois contrainte de passer la main.

Fonctionne chez moi !

---

Essayez à tout hasard d'ajouter ceci au css

Code:

table.img_grid td img {
    border-width: 0;
}

[Keskispas]

Re,

Non, aucun changement. Ne vous tracassez pas de trop, Le travail que vous avez réalisé aujourd'hui est déjà bien au delà de ce que j'aurais pu faire seul.
je trouve que le résultat est déjà bien.

J'ai un peu chercher sur le net et le problème pour faire disparaître les bordures d'un tableau n'est pas facile à solutionner.

[Neptunia]

Mais ce qui me chiffonne c'est que justement les cellules n'ont aucune bordure. Je n'avais mis une bordure qu'à la table pour éviter l'effet quadrillage et faire en sorte que l'image ait l'air d'être en un seul morceau.

A la place du dernier code essayez celui-ci

Code:

    table.img_grid td img {
        border-width: 0 !important;
    }

Si ce dernier code ne fonctionne pas, il vous faudra attendre qu'un autre membre ait une idée pour résoudre ce souci.

[Keskispas]

Re,

Je pense que nous allons attendre de l'aide, malheureusement, aucun code ne change la mise en forme du tableau.

Mais comme je le disais, de toute façon un grand merci pour ton travail.
Je vais un peu chercher sur le net ce soir. Si jamais je trouve quelque chose et que je ne comprend pas bien, je reviens vers toi.

Bonne soirée.

[Neptunia]

Afin de cerner l'origine du problème essayez de poster ceci sous le tableau (ou n'importe où ailleurs.

Code:

[img]http://img4.hostingpics.net/pics/526253testjeuxwwwimagesplitternet64.jpg[/img][img]http://img4.hostingpics.net/pics/642721testjeuxwwwimagesplitternet65.jpg[/img][img]http://img4.hostingpics.net/pics/417535testjeuxwwwimagesplitternet66.jpg[/img][img]http://img4.hostingpics.net/pics/161779testjeuxwwwimagesplitternet67.jpg[/img]

Si mon hypothèse se vérifie, les images seront collées ici (ou chez moi) et séparées sur votre forum. Ce qui démontrerait que le problème ne vient pas du tableau, mais de toutes les images sur votre forum.

[Keskispas]

re,

les images sont collées sur mon forum.

[Keskispas]

A lire;

[Neptunia]

Essayez de remplacer l'en-tête de table par :

Code:

    [table class="img_grid" cellspacing="0" style="width: 480px; height: 360px; background-color:#74d0f1; border-collapse:collapse; border:2px solid #0000ff;"]

Mais j'ignore si ça fonctionne en bbcode.

Le html est-il activé sur votre forum ?

[Keskispas]

Oui, le HTML est activé et non l'en-têté ne change rien!!
Je me demande où se trouve le problème?

[Neptunia]

C'est un problème au niveau du css

J'ai vu une bordure réglée à 1px sur chaque côté sur votre forum, qui était à 0 sur le mien.
Mais je ne suis pas parvenue à changer cette valeur comme je le fais habituellement depuis la console du navigateur.