layer [DHTML & ie] - Programmation
Marsh Posté le 16-03-2001 à 17:55:14
ça marche avec IE mais il faut utiliser IFRAME, d'ailleurs je précise que la méthode layer.load ne fonctionne pas super bien sur NS.
Pour IE tu peux utiliser nomiframe.location.href, car une iframe se comporte comme une frame.
Marsh Posté le 16-03-2001 à 18:38:49
ok merci mais est ce que une iframe c'est une frame. Parce que j'ai deux pages a afficher dans la meme. En utilisant les layers c'est theoriquement faisable mais ca marche pas.
en fait je veux afficher un menu et en dessus mettre une page html sans que le menu soit caché par la page html. Est ce que c'est possible avec une iframe. (c'est quoi une iframe) ?
Marsh Posté le 16-03-2001 à 18:42:41
le menu marche bien mais si je mets une frame, ben il est caché dessous c'est pas bien et je ne peux pas recharger le menu à chaque page !!
voici mon code html/javascript :
<html>
<head>
<title>Toto is back</title>
<style>
body{font-family:courier new;font-size:16px}
input{font-size:50px}
</style>
</head>
<body>
<script language="javascript">
var nom=new Array("m1","m2","m3","m11","m12","m13","m14","m15","m21","m22","m23","m31","m32","m33","m34","m111","m112","m113","m114","m115","m116","m117","m121","m122","m123","m124","m131","m132","m141","m142","m143","m144" );
var lib=new Array("Présentation","Développement","Multimedia","Générale","Technique","Développement","sdfgsdfgsdfgs","dfg","fdsgsdfgds","sdfgdsgsdgfsd","gdf","dfgsdfgsdfsgd","dfgds","dfgsfdgsdfgsd","fdsgsdfgsdfgsdf","dfgsdfg","fgsdfgsfdg","dfg dfs dfsg","dsfg dfgdsg dg gg dfd","dfggfdsgdf","dgfgdfgdfg","fdgs fdgd","hjjkhkhl","sdsdgsdqf","dsfgfsd","fgsfd","fdgsfdgsdfgsdf","fdgfdsgsd","fdgfds","dfgdsf","sdfgsd","Bonjour Ca Va ?" );
var y=0;
var m=new Array(3);
var nb=0;
var px=2;
var py=2;
var old=-1;
var mx=5;
var ani=0;
var tmr;
var ost=0;
var dst=0;
function menu(n) {
this.d=n;
this.nb=0;
this.sm=new Array();
this.o=0;
this.x=0;
this.y=0;
this.dx=0;
this.dy=0;
this.p=mx+1;
this.old=-1;
}
function fd(n,l,i) {
var t=n.length-2;
var ln=0;
var i1=-1;
var i2=-1;
var i3=-1;
var z="";
var st="<div id=\""+n+"\" style=\"position:absolute;left:0px;top:0px;";
st=st+"font-weight:bold;color:FFFFFF;border-style:solid;border-width:1px;"
switch (t) {
case 0 :
i1=parseInt(n.charAt(1), 36);
if (isNaN(i1)==false) {
i1--
if (i1==nb) {
nb++;
m[i1]=new menu(n);
z="m["+i1+"]";
}
}
ln=(l.length+2)*13.1;
st=st+"width:"+ln+"px;height:25px;font-size:20px;background-color:0040FF;border-color:404040;visibility:visible;"
break;
case 1 :
i1=parseInt(n.charAt(1), 36);
if (isNaN(i1)==false) {
i1--;
if ((i1>=0) && (i1<nb)) {
i2=parseInt(n.charAt(2), 36);
if (isNaN(i2)==false) {
i2--;
if (i2==m[i1].nb) {
m[i1].nb++;
m[i1].sm[i2]=new menu(n);
z="m["+i1+"].sm["+i2+"]";
}
}
}
}
ln=(l.length+2)*12;
st=st+"width:"+ln+"px;height:23px;font-size:18px;background-color:0080FF;border-color:808080;visibility:hidden;"
break;
case 2 :
i1=parseInt(n.charAt(1), 36);
if (isNaN(i1)==false) {
i1--;
if ((i1>=0) && (i1<nb)) {
i2=parseInt(n.charAt(2), 36);
if (isNaN(i2)==false) {
i2--;
if ((i2>=0) && (i2<m[i1].nb)) {
i3=parseInt(n.charAt(3),36);
i3--;
if (i3==m[i1].sm[i2].nb) {
m[i1].sm[i2].nb++;
m[i1].sm[i2].sm[i3]=new menu(n);
z="m["+i1+"].sm["+i2+"].sm["+i3+"]";
}
}
}
}
}
ln=(l.length+2)*11;
st=st+"width:"+ln+"px;height:21px;font-size:16px;background-color:00A0FF;border-color:A0A0A0;visibility:hidden;"
break;
}
st=st+"\" onMouseOver=\"f1(this,"+i1+","+i2+","+i3+","+z+" )\" onMouseOut=\"f2(this)\" onClick=\"f3("+i+" )\"> "+l+"</div>";
return(st);
}
function pos_menu() {
var x=px;
var y=py;
var x1=0
var y1=0;
var x2=0;
var y2=0;
for (var i=0;i<nb;i++) {
m[i].d.left=x;
m[i].d.top=y;
m[i].x=x;
m[i].y=y;
m[i].dx=x;
m[i].dy=y;
if (m[i].nb>0) {
x1=x;
y1=y+parseInt(m[i].d.height)+4;
for (var j=0;j<m[i].nb;j++) {
m[i].sm[j].x=x;
m[i].sm[j].y=y;
m[i].sm[j].dx=x1;
m[i].sm[j].dy=y1;
if (m[i].sm[j].nb>0) {
x2=x1+parseInt(m[i].sm[j].d.width)+3;
y2=y1;
for (var k=0;k<m[i].sm[j].nb;k++) {
m[i].sm[j].sm[k].x=x;
m[i].sm[j].sm[k].y=y1;
m[i].sm[j].sm[k].dx=x2;
m[i].sm[j].sm[k].dy=y2;
y2=y2+parseInt(m[i].sm[j].sm[k].d.height)+2;
}
}
y1=y1+parseInt(m[i].sm[j].d.height)+3;
}
}
x=x+parseInt(m[i].d.width)+4;
}
}
function rp() {
for (var i=0;i<3;i++) {
m[i].dy=m[i].dy+dst;
m[i].d.top=m[i].dy;
m[i].y=m[i].y+dst;
m[i].d.top=m[i].y;
if (m[i].p>mx) m[i].p=mx;
for (var j=0;j<m[i].nb;j++) {
m[i].sm[j].dy=m[i].sm[j].dy+dst;
m[i].sm[j].d.top=m[i].sm[j].dy;
m[i].sm[j].y=m[i].sm[j].y+dst;
m[i].sm[j].d.top=m[i].sm[j].y;
if (m[i].sm[j].p>mx) m[i].sm[j].p=mx;
for (var k=0;k<m[i].sm[j].nb;k++) {
m[i].sm[j].sm[k].dy=m[i].sm[j].sm[k].dy+dst;
m[i].sm[j].sm[k].d.top=m[i].sm[j].sm[k].dy;
m[i].sm[j].sm[k].y=m[i].sm[j].sm[k].y+dst;
m[i].sm[j].sm[k].d.top=m[i].sm[j].sm[k].y;
if (m[i].sm[j].sm[k].p>mx) m[i].sm[j].sm[k].p=mx;
}
}
}
ani=1;
bg();
}
function bg() {
var bn=0;
var tmp=document.body.scrollTop;
if (ani==1) {
for (var i=0;i<nb;i++) {
for (var j=0;j<m[i].nb;j++) {
if (m[i].sm[j].p<=mx) {
m[i].sm[j].d.left=m[i].sm[j].x+(((m[i].sm[j].dx-m[i].sm[j].x)/mx)*m[i].sm[j].p);
m[i].sm[j].d.top=m[i].sm[j].y+(((m[i].sm[j].dy-m[i].sm[j].y)/mx)*m[i].sm[j].p);
m[i].sm[j].p++;
bn++;
}
for (var k=0;k<m[i].sm[j].nb;k++) {
if (m[i].sm[j].sm[k].p<=mx) {
m[i].sm[j].sm[k].d.left=m[i].sm[j].sm[k].x+(((m[i].sm[j].sm[k].dx-m[i].sm[j].sm[k].x)/mx)*m[i].sm[j].sm[k].p);
m[i].sm[j].sm[k].d.top=m[i].sm[j].sm[k].y+(((m[i].sm[j].sm[k].dy-m[i].sm[j].sm[k].y)/mx)*m[i].sm[j].sm[k].p);
m[i].sm[j].sm[k].p++;
bn++;
}
}
}
}
}
if (tmp!=ost) {
dst=tmp-ost;
ost=tmp;
rp();
}
if (bn<1) {
ani=0;
// clearInterval(tmr);
}
}
function ferme(o) {
for (var i=0;i<o.nb;i++) {
if (o.sm[i].nb>0) ferme(o.sm[i]);
o.sm[i].d.visibility="hidden";
o.sm[i].p=mx+1;
}
o.old=-1;
}
function ouvre(o) {
for (var i=0;i<o.nb;i++) {
if (o.sm[i].nb>0) ferme(o.sm[i]);
o.sm[i].d.left=o.sm[i].x;
o.sm[i].d.top=o.sm[i].y;
o.sm[i].p=0;
o.sm[i].d.visibility="visible";
}
if (ani==0) {
ani=1;
// tmr=setInterval("bg()",1);
}
}
function f1(zz,i1,i2,i3,o) {
zz.style.fontWeight="900";
if (i2==-1) {
// menu de niveau 0
if (old!=-1) {
if (old!=i1) {
ferme(m[old]);
ouvre(m[i1]);
old=i1;
}
}
else {
ouvre(m[i1]);
old=i1;
}
}
else {
if (i3==-1) {
// menu de niveau 1
if (m[i1].old!=-1) {
if (m[i1].old!=i2) {
ferme(m[i1].sm[m[i1].old]);
ouvre(m[i1].sm[i2]);
m[i1].old=i2;
}
}
else {
ouvre(m[i1].sm[i2]);
m[i1].old=i2;
}
}
}
}
function f2(zz) {
zz.style.fontWeight="bold";
}
function f3(n) {
alert(lib[n]);
}
function ini() {
var tmp=0;
var m1=0;
var m2=0;
var dvs="";
for (var i=0;i<nom.length;i++) {
dvs=fd(nom[i],lib[i],i)+dvs;
}
document.write(dvs);
for (var i=0;i<3;i++) {
eval("m[i].d=document.all."+m[i].d+".style;" );
m1=0;
for (var j=0;j<m[i].nb;j++) {
eval("m[i].sm[j].d=document.all."+m[i].sm[j].d+".style;" );
tmp=parseInt(m[i].sm[j].d.width);
if (tmp>m1) m1=tmp;
m2=0;
for (var k=0;k<m[i].sm[j].nb;k++) {
eval("m[i].sm[j].sm[k].d=document.all."+m[i].sm[j].sm[k].d+".style;" );
tmp=parseInt(m[i].sm[j].sm[k].d.width);
if (tmp>m2) m2=tmp;
}
for (var k=0;k<m[i].sm[j].nb;k++) m[i].sm[j].sm[k].d.width=m2;
}
for (var j=0;j<m[i].nb;j++) m[i].sm[j].d.width=m1;
}
}
ini();
pos_menu();
tmr=setInterval("bg()",1);
</script>
</body>
</html>
[edit]--Message édité par darkoli--[/edit]
Marsh Posté le 16-03-2001 à 19:20:35
c'est un menu en html et javascript. recupere le code et met dans un fichier html. ouvre le ensuite avec ie5 et la tu saura. ok
Marsh Posté le 16-03-2001 à 20:18:57
C'est plutot jolie sur ie mais sur netscape ça marche pas
Marsh Posté le 16-03-2001 à 21:28:22
oui je sais mais la version netscape je la ferais plus tard. D'ailleurs si quelqu'un peut me dire ce qu'il faut modifier pour que ca fonctionne sous netscape (il marche super bien sur ie).
j'utilise des div et je les fait bouger en javascript.
Marsh Posté le 16-03-2001 à 22:32:37
faut utiliser l'objet layer de netscape a la place, mais c'est chiant de faire 2 version bon courage. http://developer.netscape.com/
En plus il y a des chose qu'on changer avec Netscape6 trop cool
Marsh Posté le 16-03-2001 à 17:14:32
normalement, il est possible modifier la page html qui est affichée dans un layer en utilisant la méthode layer.load(url). Est ce que ca marche avec ie et quelle version faut-il ?