[HML, JS] Comment fer ca ? fonction on MouseOver

Comment fer ca ? fonction on MouseOver [HML, JS] - HTML/CSS - Programmation

Marsh Posté le 23-07-2002 à 18:45:59    

Voila j' aimerais fer un menu avec un portable. le but etant ke chake touche du portable donne accès a une page. Et kan on met la souris sur une des touche ca affiche quel page ca reejoind sur l ecran du portable. Tout ca en html et js


Message édité par clockover le 24-07-2002 à 11:18:17
Reply

Marsh Posté le 23-07-2002 à 18:45:59   

Reply

Marsh Posté le 23-07-2002 à 18:52:13    

si "avec un portable"=="représentant un téléphone portable", alors, oui c'est possible.

Reply

Marsh Posté le 23-07-2002 à 19:28:35    

oui un portable atant un telphone portable ;)
C pas trop compliké j espere kar je galere deja un peu rien a tout foutre comme il fo les menu ds les tablo  :lol:


Message édité par clockover le 23-07-2002 à 19:29:12
Reply

Marsh Posté le 23-07-2002 à 20:29:38    

un pb...
le coup ke ca change d image, koment je peux specifier ke c k une partie (ds l exemple la touche du portable) de l image ki doit amener tel image sur l ecran ?

Reply

Marsh Posté le 23-07-2002 à 20:30:41    

parce ke g coupé le portable en 2... l ecran et le clavier
donc la j ai specifier des emplacement pour chak touche donc ca marche tout kom il fo sauf ke rien ca passe sur l ecran..

Reply

Marsh Posté le 23-07-2002 à 23:21:53    

si kk un pouvait me filer un coup de pouce

Reply

Marsh Posté le 24-07-2002 à 10:26:44    

:cry:

Reply

Marsh Posté le 24-07-2002 à 10:34:16    

voila: [:xp1700]

Reply

Marsh Posté le 24-07-2002 à 10:53:49    

--greg-- a écrit a écrit :

voila: [:xp1700]




 [:olimou] yyeeaa merci ;)

Reply

Marsh Posté le 24-07-2002 à 11:02:01    

clockover a écrit a écrit :

 
 [:olimou] yyeeaa merci ;)



:jap:

Reply

Marsh Posté le 24-07-2002 à 11:02:01   

Reply

Marsh Posté le 24-07-2002 à 11:07:42    

PLus serieusement. Je suis la:
 

Code :
  1. <p><img border="0" src="Images/menu2.PNG" width="143" height="49"></p>
  2. <p><map name="FPMap0">
  3. <area href="index.htm" shape="polygon" coords="38, 13, 53, 22, 51, 30, 38, 25">
  4. <area href="ok.htm" shape="polygon" coords="58, 31, 73, 37, 72, 45, 59, 39">
  5. </map>
  6. <img border="0" src="Images/menu3.PNG" usemap="#FPMap0" width="142" height="109"></p>


 
Comment je peux fer pour designer ke tel bouton de l image "menu3" change l image "menu2"?
Avec onMouseOver mais je sais pas koment ca se prensente moi.. SI kk un pouvait donner un exemple


Message édité par clockover le 24-07-2002 à 11:08:44
Reply

Marsh Posté le 24-07-2002 à 11:27:13    

aucune idée de comment marche la map ... je pense que le + simple est de faire le test en js. par ex, si tu fais une image de 30 x 30 représentant 9 boutons alignés, chacun faisant 10 pixels ...
 
<img id='myImage' src='limageamodifier.jpg'>
<img src='tonimagede30par30.jpg' onmouseover='changeMe()'>
 
tu appelles la fonction js changeMe()
 
function changeMe()
{
  // ... ton code
}
 
dans cette fonction tu as accès à l'objet event, qui a deux propriétés intéressantes : offsetX et offsetY, qui indiquent les coordonnées du curseur sur l'image (donc de 0 à 29 sur x et y).
 
si tu veux changer l'image de menu, tu passes par la méthode getElementById() de document pour chopper l'image, tu changes son attribut src (source) :
 
document.getElementById('myImage';).src = 'nouvelleimage.jpg';
 
voilà ... tu n'as plus qu'à tester dans quelle partie le curseur se trouve pour afficher l'image (if (event.offsetX < 10 && event.offsetY < 10) document.... = 'nouvelleimage.jpg).

Reply

Marsh Posté le 24-07-2002 à 11:38:01    

youdontcare a écrit a écrit :

aucune idée de comment marche la map ... je pense que le + simple est de faire le test en js. par ex, si tu fais une image de 30 x 30 représentant 9 boutons alignés, chacun faisant 10 pixels ...
 
<img id='myImage' src='limageamodifier.jpg'>
<img src='tonimagede30par30.jpg' onmouseover='changeMe()'>
 
tu appelles la fonction js changeMe()
 
function changeMe()
{
  // ... ton code
}
 
dans cette fonction tu as accès à l'objet event, qui a deux propriétés intéressantes : offsetX et offsetY, qui indiquent les coordonnées du curseur sur l'image (donc de 0 à 29 sur x et y).
 
si tu veux changer l'image de menu, tu passes par la méthode getElementById() de document pour chopper l'image, tu changes son attribut src (source) :
 
document.getElementById('myImage';).src = 'nouvelleimage.jpg';
 
voilà ... tu n'as plus qu'à tester dans quelle partie le curseur se trouve pour afficher l'image (if (event.offsetX < 10 && event.offsetY < 10) document.... = 'nouvelleimage.jpg).




 
Ok merci bien je vais regarder ca :) si vs avez d otre id

Reply

Marsh Posté le 24-07-2002 à 11:44:47    

clockover a écrit a écrit :

PLus serieusement. Je suis la:
Comment je peux fer pour designer ke tel bouton de l image "menu3" change l image "menu2"?
Avec onMouseOver mais je sais pas koment ca se prensente moi.. SI kk un pouvait donner un exemple




<img border="0" src="Images/menu2.PNG" width="143" height="49" name="menu2">
 
dans ta map FPMAP0  
tu as un truc du style :
<area coords="0,0,100,100" shape="rect" onclick="document.menu2.src='tanouvelleimage.jpg';">


Message édité par kayasax le 24-07-2002 à 11:45:28

---------------
All we need is a soul revolution
Reply

Marsh Posté le 24-07-2002 à 11:49:47    

kayasax a écrit a écrit :

 
<img border="0" src="Images/menu2.PNG" width="143" height="49" name="menu2">
 
dans ta map FPMAP0  
tu as un truc du style :
<area coords="0,0,100,100" shape="rect" onclick="document.menu2.src='tanouvelleimage.jpg';">




merci
fantasitk ca marche :)


Message édité par clockover le 24-07-2002 à 11:54:26
Reply

Marsh Posté le 24-07-2002 à 12:29:34    

kayasax a écrit a écrit :

<area coords="0,0,100,100" shape="rect" onclick="document.menu2.src='tanouvelleimage.jpg';">


onclick marche sur les shapes ... bon à savoir :jap:

Reply

Marsh Posté le 24-07-2002 à 12:31:41    

sur AREA plutot  shape c'est la forme de ta zone

youdontcare a écrit a écrit :

onclick marche sur les shapes ... bon à savoir :jap:




---------------
All we need is a soul revolution
Reply

Marsh Posté le 24-07-2002 à 12:32:34    

d'ailleurs ca prend aussi le onmouseover


---------------
All we need is a soul revolution
Reply

Marsh Posté le 24-07-2002 à 12:39:08    

G combiner onmouseover avec on mouseout ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed