Boucle sur "OnMouseOver"

**RKOCOCO** · 07/04/2009, 16h50

Bonjour

je réouvre le topic !! En fait je souhaiterai faire la même chose sauf que j'utilise une interface SVG mais avec du Javascript. Sur ma page SVG j'ai

Code :

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

1
2
 
<image id="Bob" x="50" y="200" width="150" height="180" xlink:href="Bob/bob1.png"/>

et dans mon fichier javascript j'ai

Code :

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

1
2
3
4
5
6
7
8
 
function bouge(x,y)
{     
  hautimage += y;
  gaucheimage += x;
  document.getElementById("Bob").style.top = hautimage;
  document.getElementById("Bob").style.left = gaucheimage;   
}

Cette action est lancée par un bouton avec l'attribut onclick:

Code :

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

1
2
 
<rect class="menu" id="t2" x="50" y="80" width="90px" height="26px" rx="3.8px" ry="1.3px" onclick="bouge(10,0)" >

Et le bouton marche car si je lui demande de m'écrire par exemple les coordonnées de l'image il le fait.

L'image, elle, ne bouge pas.....
Merci d'avance

**Bovino** · 07/04/2009, 16h58

Code :

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

1
2
document.getElementById("Bob").style.top = hautimage + 'px';
  document.getElementById("Bob").style.left = gaucheimage + 'px';

**E.Bzz** · 07/04/2009, 17h02

+1 pour les "px"

Mais encore faut-il que le CSS de l'image la définisse en position:absolute ou position:relative ...

A+

**RKOCOCO** · 07/04/2009, 17h04

Désole mais cela ne fait rien. Quel était le but de rajouté 'px' ?

**Bovino** · 07/04/2009, 17h10

Les styles top et left ont besoin de savoir de quelle unité tu parles !
Prend aussi en compte la remarque de E.Bzz :

encore faut-il que le CSS de l'image la définisse en position:absolute ou position:relative ...

**RKOCOCO** · 07/04/2009, 17h33

Voici le code de mon fichier svg. Pour moi il n'y a rien qui pourrait empêcher le déplacement de l'image

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
 
<?xml version="1.0" encoding="iso-8859-1"?>
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="blancbleu" r="100%" cx="50%" cy="50%" fy="50%" fx="50%">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1"/>      
      <stop offset="100%" style="stop-color:#000fff;stop-opacity:1"/>      
    </radialGradient>
    <script type="text/javascript" xlink:href="action.js"/>
 
    <style type="text/css"><![CDATA[
      text.menu{
        font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
        font-size: 13px;
        pointer-events: none;
        fill: #E64100;
        text-anchor: middle;
      }
      rect.menu{
        fill: #FFEBD5;
        stroke: #FF8309;
        stroke-width: 1px;
      }
 
      ]]></style>      
  </defs>
 
   <image x="0" y="0" width="500" height="400" xlink:href="backgroundog4.png"/>
 
  <a xlink:href="" target="_top" >
    <rect class="menu" id="t1" x="150" y="80" width="90px" height="26px" rx="3.8px" ry="1.3px">    
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,235,213)" to="rgb(245,247,255)"/>
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(245,247,255)" to="rgb(255,235,213)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,131,9)"   to="rgb(56,76,198)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(56,76,198)"   to="rgb(255,131,9)"/>
    </rect>
  </a>
 
  <text class="menu" x="195" y="100">
    HADOKEN
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="13" to="18" dur="0.4s" begin="t1.mouseover"/>
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="18" to="13" dur="0.4s" begin="t1.mouseout"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="100" to="101" dur="0.4s" begin="t1.mouseover"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="101" to="100" dur="0.4s" begin="t1.mouseout"/>
  </text>
 
  <a xlink:href="" target="_top" >
    <rect class="menu" id="t2" x="50" y="80" width="90px" height="26px" rx="3.8px" ry="1.3px" onclick="bouge(10,0)" >    
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,235,213)" to="rgb(245,247,255)"/>
      <animateColor attributeName="fill"   attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(245,247,255)" to="rgb(255,235,213)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseover" fill="freeze" from="rgb(255,131,9)"   to="rgb(56,76,198)"/>
      <animateColor attributeName="stroke" attributeType="CSS" dur="0.3s" begin="mouseout"  fill="freeze" from="rgb(56,76,198)"   to="rgb(255,131,9)"/>
    </rect>
  </a>
 
  <text class="menu" x="95" y="100">
    DEPLACEMENT
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="13" to="18" dur="0.4s" begin="t2.mouseover"/>
    <animate attributeType="XML" attributeName="font-size" fill="freeze" from="18" to="13" dur="0.4s" begin="t2.mouseout"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="100" to="101" dur="0.4s" begin="t2.mouseover"/>
    <animate attributeType="XML" attributeName="y"	   fill="freeze" from="101" to="100" dur="0.4s" begin="t2.mouseout"/>
  </text>
 
  <circle onkeypress="tape1(evt)" cx="30" cy="50" opacity="0.7" r="25" fill="grey" stroke="white" stroke-width="3" />
 
  <image id="Bob" x="50" y="200" width="150px" height="180px" xlink:href="Bob/Bob1.png" style="position:absolute" />
 
  <g id="item">
    <rect id="Lifebar" x="60" y="30" width="250" height="25" fill="yellow" stroke="white" stroke-width="3"/>
    <text class="menu" x="90" y="50" style="font-size:24;font-family:Arial;fill:blue;font-weight:bold;"  stroke="url(#blancbleu)" stroke-width="1" >
    BOB    
    </text>
  </g>
 
  <g onkeypress="tape2(evt)">
  <text id="entre" x="32" y="55" style="text-anchor:middle;font-size:20;font-family:Arial;fill:red">?</text>
  </g>     
 
</svg>

**E.Bzz** · 07/04/2009, 17h43

Envoyé par RKOCOCO

Pour moi il n'y a rien qui pourrait empêcher le déplacement de l'image

Pour toi peut être, mais pour le navigateur, si.

Relis les réponses ....

A+

**RKOCOCO** · 07/04/2009, 18h00

Je sais que ce n'est pas très malin d'écrire ce que j'ai écris, mais je me triture la tête dessus depuis ce matin. Je n'arrive vraiment pas à voir pourquoi ça bloque. Même si dans la fonction bouge je rajoute par exemple :

Code :

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

document.getElementById('cercle').style.fill = "blue";

Toujours rien ne se passe. Alors, soit j'ai vraiment du loupé quelque chose en programmation Javascript (ok je débute) mais quand même je pensais être sur de mon coup.....

**E.Bzz** · 08/04/2009, 09h21

Et bien par exemple, à ma connaissance, la propriété CSS "fill" n'existe pas ...

Sinon

Envoyé par E.Bzz

Mais encore faut-il que le CSS de l'image la définisse en position:absolute ou position:relative ...

Si tu n'as pas définit la "position" au sens CSS, ton image est en "position:inline" par défaut.
Elle est placée à l'endroit où se trouve son code HTML dans la page, et ces coordonnées ne sont pas modifiables. Essaye juste d'ajouter

Code :

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

style="position:relative;"

dans le tag HTML.
Même si, dans un premier temps, le résultat n'est pas celui attendu, tu devrais au moins la voir "bouger".

Dans le cas contraire, c'est que tu as une erreur JS qui bloque l'exécution de ton code ...

A+

**RKOCOCO** · 08/04/2009, 10h47

Mmmmmh je en comprends pas. J'ai bien ajouté

Code :

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

style="position:relative;"

et l'image ne bouge pas. Pourtant le code exécute bien des fonction du script situées après la commande de déplacement de l'image. Il n'y a donc aps d'erreur JS qui bloquent mon programme......

J'ai essayé de passer par des classes en CSS. Le résultat est pire. Non seulement, l'image ne bouge pas mais elle ne prend même plus en compte les coordonnées que je lui mets en paramètre....sniff

**SpaceFrog** · 08/04/2009, 10h50

heu non un objet ne bougera pas en relatif ..;
il doit etre en absolute ...

**E.Bzz** · 08/04/2009, 10h55

Envoyé par SpaceFrog

heu non un objet ne bougera pas en relatif ..;
il doit etre en absolute ...

Si si (vérifié) : dans ce cas, les coordonnées représentent un déplacement "relatif" par rapport à sa position par défaut (bien qu'il soit "dans le flux"). Sinon, quelle serait la différence par rapport à "inline" ?

A+

**Bovino** · 08/04/2009, 11h15

Envoyé par E.Bzz

Si si (vérifié) : dans ce cas, les coordonnées représentent un déplacement "relatif" par rapport à sa position par défaut (bien qu'il soit "dans le flux"). Sinon, quelle serait la différence par rapport à "inline" ?

A+

absolute : sortie du flux, positionnement par rapport à la page;
relative : reste dans le flux mais avec décalage de la position normale
inline : n'est pas une valeur de position mais de display

la valeur par défaut de position, c'est static !

**SpaceFrog** · 08/04/2009, 11h20

arf oui :red:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
val =0
function move(){
//var timer= setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):((clearInterval(timer))?0:truc.style.top);},100 ) ;
var timer= setInterval( function(){truc.style.top=(val<50)?((val++)+'px'):(timer=50)+'px';},10 ) ;
}
</script>
</head>
 
<body onload="truc=document.getElementById('foo');move()">
<div style="position:absolute;left:522px;">
<div style='width:100px;background-color:red;position:relative;' id="foo">s</div>
</div>
</body>

**E.Bzz** · 08/04/2009, 11h26

Envoyé par Bovino

inline : n'est pas une valeur de position mais de display

la valeur par défaut de position, c'est static !

Au temps pour moi

**RKOCOCO** · 08/04/2009, 11h31

J'ai trouvé le problème, désolé de vous avoir sollicité autant.
Sous SVG il faut utiliser

Code :

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

 document.getElementById("Bob").setAttribute("y", hautimage);

et non pas

Code :

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

document.getElementById("Bob").style.top = hautimage;

Mais je me paume un peu entre les API SVG, CSS et JS......Enfin voila, mon problème est réglé et je me coucherai moins con ce soir

**SpaceFrog** · 08/04/2009, 11h32

faut surtout rajouter +'px' non ?

**RKOCOCO** · 08/04/2009, 13h32

En fait ça n'as pas d'incidence sur mon programme. Il doit mettre px par defaut en valeur

Boucle sur "OnMouseOver"

JavaScript

Discussions similaires

Partager

Partager