Image avec uri dynamique + event onmouseover

**logicanalyse** · 05/05/2011, 10h37

Bonjour à tous,

J'ai un rapport avec un tableau croisé et une image.
J'aimerai que lorsque la souris passe sur un champ de mon tableau croisé, cela affiche l'image correspondante.

Pour schématiser le tout :

------------------------------------
¤¤¤¤¤¤¤| Lundi | Mardi | Mercredi |
------------------------------------
Janvier |¤¤¤¤¤¤¤|¤¤¤¤¤¤¤|¤¤¤¤¤¤¤¤|
------------------------------------
Février |¤¤¤¤¤¤¤|¤¤¤¤¤¤¤|¤¤¤¤¤¤¤¤|
------------------------------------

----------------
| Cadre destiné |
|¤¤ à l'image ¤¤|
---------------

Le tableau croisé est alimenté à partir d'un cube, dans lequel j'ai le nom du mois, le chemin de l'image qui lui est associé, les noms de jours......

Est ce que quelqu'un aurait des pistes?

Grand merci de votre attention et de vos réponses ;-)

**David55** · 05/05/2011, 11h12

Sur ton champ, tu as la possibilité de placer un hyperlink (dans les propriétés).
Lorsque tu clique sur "edit ...". Une fenêtre s'affiche. A mon avis c'est ici qu'il faudra lui indiquer d'afficher une photo!

Cependant, il faut essayer. Je ne sais pas quel type d'hyperlien il faut choisir et je pense qu'il faudra passer par des variables mais ca ce n'est pas sure!

De plus ma solution fonctionnera seulement lorsque tu cliqueras dessus!

Bon courage.

**logicanalyse** · 05/05/2011, 14h51

Merci David55, c'est une bonne idée!

Le fait de passer par le clic au lieu du mouseover n'est pas tellement gênant.
J'ai fouillé un peu dans cette direction, mais je n'ai rien trouvé de probant.
Il faudrait pouvoir faire un lien de type uri dont la cible est un signet interne.

Et là, je ne trouve pas comment :-(

D'autres solutions ou suggestions?

**David55** · 05/05/2011, 15h44

J'ai trouvé un exemple plutôt intéressant et pouvant répondre à ton besoin (piece jointe).

Cependant, il faut apporter beaucoup de modification pour que cela face ce que tu veux! C'est un bon début.

Exécute le rapport en pièce jointe: lorsque tu passes ta souris sur le graphe ou sur le tableau, la ligne correspondante se met en surbrillance. Ceci s'exécute grâce à un script (celui que tu vas devoir modifier) situé dans un composant de type Text dans le tableau.

Je pense que ceci peut beaucoup t'aider!

EDIT: si tu es à l'haise en javascript la solution est simple. Il te suffit de déclarer une div (celle qui va contenir ton image) contenant un id (

Code :

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

<div id='image'></div>

) avec le composant "Text" et tu affiches chaque valeur de ton tableau dans un composant "Text" comme ceci:

Code :

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

1
2
 
<a href="" mouseover=afficheImage('<VALUE-OF>row['NomChamp']</VALUE-OF>')><VALUE-OF>row['NomChamp']</VALUE-OF></a>

reste plus qu'à programmer afficheImage(nomChamp) qui va modifier ta div dans un composant "Text" au début de ton rapport

**David55** · 05/05/2011, 16h10

Ce deuxième exemple est encore plus clair! C'est exactement ce que tu veux faire sauf qu'au lieu du tableau c'est un chart et au lieu d'une image c'est un tableau.

L'explication détaillée ici

**logicanalyse** · 05/05/2011, 17h51

Merciiiiiiiiii Daniel55.

Avec tes exemples, j'ai réussi à m'en sortir.
Le second était très complet en effet.

Il fallait donner des id différents aux cellules du tableau croisé qui m'intéressaient et ensuite jongler avec des innerHTML en javascript pour récupérer le chemin de l'image.

Mon explication n'est peut être pas très claire, mais si jamais quelqu'un veut en savoir plus, ce qu'a dit Daniel55 est suffisant.

Encore merci et Bonne soirée!!!

**David55** · 05/05/2011, 17h55

De rien c'est un plaisir

PS: c'est David et non Daniel

**logicanalyse** · 06/05/2011, 09h39

Zut, désolé pour le prénom, c'est l'excitation du moment.

En intégrant mon rapport BIRT dans ma page web ce matin (je passe par une iframe), je me rends compte que mon code javascript n'est pas du tout interprété. Les évènements mis en place qui fonctionnaient parfaitement dans le viewer de BIRT ne sont plus gérés, semble-t-il.

Je vais peut être ouvrir une autre discussion à ce sujet, mais si tu as déjà une idée, je suis preneuse.

Merci.

**David55** · 06/05/2011, 10h27

Peut être que ton navigateur bloque la java script dans ce cas!

IL faut voir! Tu as essayé avec plusieurs navigateurs?

Regarde aussi la console d'erreur javascript!

Sur firefox c'est outil/Console d'erreur

**logicanalyse** · 06/05/2011, 10h37

Alors là, je me serai pas attendu à ce que quelque chose qui ne passe ni sous firefox, ni sous chrome, fonctionne sous IE.
Et effectivement, tu as raison!!!

Je vais fouiller pour voir s'il n'y a pas moyen que ça passe sous firefox, sinon, je me résoudrai à imposer IE comme navigateur aux utilisateurs finaux.

Encore merci!

Edit : et il y a plein d'erreurs dans la sonsole de firefox. Apparemment, juste des problèmes de style == déclaration abandonnée. A analyse....

**David55** · 06/05/2011, 11h13

Normalement, tu as juste a corriger ton script selon les logs et ca fonctionnera sur les autres navigateurs!

Si tu as un soucis poste tes logs et ton scripts, on pourra peut être trouver ce qui bloque ton javascript!

**logicanalyse** · 06/05/2011, 11h51

En fait, il n'y a que des avertissements.
J'ai beau regarder attentivement, c'est des éléments de style : le plus souvent "erreur d'analyse de la propriété font". Donc, rien de grave à priori. Et il n'y a rien dans l'onglet "erreurs".
Alors, le code :

1°) Je fais un beforeFactory sur le rapport :

Code :

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

1
2
3
4
5
6
7
 
gg=0;
myi = "aggr"+ gg;
oo=0;
img = "img"+ oo;
nm=0;
nom = "nom"+ nm;

Là, j'initialise les variables qui vont définir les identifiants des cellules de mon tableau croisé.

2°) Je fais un onCreate sur les cellules du tableau:

Code :

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

1
2
3
 
gg=gg+1;
myi = "aggr"+ gg;

Il s'agit ici d'incrémenter les variables, la même chose est faite pour 'oo' et 'nm'. Je sais que les noms ne sont pas significatifs, mais dans la précipitation, je ne suis pas très créative...

3°) Je mets mon script dans un Text Dynamic

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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<script type="text/javascript">
 
var IE=false;
 
function mo(s)
{
 if( IE )
  {
     e=s.srcElement
  }
 else
  {
     e = s.target;
  }
 e.style.cursor="pointer";
}
 
 
function go(s)
{
 if( IE )
  {
     e=s.srcElement
  }
else
  {
     e = s.target;
  }
 
//Identifiant cliqué
var id_clic = e.id;
var number=id_clic.substring(4,5);
 
//Chemin de l'image
var dest="img"+number;
var oDest=document.getElementById(dest);
var contenu_dest = oDest.innerHTML;
var url_dest="http://ecommerce.fr.logica.com/html/logica/qualif/demo/media/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95"+contenu_dest;
 
//Nom du produit
var nom="nom"+number;
var oNom=document.getElementById(nom);
var contenu_nom = oNom.innerHTML;
 
//Changement du backgrountImage avec le chemin obtenu
var oImg=document.getElementById("textcontrol");
oImg.style.backgroundImage='url('+url_dest+')';
 
//Changement du nom du produit dans un div
var oText=document.getElementById("nom");
oText.innerHTML=contenu_nom;
 
}
 
 
function addscr(){
 
maxi = parseInt(<VALUE-OF>gg;</VALUE-OF>)
 
for( curr_i=0; curr_i < maxi;curr_i++ )
  {
      str1 = "aggr"+curr_i
      oDiv = document.getElementById(str1);
 
       if (oDiv.addEventListener) 
        {   
       oDiv.addEventListener('onclick', go, false);
       oDiv.addEventListener('onmouseover', mo, false);  
         } 
       else if (oDiv.attachEvent) 
        { 
       IE=true;  
           oDiv.attachEvent('onclick', go);   
           oDiv.attachEvent('onmouseover', mo);   
        }
 
  }
}
addscr();
 
</script>

Alors, pour chaque cellule de mon tableau croisé (enfin, celles sui m'intéressent), je leur attache un évènement onClick et un évènement onMouseOver.

Le onClick déclenche la fonction 'go'. Cette dernière va aller chercher dans les cellules qui correspondent à l'élément cliqué le nom et le chemin de l'image de l'identifiant produit cliqué. Le tout est ensuite mis, soit en contenu pour le div 'nom', soit en backgroundimage pour le div 'textcontrol'.

Le onMouseOver déclenche juste le changement de style pour la cellule en question. C'est du détail : il s'agit de mettre la souris en pointer.

Voilà, j'espère être assez claire.
S'il faut plus d'informations, je suis disposée à les fournir.

Gracias.

**David55** · 06/05/2011, 11h59

Tre sbien il manque juste les logs :p (Pour savoir où ca bloque)

**David55** · 06/05/2011, 12h03

Un petit conseil pour déboguer du javascript:
IL suffit de mettre des alert dans ton code afin de voir exactement où ca coince.
Des que le java script rencontre un problème, il s'arrête de s'exécuter donc tout les alert ne s'afficheront pas normalement!

De mon coté je ne peux pas tester avec des alert mais toi si

**logicanalyse** · 06/05/2011, 12h07

Question bête

: où est ce que je peux les trouver?
Dans la console d'erreurs, je ne vois pas de 'logs'.

**David55** · 06/05/2011, 12h12

Sur firefox c'est outil/Console d'erreur

N'oublie pas de faire effacer avant de générer ton rapport

**David55** · 06/05/2011, 12h17

En faite, avant de démarrer un débogage intensif :p, peux tu vérifier sur Firefox dans outils > options ... > contenu si "activer le javascript" est coché

**logicanalyse** · 06/05/2011, 12h24

J'ai essayé de faire au mieux pour que ce soit lisible:

Avertissement : Erreur d'analyse de la valeur pour « font ». Déclaration abandonnée.
Fichier Source : http://127.0.0.1:8080/BirtViewer/web...yles/style.css
Ligne : 22

Avertissement*: Erreur d'analyse de la valeur pour «*filter*». Déclaration abandonnée.
Fichier Source*: http://127.0.0.1:8080/BirtViewer/fra...&__format=html
Ligne*: 0

Avertissement*: Erreur d'analyse de la valeur pour «*left*». Déclaration abandonnée.
Fichier Source*: http://127.0.0.1:8080/BirtViewer/fra...&__format=html
Ligne*: 0

Avertissement*: Erreur d'analyse de la valeur pour «*cursor*». Déclaration abandonnée.
Fichier Source*: http://127.0.0.1:8080/BirtViewer/web...yles/style.css
Ligne*: 255

Avertissement*: Une fin de valeur était attendue, mais «*top*» a été trouvé. Erreur d'analyse de la valeur pour «*left*». Déclaration abandonnée.
Fichier Source*: http://127.0.0.1:8080/BirtViewer/web...yles/style.css
Ligne*: 412

Avertissement*: Propriété «*zoom*» inconnue. Déclaration abandonnée.
Fichier Source*: http://127.0.0.1:8080/BirtViewer/fra...&__format=html
Ligne*: 0

Avertissement*: Déclaration attendue, mais «***» trouvé. Passage à la déclaration suivante.
Fichier Source*: http://127.0.0.1:8080/BirtViewer/fra...&__format=html
Ligne*: 0

**David55** · 06/05/2011, 12h32

Ca doit venir de la déclaration de ta variable 'e'! Il y a souvent ce problème quand on utilise plusieurs navigateurs.

Essaye de l'initialiser comme dans l'exemple suivant:

Code :

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

1
2
3
4
5
6
7
8
9
 
function doSomething(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
}

**logicanalyse** · 06/05/2011, 14h07

Hum, le problème ne semble pas venir de là.
J'ai tester, ça n'a rien changé.

J'ai alors mis un alert("toto") au tout début de la fonction javascript :

function addscr(){
alert("toto");
maxi = parseInt(<VALUE-OF>gg;</VALUE-OF>)
.....................

(Cf. messages précédents)

Sous IE, le "toto" est bien renvoyé, mais pas sous firefox.
C'est comme s'il n'appelait même pas la fonction.

Pourtant, j'ai testé d'autres codes js (dans une page classique) récemment et je n'ai pas rencontré de problèmes.... mystère

Image avec uri dynamique + event onmouseover

BIRT

Discussions similaires

Partager

Partager