border sur des areas

**bahh66** · 10/12/2022, 12h23

Bonjour,
je travaille actuellement sur la réalisation d'une image cliquable (plan d'église). Je veux donc mettre en place des map area qui renvoient vers une page ou une boite de dialogue.
Pour que les map area soient bien visibles, j'aimerais qu'elles aient une bordure clignotante.

Je me suis dis que je pourrais donner un data-id aux area permettant ensuite dans le css de créer la bordure et l'animation? Mais je n'y arrive pas.

Est-ce que ma démarche n'est pas fonctionnelle?

Une idée du code que j'ai mis en place.

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
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  .transept {
       position: absolute;
       border:solid;
       border-color: red;
}
 
#transept  {
   animation-duration: 1.8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
} 
     </style>
</head>
<body>
    <map name="testmap" id="zones_image">
		<!--Transept-->
		<area
			shape="circle"
			coords="100,100,10"
			data-id="transept"
      		/>
	</map>
 
 <div class="cadre-image">
  <!-- image fond -->
  <img id="img-fond" usemap="#testmap" src="plan_eglise.jpg">
</div>
</body>
</html>

**Vincent668** · 25/12/2022, 08h26

Salut,
En css il y à quelques solutions, par exemple de superposer deux div l'une contenant le style pour la bordure et l'autre l'image.
La premier étant en position absolute.

Le code ci-dessous fonctionne vous devez ajustez les paramètres de longueur et hauteur en fonction de votre image :

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
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
#transept {
border: solid red 2px;      
animation-duration: 1.8s;
animation-name: clignoter;
animation-iteration-count: infinite;
 transition: none;}
.cadre-image2 { position:absolute; width:596px; height:596px;}
 
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
} 
     </style>
</head>
<body>
    <map name="testmap" id="zones_image">
		<!--Transept-->
		<area
			shape="circle"
			coords="100,100,10"
			data-id="transept"
      		/>
	</map>
 <div id="transept" class="cadre-image2"></div>
 <div  class="cadre-image">
  <!-- image fond -->
  <img src="../assets/img/Enlever/team/team-2.jpg" width="600" height="600" usemap="#testmap" id="img-fond"></div>
</body>
</html>

Ou plus 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
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @-webkit-keyframes blink { 
   50% { border-color: #ff0000; } 
}
@keyframes blink { 
   50% { border-color: #ff0000; } 
}
#image-fond {
    padding: 20px;
    border: 10px solid transparent;
  
}
 
#image-fond {
     animation: blink .5s step-end infinite alternate;
    -webkit-animation: blink .5s step-end infinite alternate;
}
        
        
 
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
} 
     </style>
</head>
<body>
    <map name="testmap" id="zones_image">
		<!--Transept-->
		<area
			shape="circle"
			coords="100,100,10"
			data-id="transept"
      		/>
	</map>
 
 <div id="cadre-image">
  <!-- image fond -->
  <img id="image-fond" src="plan_eglise.jpg" usemap="#testmap"></div>
</body>
</html>

Si cela ne convient pas alors il faut le faire avec un script.
Bien à vous

**bahh66** · 25/12/2022, 09h12

Salut, et merci de répondre un 25 décembre.

En fait je ne veux pas que ce soit l'image complète qui est un cadre clignotant, mais bien juste une zone de l'image (d'où le map area).

Je souhaiterais avoir ainsi plusieurs points clignotants marquant l'emplacement de zones à cliquer.

**Vincent668** · 25/12/2022, 10h01

Re,
Je ne sais pas si c'est la bonne solution...
Il faut jouer avec les marges.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @-webkit-keyframes blink { 
   50% { border-color: #ff0000;  border-radius: 50%; } 
}
@keyframes blink { 
   50% { border-color: #ff0000;  border-radius: 50%; } 
}
#zones_image {
    padding: 20px;
    border: 10px solid transparent; position:absolute;
        margin-top:25px;
        margin-left:150px;
        
        
  
}
 
#zones_image {
     animation: blink .5s step-end infinite alternate;
    -webkit-animation: blink .5s step-end infinite alternate;
}
        
        
 
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
} 
     </style>
</head>
<body>
 
 
 <div id="cadre-image">
 <map name="testmap" id="zones_image" >
		<!--Transept-->
 
</map>
  <!-- image fond -->
  <img id="image-fond" src="../assets/img/Enlever/team/team-4.jpg" usemap="#testmap"></div>
</body>
</html>

Bien à vous

**bahh66** · 25/12/2022, 10h28

Alors, en effet cela clignote mais seulement une fois et pas forcément là où il y a la map area.

Dans mon code, j'ai 2 zones identifier avec des data-id et j'aimerais que sur chacune d'elles, il y ait un cercle qui clignot, voire la zone complètement entourée.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @-webkit-keyframes blink { 
   50% { border-color: #ff0000;  border-radius: 50%; } 
}
@keyframes blink { 
   50% { border-color: #ff0000;  border-radius: 50%; } 
}
#zones_image {
    padding: 20px;
    border: 5px solid transparent; position:absolute;
        margin-top:25px;
        margin-left:150px;
}
 
#zones_image {
     animation: blink .5s step-end infinite alternate;
    -webkit-animation: blink .5s step-end infinite alternate;
}
 
 
 
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
} 
     </style>
</head>
<body>
 
 
 <div id="cadre-image">
 <map name="testmap" id="zones_image" >
		<!--Transept-->
    <area
    shape="circle"
    coords="320,220,45"
    href="https://developer.mozilla.org/"
    data-id="developper"
  />
  <area
  shape="circle"
  coords="120,220,45"
  href="https://www.developpez.net/forums/d2142737/webmasters-developpement-web/mise-page-css/border-areas/"
  data-id="forum"
/>
</map>
  <!-- image fond -->
  <img id="image-fond" src="plan_eglise.jpg" usemap="#testmap"></div>
</body>
</html>

**Vincent668** · 25/12/2022, 13h34

Je ne comprend pas ce que vous désirez.
Vous avez une image d'un plan d'église sur laquelle vous aimeriez avoir deux zone (cercle clignotant) qui spécifie un endroit plus précis sur l'image, est-ce bien cela ?

**bahh66** · 25/12/2022, 14h00

Oui c'est ça.
En gros, j'ai un plan d'église avec plusieurs zones cliquables (environ une quinzaine).
Et donc j'aimerais que pour chaque zones, il y ait un cercle (ou le contour de la zone) qui clignote (à l'emplacement de la zone bien entendu).

**Vincent668** · 25/12/2022, 14h45

Et en responsive ?

**bahh66** · 25/12/2022, 15h36

Si possible oui mais sinon je verrai ça dans un second temps en utilisant ça si possible.

**bahh66** · 26/12/2022, 10h23

J'ai trouvé ceci pour faire apparaitre des cercles avec la fonction mouseover()https://codepen.io/cyril-gomez/pen/yLqYxgv

mais du coup les visiteurs ne voient pas du premier coup d'oeil où ils doivent cliquer. Ils doivent chercher sur l'image les zones cliquables.
J'aimerais pouvoir le modifier pour faire apparaitre tout le temps les cercles

**Vincent668** · 26/12/2022, 13h41

Ha j'étais par là aussi :https://codepen.io/abduls93036/pen/ZVeBEJ
Celui-ci devrais vous convenir, j'ai testé, vous pouvez ajouter facilement des cercles et changer l'image. Par contre coté responsive je n'ai rien trouvé à par votre lien sur developpez.
Bien à vous

border sur des areas

CSS

Discussions similaires

Partager

Partager