Placer des pastilles sur un PDF

**Phobizeur** · 12/05/2017, 12h14

Bonjour à tous,

Je vous explique ma problématique qui pourra surement servir à d'autre !

j'affiche dans une Iframe un pdf qui est lu par le lecteur PDF par default du navigateur.
J'aimerais savoir s'il est possible de placer des pastilles (genre une petite image d'un rond) pour marquer certain endroit sur le PDF.
Sauf que je ne peux pas modifier directement le PDF, il va falloir que je fasse en CSS ou je ne sais comment.
Et pour le petit challenge, l'Iframe qui affiche le pdf est dans une page avec des choses autour et je reçois la position d'une pastille avec un X et Y compris entre 0 et 1 et l'Iframe est compris comme un carré de 1 sur 1.
Donc il faut pouvoir trouver la position de l'iframe dans la page puis placer la pastille sur cette échelle de 1 sur 1 qui ne concerne que l'iframe

Pensez vous que c'est possible ? Si oui, avez vous des idées ?

Je vous en serai éternellement reconnaissant !

Merci d'avance,

Phobizeur

**NoSmoking** · 13/05/2017, 11h59

Bonjour,

J'aimerais savoir s'il est possible de placer des pastilles (genre une petite image d'un rond) pour marquer certain endroit sur le PDF.

oui c'est possible avec un peu de CSS

Et pour le petit challenge, l'Iframe qui affiche le pdf est dans une page avec des choses autour...

ceci n'est pas un problème.

je reçois la position d'une pastille avec un X et Y compris entre 0 et 1 et l'Iframe est compris comme un carré de 1 sur 1.

Ceci va te permettre de gérer la position en pourcentage, c'est un plus.

Il te faudra quoi qu'il arrive user de javascript pour calculer le positionnement en pourcentage.

Exemple en plaçant une « pastille » au centre de l'<iframe> :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>[CSS] Pastille sur IFRAME</title>
<meta name="Author" content="NoSmoking">
<style>
.cadre_iframe {
  display: block;
  position: relative;
  width: 40em;
  height: 40em;
  margin: 2em auto;
}
.cadre_iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.cadre_iframe:before {
  content: "\02573";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2em;
  height: 2em;
  border: 2px solid #f00;
  border-radius: 50%;
  text-align: center;
  line-height: 2em;
  color: #f00;
  transform: translate( -50%, -50%);
}
</style>        
</head>
<body>
  <div class="cadre_iframe">
    <iframe src="fichier.html"></iframe>
  </div>        
</body>
</html>

Placer des pastilles sur un PDF

Positionnement en CSS

Discussions similaires

Partager

Partager