Informatique


Les événements 2

  • Démo Ecrire le prgramme permettant de récupérer la position de la souris dès qu'elle bouge.
    Les positions X et Y seront affichées dans le paragraphe de classe coord sous la forme: X:215||Y:117.
    
    <style>
    p.coord	{
    	width:120px;
    	height:30px;
    	background:salmon;
    	padding:10px;
    }
    </style>
    </head>
    <body>
    <p class="coord"></p>
    

  • Démo Ecrire le prgramme permettant de récupérer la position de la souris au moment où l'utilisateur clique sur lr document.
    On affichera dans le paragraphe de classe coord sous la forme: Vous avez cliqué à la position de coordonnées: 215 || 117.
    
    <style>
    p.coord	{
    	width:400px;
    	height:30px;
    	background:salmon;
    	padding:10px;
    }
    </style>
    </head>
    <body>
    <p class="coord"></p>
    

  • Démo Créer un repère orthonormé pour le bloc de classe bloc1.
    Il faut donc que la coordonnée (0,0) soit placée au bord supérieur gauche du bloc.
    Lorsque la souris sort du bloc elle ne donne que la coordonnée maximale de l'endroit où elle est sortie du bloc.
    
    <style>
    .bloc1	{
    	margin:30px auto;
    	width:400px;
    	height:400px;
    	border:solid 1px black;
    }
    .ref	{
    		margin:30px auto;
    		width:400px;
    		text-align:center;
    		font-size:2em;
    }
    </style>
    
    </head>
    <body>
    <div class=bloc1>Survoler le cadre...</div>
    <div class=ref></div>
    </body>
    
    

  • Démo Ecrire le programme qui, lorsqu'on survole le bloc <p class="cible">, permet à la souris de capter le bloc afin que celui-ci la suive tout au long de ses déplacements.
    
    <style>
    *	{margin:0;}
    p.cible	{
    	position:relative;
    	width:120px;
    	height:120px;
    	background:salmon;
    	padding:10px;
    	border-radius:100%;
    }
    </style>
    </head>
    <body>
    <p class="cible"></p>
    <p class="rescar"></p>
    
    

  • Démo Ecrire le programme qui, lorsqu'on clique le bloc <p class="cible">, permet à la souris de capter le bloc afin que celui-ci la suive tout au long de ses déplacements.
    lorsqu'on reclique sur le bloc <p class="cible"> celui-ci doit être libéré.
    
    <style>
    *	{margin:0;}
    p.cible	{
    	position:relative;
    	width:120px;
    	height:120px;
    	background:salmon;
    	padding:10px;
    	border-radius:100%;
    }
    </style>
    </head>
    <body>
    <p class="cible"></p>
    <p class="rescar"></p>
    
    

  • Démo Soit un espace carré représenté par <div class=espace> et une cible représenté par <p class=cible>.
    Ecrire le programme permettant, au survol de l'espace carré par la souris, que la cible soit captée par la souris et la suive!
    La cible ne sera plaus visible en dehors de l'espace mais existera toujours. Afficher également les position X et Y de la souris sous la forme:X:215||Y:117.
    
    <style>
    *	{margin:0;}
    div.espace	{
    	margin:auto;
    	width:500px;
    	height:500px;
    	border:solid 2px rgba(200,0,0,0.5);
    }
    p.cible	{
    	position:relative;
    	width:120px;
    	height:120px;
    	background:salmon;
    	padding:10px;
    	border-radius:100%;
    }
    </style>
    </head>
    <body>
    
    <p class="rescar"></p>
    <div class="espace"><p class="cible"></p></div>