STIC Discussion:STIC I - exercice 6 (Drakkar)

Balise "object"

Bonjour, Je souhaite insérer dans mon dispositif une image svg grâce à la balise "object" afin de pouvoir la travailler, mais cela ne fonctionne pas. Pourtant, si j'essaye d'insérer la même image avec la balise "img", cela fonctionne. Sauriez-vous me dire pourquoi ?

Julie Grunder Julie G (discussion) 20 janvier 2024 à 16:31 (CET)

Re: Balise "object" -- Mattia A. Fritz (discussion) 21 janvier 2024 à 13:14 (CET)

Bonjour,

Il faudrait voir votre code pour avoir une meilleure idée de ce que vous voulez dire/faire pour travailler une image SVG. Si vous imaginez la manipuler avec JavaScript, alors les techniques disponibles sont différentes, certaines sont disponibles dans la page SVG avec JavaScript.

Bien cordialement,

Re: Re: Balise "object" -- Anissa Nasri (discussion) 31 janvier 2024 à 11:14 (CET)

Bonjour, il n'est pas possible d'ouvrir un autre sujet de discussion car il y a un beug. Je rencontre un problème avec mon ex 6 que je n'arrive pas à comprendre. Tous mes dispositifs fonctionnent en local et quand je poste l'ex 6 dans le serveur tecfa, un des dispositif (entraînement) ne fonctionne plus. Mais, quand je recharge la page, il fonctionne. Je ne comprends pas bien d'où provient ce problème..? J'avais mis ./ devant tous mes chemins et ai enlevé cela pour voir si ça fonctionnait.. merci beaucoup.

Cordialement,

Anissa Nasri

Re: Re: Re: Balise "object" -- Mattia A. Fritz (discussion) 31 janvier 2024 à 22:25 (CET)

Bonsoir,

En effet cela semble marcher au deuxième passage, probablement parce que la page se compose plus rapidement depuis la cache. Une possibilité serait que à cause des différents éléments externes à charger dans votre page, le SVG n'est pas encore reconnu au premier chargement avant que le code est exécuté.

Essayez de mettre le code pour votre SVG dynamique à l'intérieur d'un event listener de type DOMContentLoaded, peut-être que ceci permet de régler l'ordre de chargement des différents éléments.

document.addEventListener("DOMContentLoaded", function(event) {
  //Votre code ici
  var svg = document.getElementById("bodySVG");

 //Appliquer un gestionnaire d'événements de type load à l'élément SVG préalablement identifié//
 svg.addEventListener("load", function () {
    console.log("le svg est présent")
    //Mettre la propriété .contentDocument qui permet d'accéder au DOM de l'élément externe incorporé dans la page//
    var body = svg.contentDocument;
    // Créér un éventail avec les différents éléments IDs//
    var bodyElements = ['cerveau', 'poumon droit', 'poumon gauche', 'coeur', 'côlon ascendant','côlon descendant','intestin grêle (duodénum)', 'intestin grêle (jéjunum)', 'intestin grêle (iléum)'];
    // Créer une boucle pour que la fonction s'applique à tous les organes//
    bodyElements.forEach(function (el) {
        console.log("la boucle fonctionne")
        // Créer une variable qui attribue la fonction à chaque organe en couleur du corps//
        var current = body.getElementById(el);
            // Créer un mouseover pour que le curseur change afin de montrer que l'élément est cliquable//
        current.addEventListener("mouseover" , function () {
            current.style.cursor = "pointer";
        });
            //Créer une fonction pour attribuer le feed-back en fonction de l'organe cliqué//
        current.addEventListener("click", function () {
            var feedback = document.getElementById("partsName");
            //Créer une variable couleur pour extraire la couleur de remplissage en fonction de l'organe cliqué//
            var partsColor = window.getComputedStyle(current).fill;
            //Modifier la partie de texte HTML concernée en stylisant et adaptant le nom et la couleur de l'organe cliqué//
            feedback.innerHTML = "Tu as cliqué sur <b><span style='color: " + partsColor + "; '>" + el.toUpperCase() + "</span></b>";
        });
    });
 });
});

Bien cordialement,

Page Travaux

Bonsoir,

Je vous mets un mot pour vous informer que ma page travaux rencontre des problèmes. Tous mes liens sont corrects et si vous cherchez directement le rapport ou l'exercice vous y avez accès, ils sont donc bien téléversés. Les liens sur ma page travaux sont justes, mais refusent de s'ouvrir. Il se pourrait que ce soit un problème au niveau du serveur tecfa.

Bonne soirée.

Cordialement,

Jenny Freimüller