[DHTML] Comment kon fait ca?????????

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [DHTML] Comment kon fait ca?????????

dropsy

et bonne chance surtout...

moi je trouve ca sympa le onmouseover sur les images:
http://www.wallpapers.ru/

mais comment kon fait?
pour faire apparaitre les images par dessus... jlai déjà vu ailleurs, mais g jamais su comment
à tout hasard, g choper le code de la page (enfin fichier enregistrer sous, c pas le plus dur ) mais si qqun c comment ca fonctionne, un ptit indice, un ptit lien vers un tutorial... Enfin, un coup de main koi

Publicité

darkoli

Le Petit Dinosaure Bleu

Ben l'image est contenue dans un div (enfin je ne sais meme pas si c'est utile).

En fait lorsque la souris arrive sur l'image un evenement se declenche, indiquant que le pointeur et sur l'image, a ce moment le div est rendu visible avec à l'interieur l'image correspondant à l'image survolée .

Et tant que le pointeur est en mouvement sur l'image, le div le suit à quelques pas !!!

C'est tres simple à faire !!!

---------------
Le site de l'année :D (XHTML 1.0 strict) : http://darkoli.free.fr/index.html

dropsy

et bonne chance surtout...

je suis d'accord avec ton analyse, mais ce ki me paraît dur c le div qui "flotte" au-dessus de la page html... c comme si y avait deux pages...
je suis clair dans mon interrogation :??:

art_dupond

je suis neuneu... oui oui !!

ben c'est ca un div. non ?

---------------
oui oui

dropsy

et bonne chance surtout...

ben moi kan j'utilise un div, ce que j'y met est "intégré" à la page et pas au-dessus du reste de la page

youdontcare

tu passes par les css et tu lui files une position absolue :

<div id='myDiv' style='position: absolute; left: 40; top: 40'>mon div</div>

et pour le déplacer :

<body .... onmousemove='onMove()'>
<div id='myDiv' style='....>

<script>
function onMove()
{
myDiv.style.left = event.x;
myDiv.style.top = event.y;
}
</script>

darkoli

Le Petit Dinosaure Bleu

Voila deux exemple qui prouvent que tu peux faire bouger ce que tu veux !!!

Darg & Drop d'objet (div, bouton, textarea)

Code :

<html>
<head>
<title>Drag & Drop</title>
</head>
<body>
<script language="javascript">
var dx=0;
var dy=0;
var objet=null;
var mv=0;
function md() {
if (event.srcElement.tagName!="BODY" ) {
objet=event.srcElement;
}
dx=event.offsetX;
dy=event.offsetY;
mv=0;
}
function mm() {
if (objet!=null) {
objet.style.left=event.clientX-dx;
objet.style.top=event.clientY-dy;
}
document.all.z.value="Ecran : "+event.screenX+","+event.screenY+"\nFenêtre : "+event.clientX+","+event.clientY+"\nObjet : "+event.offsetX+","+event.offsetY+" => "+event.srcElement.tagName+" ["+event.srcElement.name+"]";
mv=1;
}
function mu() {
objet=null;
}
function cb() {
if (mv==0) {
alert("evenement \"onClic\" sur le bouton \""+event.srcElement.name+"\"." );
}
}
document.onmousedown=md;
document.onmousemove=mm;
document.onmouseup=mu;
</script>
<textarea name="z" rows="3" cols="40" style="position:absolute;left:102px;top:0px">Vous pouvez déplacer tous les éléments présents sur cette page.</textarea>
<input name="bouton de toto" type="button" value="Le Drag & Drop c'est génial" style="position:absolute;left:102px;top:55px" onClick="cb()">
<div name="coucou" style="position:absolute;left:0px;top:0px;width:100px;height:200px;background-color:C0C0C0"></div>
</body>
</html>

Déplacement de Div pour donner l'impression d'une rotation autour d'un axe (à l'aide des quaternions)

Code :

<html>
<head><title>Javascript 3D by Oli</title></head>
<body>
<div id="fond" style="position:absolute;left:0px;top:0px;width:e
xpression(document.body.clientWidth);height:expres
sion(document.body.clientHeight);background-color:
F7F7F7;border-width:3px;border-style:solid;border-
color:80C0FF;z-index:0"></div>
<script language="javascript">
// structures utilisées
var rss="";
function rotation(n) {
this.x=0;
this.y=0;
this.z=0;
this.t=new Array(16);
this.q=null;
this.pos=Math.PI;
this.pas=0;
this.d=new Array(4);
for (var k=0;k<4;k++) rss=rss+"<div id=\"o"+n+k+"\" style=\"position:absolute;left:0px;top:0px;width
:20px;height:20px;background-color:80C0FF;font-siz
e:0px;z-index:1;border-width:1px;border-color:60A0
FF;border-style:solid\"></div>";
}
function quaternion() {
this.w=0;
this.x=1;
this.y=0;
this.z=0;
}
// variables
var mt1=new Array(16);
var mt2=new Array(16);
var angle=0;
var cx=document.body.clientWidth>>1;
var cy=document.body.clientHeight>>1;
var rp=0;
var rnb=10;
var r=new Array(rnb);
// fonctions
function am(t) {
var s="<table><tr><td collspan=\"4\">Matrice</td>";
for (var i=0;i<16;i++) {
if ((i&3)==0) s=s+"</tr><tr>";
s=s+"<td>"+t[i]+"</td>";
}
document.all.fond.innerHTML=document.all.fond.innerHTML+s+"</tr></table>";
}
function rx(t,a) {
// | 1 0 0 0 |
// | 0 cos(A) -sin(A) 0 |
// | 0 sin(A) cos(A) 0 |
// | 0 0 0 1 |
t[0]=t[15]=1
t[1]=t[2]=t[3]=t[4]=t[7]=t[8]=t[11]=t[12]=t[13]=t[14]=0;
t[5]=t[10]=Math.cos(a);
t[9]=Math.sin(a);
t[6]=-t[9];
}
function qm(mat,q) {
var xx = q.x * q.x;
var xy = q.x * q.y;
var xz = q.x * q.z;
var xw = q.x * q.w;
var yy = q.y * q.y;
var yz = q.y * q.z;
var yw = q.y * q.w;
var zz = q.z * q.z;
var zw = q.z * q.w;
mat[0] = 1 - 2 * ( yy + zz );
mat[1] = 2 * ( xy - zw );
mat[2] = 2 * ( xz + yw );
mat[4] = 2 * ( xy + zw );
mat[5] = 1 - 2 * ( xx + zz );
mat[6] = 2 * ( yz - xw );
mat[8] = 2 * ( xz - yw );
mat[9] = 2 * ( yz + xw );
mat[10] = 1 - 2 * ( xx + yy );
mat[3] = mat[7] = mat[11] = mat[12] = mat[13] = mat[14] = 0;
mat[15] = 1;
}
function nq(q_) {
var l=Math.sqrt(q_.w*q_.w + q_.x*q_.x + q_.y*q_.y + q_.z*q_.z);
l=1/l;
q_.w=q_.w*l;
q_.x=q_.x*l;
q_.y=q_.y*l;
q_.z=q_.z*l;
}
function rq(_q,a,x,y,z) {
var sin_a = Math.sin(a/2);
var cos_a = Math.cos(a/2);
_q.x = x * sin_a;
_q.y = y * sin_a;
_q.z = z * sin_a;
_q.w = cos_a;
nq(_q);
}
function mm(ma,mb,mr) {
mr[ 0]=ma[ 0]*mb[ 0] + ma[ 1]*mb[ 4] + ma[ 2]*mb[ 8] + ma[ 3]*mb[12];
mr[ 1]=ma[ 0]*mb[ 1] + ma[ 1]*mb[ 5] + ma[ 2]*mb[ 9] + ma[ 3]*mb[13];
mr[ 2]=ma[ 0]*mb[ 2] + ma[ 1]*mb[ 6] + ma[ 2]*mb[10] + ma[ 3]*mb[14];
mr[ 3]=ma[ 0]*mb[ 3] + ma[ 1]*mb[ 7] + ma[ 2]*mb[11] + ma[ 3]*mb[15];
mr[ 4]=ma[ 4]*mb[ 0] + ma[ 5]*mb[ 4] + ma[ 6]*mb[ 8] + ma[ 7]*mb[12];
mr[ 5]=ma[ 4]*mb[ 1] + ma[ 5]*mb[ 5] + ma[ 6]*mb[ 9] + ma[ 7]*mb[13];
mr[ 6]=ma[ 4]*mb[ 2] + ma[ 5]*mb[ 6] + ma[ 6]*mb[10] + ma[ 7]*mb[14];
mr[ 7]=ma[ 4]*mb[ 3] + ma[ 5]*mb[ 7] + ma[ 6]*mb[11] + ma[ 7]*mb[15];
mr[ 8]=ma[ 8]*mb[ 0] + ma[ 9]*mb[ 4] + ma[10]*mb[ 8] + ma[11]*mb[12];
mr[ 9]=ma[ 8]*mb[ 1] + ma[ 9]*mb[ 5] + ma[10]*mb[ 9] + ma[11]*mb[13];
mr[10]=ma[ 8]*mb[ 2] + ma[ 9]*mb[ 6] + ma[10]*mb[10] + ma[11]*mb[14];
mr[11]=ma[ 8]*mb[ 3] + ma[ 9]*mb[ 7] + ma[10]*mb[11] + ma[11]*mb[15];
mr[12]=ma[12]*mb[ 0] + ma[13]*mb[ 4] + ma[14]*mb[ 8] + ma[15]*mb[12];
mr[13]=ma[12]*mb[ 1] + ma[13]*mb[ 5] + ma[14]*mb[ 9] + ma[15]*mb[13];
mr[14]=ma[12]*mb[ 2] + ma[13]*mb[ 6] + ma[14]*mb[10] + ma[15]*mb[14];
mr[15]=ma[12]*mb[ 3] + ma[13]*mb[ 7] + ma[14]*mb[11] + ma[15]*mb[15];
}
function ts() {
for (var i=0;i<rnb;i++) {
rq(r[i].q,r[i].pos,r[i].x,r[i].y,r[i].z);
qm(mt1,r[i].q);
mm(mt1,r[i].t,mt2);
for (var j=0;j<4;j++) {
rp=(mt2[8+j]+100)/4;
if (rp<5) rp=5;
r[i].d[j].style.width=rp;
r[i].d[j].style.height=rp;
rp=rp>>1;
r[i].d[j].style.left=cx+mt2[0+j]-rp;
r[i].d[j].style.top=cy+mt2[4+j]-rp;
r[i].d[j].style.zIndex=mt2[8+j]+150;
}
r[i].pos+=r[i].pas;
}
}
function ri() {
var rtt=0;
for (var i=0;i<rnb;i++) {
r[i]=new rotation(i);
for (var j=0;j<12;j++) r[i].t[j]=(Math.random()*400)-200;
r[i].t[12]=1;
r[i].t[13]=1;
r[i].t[14]=1;
r[i].t[15]=1;
r[i].q=new quaternion();
rtt=Math.floor(Math.random()*7)+1;
r[i].x=rtt&1;
r[i].y=(rtt>>1)&1;
r[i].z=(rtt>>2)&1;
r[i].pos=Math.random()*Math.PI*2;
r[i].pas=Math.random()*Math.PI/32;
}
fond.innerHTML=fond.innerHTML+rss;
for (var i=0;i<rnb;i++) {
for (var k=0;k<4;k++) {
eval("r[i].d[k]=document.all.o"+i+k);
}
}
}
// instructions
ri();
setInterval("ts()",1);
</script>
</body>
</html>

Tout ceci fonctionne avec IE

---------------
Le site de l'année :D (XHTML 1.0 strict) : http://darkoli.free.fr/index.html

dropsy

et bonne chance surtout...

waou!!! merci, c terrible... bon jvais éplucher tout ca :hello:

art_dupond

je suis neuneu... oui oui !!

dropsy a écrit a écrit :

ben moi kan j'utilise un div, ce que j'y met est "intégré" à la page et pas au-dessus du reste de la page

pour moi, un div est une sorte de layer (que tu peux "monter" ou "descendre" avec z-index).

Je me trompe ?

---------------
oui oui

youdontcare

art_dupond a écrit a écrit :

Je me trompe ?

non, tu restreins. on peut appliquer ça à n'importe quelle balise.

Publicité

dropsy

et bonne chance surtout...

art_dupond a écrit a écrit :

pour moi, un div est une sorte de layer (que tu peux "monter" ou "descendre" avec z-index).

Je me trompe ?

z-index??? put1, il fo vraiment que j'apprenne le html, moa, avant que mon employeur s'en rende compte

art_dupond

je suis neuneu... oui oui !!

youdontcare a écrit a écrit :

non, tu restreins. on peut appliquer ça à n'importe quelle balise.

ah ca je savais pas par contre...

j'en ai jamais eu besoin non plus :na: :jap:

---------------
oui oui

benou

allez, c'est mon jour de bonté : je te file un truc que j'ai fait dans une vie antérieure et qui fait exactement la même chose. C'est compatible IE4 et sup et Netscape 4 et sup (pas testé sous netscape 6)

Attention, ca va être long comme post ...

voici le contenu du fichier etiquette.js :

//////////// DEBUT /////////////////////
var GAUCHE = 0;
var DROITE = 1;
var CENTRE = 2;

// variables de personalisation
var couleur_fond = "lightyellow";
var couleur_bordure = "black";
var couleur_texte = "black";
var taille_texte = 1;
var largeur_bordure = 1;
var decalage_x = 10; //decalage de l'etiquette par rapport a la souris
var decalage_y = 20;

var dft_largeur = 200;
var dft_direction = DROITE;
var dft_alignement = "LEFT";

var pos_fixe = false;
var pos_fixe_x = 236; //position centrale
var pos_fixe_y = 0;

// recherhce navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
ie5 = false;
if ((ie4) && (navigator.userAgent.indexOf('MSIE 5'>0)) ie5 = true;

// declaration est initialisation des variables
var x = 0;
var y = 0;
var est_visible = false;
var dir; // direction courante
var le_x, le_y;

var obj_etiquette;
var hauteur_aide, largeur_aide;
var largeur_doc, hauteur_doc;

if ((ns4)||(ie4)) {
if (ns4) obj_etiquette = document.etiquette;
if (ie4) obj_etiquette = etiquette.style;
document.onmousemove = deplacementSouris;
if (ns4) document.captureEvents(Event.MOUSEMOVE);

if (ie4) {
largeur_doc = document.body.clientWidth;
hauteur_doc = document.body.clientHeight;
} else if (ns4) {
largeur_doc = document.width;
hauteur_doc = document.height;
}
//alert("largeur_doc = " + largeur_doc + ", hauteur_doc = " + hauteur_doc);
}

// PRB NETSCAPE
if (ns4) {
pos_fixe = true;
dft_alignement = "CENTER";
dft_largeur = 400;
taille_texte = 2;
}

function aide(texte, direction, alignement, largeur) {
if (! ((ns4) || (ie4))) return false;

if (typeof direction == 'undefined' direction = dft_direction;
if (typeof largeur == 'undefined' largeur = dft_largeur;
if (typeof alignement == 'undefined' alignement = dft_alignement;
if (typeof texte == 'undefined' texte = "Aide non-disponible";

html =
"<TABLE WIDTH=" +largeur+ " BORDER=0 CELLPADDING=" +largeur_bordure+ " CELLSPACING=0 BGCOLOR=\"" +couleur_bordure+ "\">\n" +
"<TR><TD>\n" +
"<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\"" +couleur_fond+ "\">\n" +
"<TR><TD ALIGN=\"" + alignement + "\">\n" +
"<FONT FACE=\"Verdana,Arial,Helvetica\" COLOR=\"" +couleur_texte+ "\" SIZE=\"" +taille_texte+ "\">\n" +
texte + "\n" +
"</FONT>\n" +
"</TD></TR>\n " +
"</TABLE>\n" +
"</TD></TR>\n" +
"</TABLE>"

if (ns4) {
document.etiquette.document.write(html);
document.etiquette.document.close();
} else if (ie4)
document.all["etiquette"].innerHTML = html;
if (ie4) {
hauteur_aide = document.all["etiquette"].clientHeight;
largeur_aide = document.all["etiquette"].clientWidth;
} else if (ns4) {
hauteur_aide = document.etiquette.document.height;
largeur_aide = document.etiquette.document.width;
}
positionner (direction);
if (! est_visible) afficher(obj_etiquette);
}

function afficher(obj) {
if (ns4) obj.visibility = "show";
else if (ie4) obj.visibility = "visible";
est_visible = true;
}

function c() { cacher ();}

function cacher () {
if (!((ns4)||(ie4))) return;
if (ns4) obj_etiquette.visibility = "hide";
else if (ie4) obj_etiquette.visibility = "hidden";
est_visible = false;
}

function positionner (direction) {
dir = direction;
if (pos_fixe) { le_x = pos_fixe_x - largeur_aide/2; le_y = pos_fixe_y; }
else if (direction == CENTRE) { le_x = x+decalage_x-largeur_aide/2; le_y = y+decalage_y; }
else if (direction == DROITE) { le_x = x+decalage_x; le_y = y+decalage_y; }
else if (direction == GAUCHE) { le_x = x-decalage_x - largeur_aide; le_y = y+decalage_y; }

if (le_x + largeur_aide > largeur_doc) le_x = largeur_doc - largeur_aide;
if (le_x < 0) le_x = 0;
if (le_y + hauteur_aide > hauteur_doc) le_y = hauteur_doc - hauteur_aide;
if (le_y < 0) le_y = 0;

obj_etiquette.left = le_x;
obj_etiquette.top = le_y;
}

function deplacementSouris(e) {
if (ns4) {x=e.pageX; y=e.pageY;}
if (ie4) {x=event.x; y=event.y;}
if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
if (est_visible) {
positionner (dir);
}
}

////////////// FIN ///////////////////////

ensuite dans ton fichier HTML, tu ajoutes ces 2 lignes :
<DIV ID="etiquette" STYLE="position:absolute; visibility:hide; z-index:0;"></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="etiquette.js"></SCRIPT>

puis quand tu veux que le layer s'affiche ay dessus d'un lien, tu fais comme ca :

<a
href="javascript:void(0)"
onMouseOut="c()";
onMouseOver="aide('ici tu met du HTML. ex : <img src=youpi.jpg>';">text</a>

remarque : sous netscape, tu ne peux gérer les onMouseXX que sur les liens, mais sous IE tu peut ajouter ca sur à peu pres toutes les balises.

dropsy

et bonne chance surtout...

merci :jap:
mon boss va croire que je maitrise...
bon mon salaire je vous l'envoie à kel adresse?

darkoli

Le Petit Dinosaure Bleu

art_dupond a écrit a écrit :

pour moi, un div est une sorte de layer (que tu peux "monter" ou "descendre" avec z-index).

Je me trompe ?

Non mais c'est super reducteur !!!

Tu peux tout changer dans un div !!!
=> son apparence : couleur (fond, bordure) , visibilité, ...

=> sa forme : longueur, largeur, bordure (epaisseur), ...

=> son contenu : image(s), text, balises, ... (tu peux effacer le contenu d'un div pour le remplacer par autres chose !!!)

=> les evenements : tu peux initialiser la reation à un evenement ou l'enlever à tout moment.

<div id="toto"></div>

document.all.toto.onclick=clic; // clic doit être une fonction javascript
document.all.toto.onclick=null; // la il ne se passe plus rien quand tu cliques

---------------
Le site de l'année :D (XHTML 1.0 strict) : http://darkoli.free.fr/index.html

darkoli

Le Petit Dinosaure Bleu

dropsy a écrit a écrit :

merci :jap:

mon boss va croire que je maitrise...
bon mon salaire je vous l'envoie à kel adresse?

Ton boss il ne cherche pas à embaucher par hasard ?
Un gentil ptit ingé info comme ... DarkOli par exemple !!!

---------------
Le site de l'année :D (XHTML 1.0 strict) : http://darkoli.free.fr/index.html

art_dupond

je suis neuneu... oui oui !!

ben oui, tu peux faire tout ce que tu fais dans une page quoi, mais sur une autre couche, une sorte de layer quoi

c'est pas grave, on se comprend, c'est le principal :jap:

---------------
oui oui

art_dupond

je suis neuneu... oui oui !!

DarkOli a écrit a écrit :

Ton boss il ne cherche pas à embaucher par hasard ?
Un gentil ptit ingé info comme ... DarkOli par exemple !!!

et le pitit ingé info DarkOli, il saurait pas d'où qu'il pourrait venir mon problème... par hasard ?

http://forum.hardware.fr/forum2.ph [...] &owntopic=

---------------
oui oui

xkamui

Their Destiny Was Foreordained

:??: :??: y'a quelqu'un pour donner les fichiers *.js *.gif/*.jpg et *.html, tout ça dans un zip et qui marche parce que moi je comprend pas grand chose à votre truc :cry: :cry:

xkamui

Their Destiny Was Foreordained

:bounce: UP

darkoli

Le Petit Dinosaure Bleu

http://darkoli.free.fr/js/master_mind/m.htm
http://darkoli.free.fr/js/dragdrop.htm

[edtdd]--Message édité par DarkOli--[/edtdd]

---------------
Le site de l'année :D (XHTML 1.0 strict) : http://darkoli.free.fr/index.html

xkamui

Their Destiny Was Foreordained

:bounce: UP

benou

xkamui a écrit a écrit :

:??:

y'a quelqu'un pour donner les fichiers *.js *.gif/*.jpg et *.html, tout ça dans un zip et qui marche parce que moi je comprend pas grand chose à votre truc :cry:

bha j'ai dit tout ce qu'il fallait faire : t'as plus qu'à recopier les bouts de code !

Publicité

FORUM HardWare.fr

Programmation

[DHTML] Comment kon fait ca?????????

Sujets relatifs
[DHTML] Changer la couleur des liens	HTML - PHP- DHTML ????
[DHTML] [JAVA] Petit probleme Netscape - IE	[DHTML] evenement du mediaplayer
[DHTML] questions sur les calques.	Faux popup DHTML en javascript venant d'un lien
JAVASCRIPT / DHTML : Scripts bidons SVP	[JavaScript/DHTML] Changement d'image
Problème de DHTML	DHTML - Rotation du texte
Plus de sujets relatifs à : [DHTML] Comment kon fait ca?????????

Page générée en 0.126 secondes