Rogner transparence image

**pipitt05000** · 13/04/2014, 15h52

Bonjour ! Aujourd'hui je crée un jeu Online de construction de ville et tout le bazar.
J'en suis à un stade bien avancé de mon jeu, à un (gros) détail près... Les contour de l'image !

Je m'explique: tout est un problème de "cadre" ! :p

Tout d'abord, j'ai une image (d'exemple) tel que celle-ci:
Nom : q5qk3O3.png
Affichages : 241
Taille : 981 octets

Nom : q5qk3O3.png
Affichages : 241
Taille : 981 octets

(Le contour est naturellement invisible...)

On sait donc que cette image à un cadre:
Nom : QyV4lvR.png
Affichages : 236
Taille : 668 octets

Et donc, ce que j'aimerais (par toute les méthodes possible comme Flash, CSS, jquery ou autre chose), c'est un cadre comme celui la:
Nom : g9sjlol.png
Affichages : 234
Taille : 578 octets

Nom : g9sjlol.png
Affichages : 234
Taille : 578 octets

Tout ça est une histoire d'image chevauchante, j'aimerais cliquer sur celle de derrière sans prendre en compte le "cadre"...

Quelqu'un de brave aurait une solution ?

**NoSmoking** · 13/04/2014, 16h02

Bonjour,
regarde peut être du coté de l'attribut usemap des images.

http://cyberzoide.developpez.com/html/map.php3

**pipitt05000** · 13/04/2014, 16h07

Merci beaucoup !

Je vais voir ça...

**pipitt05000** · 13/04/2014, 16h51

En faite, c'est beaucoup trop compliqué vu la tronche de l'image...

Il n'y aurait pas une autre option afin de pouvoir cliquer sur l'élément derrière la transparence de l'image ?

**thelvin** · 14/04/2014, 09h42

Avec des <canvas>. Au clic, tu regardes sur quel pixel du canvas tu as cliqué, puis tu regardes les données de ce pixel. Si le canal transparence est à 0 (ou à pas beaucoup, comme tu veux,) c'est un pixel transparent et il faut traverser l'image.

Naturellement ça n'a rien à voir avec CSS

**NoSmoking** · 14/04/2014, 13h12

Si les formes géométriques sont simples, tu peux t'en sortir en jouant sur un empilement de zone, celle du dessus masquant celle du dessous.

exemple de simulation simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>USEMAP</title>
<style>
#div_image{
  position:relative;
  width:216px;
  height:90px;
}
#div_image img{
  border:none;
  position:relative;
}
#centre_image{
  border:1px dotted #00f;
  position:absolute;
  top:20px;
  left:50px;
  width:116px;
  height:50px;
}
</style>
</head>
<body>
<div id="div_image">
  <div id="centre_image"></div>
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo" usemap="#map">
</div>
<map name="map">
  <area shape="rect" coords="50,20,166,70" onclick="alert('centre image')">
  <area shape="rect" coords="0,0,216,90" onclick="alert('out centre image')">
</map>
</body>
</html>

**pipitt05000** · 15/04/2014, 20h34

Envoyé par thelvin

Avec des <canvas>. Au clic, tu regardes sur quel pixel du canvas tu as cliqué, puis tu regardes les données de ce pixel. Si le canal transparence est à 0 (ou à pas beaucoup, comme tu veux,) c'est un pixel transparent et il faut traverser l'image.

Naturellement ça n'a rien à voir avec CSS

Ce que tu es en train de me dire c'est qu'il est donc possible de cliquer au travers de la transparence d'une image ? O.o

**thelvin** · 15/04/2014, 23h57

Plus ou moins, en contournant le problème. Si tu insères cette image dans un <canvas> il devient possible de lire les données RGBA de ses pixels. Et donc de vérifier si ses pixels sont transparents ou non. Lorsqu'il y a clic à un endroit sur ce <canvas>, il est donc possible de regarder à quelle image ça correspond, en étudiant de la plus au-dessus à la plus en-dessous, si oui ou non le pixel est opaque ou transparent, et dans le cas de la transparence, passer à l'image suivante.

Ça demande toute une mécanique JavaScript, mais ça marche. Un peu le principe des jeux HTML5.

Rogner transparence image

CSS

Discussions similaires

Partager

Partager