Discussion :

[Invité]

Bonjour,

En suivant ce tutoriel :
https://www.petercollingridge.co.uk/...ctive/tooltip/

Je dois normalement utiliser ECMAScript.

Dans mon SVG :

Code :

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
  <script type="text/ecmascript"> <![CDATA[
 
    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }
 
    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }
 
    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>

Ajouter onload="init(evt)" dans l'élément SVG pour appeler la fonction init ().

Ensuite, à la fin du SVG, ajouter le texte de l'infobulle :

Code html :

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

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

Enfin, à chacun des éléments auxquels je souhaite ajouter la fonction de survol de la souris :

Code :

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

1
2
3
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

Je suppose que c'est dû au fait que je réutilise plusieurs fois mon image SVG, mais je ne comprends pas comment le mettre en place.

Pourriez-vous m'aider SVP ?

[NoSmoking]

Bonjour,
peut-être devrais-tu regarder cette discussion : Infobulle SVG Path.

J'avais mis un exemple en ligne :

↪ Info-Bulle sur SVG

[Invité]

Bonjour,

Merci pour cette exemple.

Dans mon cas, le premier (path id) serait égale à ($title) ou ($debut) et le second (path id) serait égale à ($fin), ou un (path id) à créer en référence à mes deux (SvgTxt) ?

J'avoue, ne pas bien saisir comment porter ce code en JavaScript à mon besoin !
J'aurais vraiment besoin d'aide ?

Bien cordialement

[NoSmoking]

Visiblement tu mélanges un peu tout mais surtout si tu veux avoir accès à tes SVG via le JavaScript il te faut intégrer les images SVG en tant qu'élément SVG et non en tant qu'image <img>.

On devrait donc retrouver dans ton code des « vrais » élément <svg> du style

Code html :

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

1
2
3
<svg xmlns="http://www.w3.org/2000/svg"  width="220" height="40">
  <!-- les éléments enfants -->
</svg>

et non

Code html :

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

<img class="classProg" src="images/image.php?width=220&amp;height=40&amp;prog=n,05:30,22:00&amp;title=Mar">

... donc il va ta falloir faire des include pour chacune de tes images.

Ensuite tu pourras simplement accéder à tes différents éléments et les manipuler comme tu le souhaites.

Remarque :
• <script type="text/ecmascript"> est obsolète et peux simplement être remplacé par <script> tout court.

• Dans ton fichier image.php il ne te faudra renvoyer que le code <svg> et supprimer tes entêtes comme

Code html :

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

1
2
3
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

[Invité]

Le novice que je suis, n'imaginais pas que cela était si complexe !

Les includes doivent bien porter sur les éléments de mon image ? soit (SvgTxt, SvgLine et SvgRect) ?

Je ne suis même pas sûr de la manière de faire ces includes !
<?php include("Mon élément"); ?>.

Auriez-vous le temps de me faire un exemple concret résument l'interaction (html + javascript + php) dans le contexte similaire au mien ?

Bien cordialement.

[NoSmoking]

Si l'on part de ce que tu as réalisé, dans ton fichier image.php il te faudrait créer une fonction, par exemple :

Code php :

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

1
2
function create_image($width, $height, $prog, $title) {
}

et c'est cette fonction qui sera appelée dans ta page vue.php.

Il te suffira de transformer tes paramètres $_GET en paramètre de fonction.

Dans ta page vue.php tu peux créer un array des données et boucler sur celui-ci pour au final avoir quelque chose de « simple » comme :

Code php :

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
<?php
include 'images/image.php';  // peut-être choisir un nom plus pertinent
$data = array(
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Lun.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Mar.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Mer.'),
  array( 'prog' => 'n,08:30,16:00', 'title' => 'Jeu.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Ven.'),
  array( 'prog' => 'n,00:00,24:00', 'title' => 'Sam.'),
  array( 'prog' => 'n,00:00,00:00', 'title' => 'Dim.'),
);
foreach( $data as $d){
  // signature fonction :
  // create_image($width, $height, $prog, $title)
  echo create_image( 220, 40, $d['prog'], $d['title']);
}
?>

pour le JavaScript, on verra après si tu le veux bien.