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

Marsh Posté le 12-12-2001 à 14:39:51

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

Reply

Marsh Posté le 12-12-2001 à 14:39:51

Reply

Marsh Posté le 12-12-2001 à 15:04:19

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

Reply

Marsh Posté le 12-12-2001 à 15:07:10

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 :??:

Reply

Marsh Posté le 12-12-2001 à 15:11:37

ben c'est ca un div. non ?

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

Reply

Marsh Posté le 12-12-2001 à 15:12:43

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

Reply

Marsh Posté le 12-12-2001 à 15:19:20

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>

Reply

Marsh Posté le 12-12-2001 à 15:20:26

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

Reply

Marsh Posté le 12-12-2001 à 15:32:43

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

Reply

Marsh Posté le 12-12-2001 à 15:33:06

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

Reply

Marsh Posté le 12-12-2001 à 15:34:28

art_dupond a écrit a écrit :

Je me trompe ?

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

Reply

Marsh Posté le 12-12-2001 à 15:34:28

Reply

Marsh Posté le 12-12-2001 à 15:36:12

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

Reply

Marsh Posté le 12-12-2001 à 15:48:39

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

Reply

Marsh Posté le 12-12-2001 à 15:54:53

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.

Reply

Marsh Posté le 12-12-2001 à 16:00:00

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

Reply

Marsh Posté le 12-12-2001 à 17:54:07

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

Reply

Marsh Posté le 12-12-2001 à 17:56:15

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

Reply

Marsh Posté le 12-12-2001 à 17:57:19

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

Reply

Marsh Posté le 12-12-2001 à 17:58:52

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

Reply

Marsh Posté le 14-12-2001 à 15:53:14

:??: :??: 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:

Reply

Marsh Posté le 15-12-2001 à 10:52:21

:bounce: UP

Reply

Marsh Posté le 15-12-2001 à 12:05:05

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

Reply

Marsh Posté le 17-12-2001 à 17:16:43

:bounce: UP

Reply

Marsh Posté le 17-12-2001 à 20:49:30

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 !

Reply

Marsh Posté le

Reply

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

Sujets relatifs:

Leave a Replay