Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

Créez des zones actives indépendantes du contenu de la page HTML

Script posté par :

jugar
Vous aussi, postez vos scripts en cliquant ici.

Description

Par ce script muni d'une interface, donc trés simple d'utilisation, vous pouvez définir dans vos pages des zones réagissant aux évennements "souris" en appelant la fonction de votre choix.

Pratique pour des jeux, potentiomètre et autres curseurs à déplacer...

Par contre, IE ne gérant pas les Array 2D... Pas compatible, jusqu'a nouvel ordre ! (merci d'avance ;)

Compatibilité :

	FireFox : Toutes versions
	Mozilla : 1 et +
	Netscape Navigator : 4 et +
	Internet Explorer : Incompatible

Chiffres :

Date de création : 29/03/2005
Dernière modif : -
Visites de la page : 28529
Envois par mail : 179

Exemple :

Zone traversée :
Position X de la souris dans la-dite zone :
Position Y de la souris dans la-dite zone :
Bouton gauche de la souris enfoncé :
Bouton milieu de la souris enfoncé :
Bouton droit de la souris enfoncé :

Le code :

Entre <HEAD> et </HEAD> :

-->
       </script>

Entre <BODY> et </BODY> :

<table width="100%" height="100%">
<tr valign="middle">
<td align="center">
Zone traversée : <input type=text id=id readonly /><br />
Position X de la souris dans la-dite zone : <input type=text id=x readonly /><br />
Position Y de la souris dans la-dite zone : <input type=text id=y readonly /><br />
Bouton gauche de la souris enfoncé : <input type=text id=gauche readonly /><br />
Bouton milieu de la souris enfoncé : <input type=text id=milieu readonly /><br />
Bouton droit de la souris enfoncé : <input type=text id=droit readonly /><br />
</td>
</tr>
</table>
<script type="text/javascript">

</script>

Dans un fichier nommé zones.js placé dans le même repertoire que votre page :

// Julien Garand le 27 Mars 2005
// Compatibilité : Netscape UNIQUEMENT !!!
//
// Comment ça marche ???? Ben voici ce dont vous avez besoin :
//
// variable globales : 'x' et 'y' -> position courrante de la souris
//                     'bouton_souris[0]==true' si le bouton gauche de la souris est enfoncé
//                     'bouton_souris[1]==true' si le bouton du milieu est enfoncé
//                     'bouton_souris[2]==true' pour le droit
//
// fonctions : definir_zone(id, left, right, top, bottom, func)
//                          -> id : string identifiant UNIQUE de la zone (!!! pas de vérif !!!)
//                          -> left,...,bottom : coordonées absolue
//                          -> func : nom de la fonction appelé ( exemple(id){ /* instructions */ } )
//
//             get_attribut_zone(id,attribut) : retourne un attribut de la zone 'id' ou false si pas de zone 'id'
//                          -> valeur possible de attribut : 'left','gauche' = bord gauche
//                                                           'right','droite' ... etc ...
//                                                           'func','function','fonction' la fonction d'appel
//
//             set_attribut_zone(id,attribut,valeur) : Devinnez ;)
//
// Dernière chose : vous définissez les zones dans leur ordre de priorité décroissant (en cas d'enchvevètrement)
// Voili, c'est tout ! Bon code.

if( navigator.appName.substring(0,3)=='Net' ) {

var x;
var y;
var bouton_souris = new Array(false,false,false);
var liste_zones = new Array();

function definir_zone(id,left,right,top,bottom,func) {
    liste_zones.push( new Array(id,left,right,top,bottom,func) );
}

function position_souris_Net(e) {
   x = e.pageX;
   y = e.pageY;
   tester_zone(true);
}

function bloquer_dans_zones() {
    if( false!==tester_zone(false) ) {
        return(false);
    }
    return(true);
}

window.document.captureEvents(Event.MOUSEMOVE);
window.document.captureEvents(Event.MOUSEDOWN);
window.document.captureEvents(Event.MOUSEUP);
window.document.onmousedown = click_souris_Net;
window.document.onmouseup = click_souris_Net;
window.document.onmousemove = position_souris_Net;
window.document.oncontextmenu = bloquer_dans_zones;

}

Si vous ne savez pas comment créer le fichier zones.js, demandez a recevoir le script par email, il vous sera alors envoyé en pièce jointe ! Sinon, consultez la FAQ du site.

Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript

Les annotations des visiteurs :

De GhislainLavoie - le 16-04-2005

Salut!

EI n'a pas de problème a gérer les tableau 2D!!!!!

J'ai modifié le script pour qu'il soit compatible avec EI.

A+, Ghislain

De Diti2330 - le 19-06-2005

Et ça te dirait d'en faire profiter tout le monde ???
Comme le montre la présentation du script, il fonctionne aussi avec Firefox, et non pas avec Netscape uniquement.

De kialmi - le 02-01-2009

Eh oui ! encore un Dupont la Joie qui roule pour lui exclu. !

>> Poster une annotation sur ce script

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Net@Vous
6 Euros par an pour 40 Mo d'espace disque. Vraiment pas cher.
http://www.netavous.com/

Cat : Hebergement web
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

61298 membres
7194 comptes CountUs
1720 comptes myCircle

LES FORUMS :

14 forums
39941 topics
190891 messages
>> Les forums

SONDAGE

La mini-astuce "HTML / CSS" du jour par Groumphy
Utilisez la balise DIV couplé aux CSS pour mettre en forme votre site ! Vous économiserez du code et agrémenterez la légèreté de vos pages, tout en ayant une facilité de validation par le W3C ! Bannissez la balise Font ! Ayez des principes au standard...
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi