script pour descendre une image (javascript)

titange305 · 6 Janvier 2005

bonjour,

j'ai réaliser un menu en haut à gauche et je voudrais quand l'utilisateur descend la page que le menu descend aussi.

j'espère que j'ai été asser clair

merci

Modifié 6 Janvier 2005 par Dan

Sarc · 6 Janvier 2005

Moi personnellement je le ferais plutôt en CSS, je préfère au javascript...

Par contre, en CSS c'est pas compatible avec tous les navigateurs snif...

Enfin dsl, jpeux pas t'aider, je connais pas de scripts :lol:

titange305 · 6 Janvier 2005

et en css tu sais ou je peux trouver ca?

merci

Vincent · 6 Janvier 2005

Voici mon script DHTML pour faire bouger un calque en fonction de la navigation verticale,

Je l'ai baptisé 'ascenseur', il est compatible IE et firefox ... le reste, jamais testé.

<HTML>
<HEAD>
<script>
function makeVars() {
  if(document.all) {
    h=".pixelLeft="; v=".pixelTop="; dS=""; sdm=".style";
    y="document.body.scrollTop"; x="document.body.scrollLeft";
    doWidth="document.body.clientWidth"; doHeight="document.body.clientHeight"
    object="up";
  }
  else if(document.getElementById){
    v=".top="; h=".left="; dS="document.";sdm=".style";
    y="window.pageYOffset"; x="window.pageXOffset";
    doWidth="window.innerWidth"; doHeight="window.innerHeight"
    object="getElementById(\"up\")";
  }
  xyz=400
  placeIt()
}

movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0

function makeXY(){
  innerX=eval(doWidth)-150;
  innerY=eval(doHeight)-150;
  yy=eval(y);
  xx=eval(x);
  ydiff=ystart-yy;
  xdiff=xstart-xx;
  if ((ydiff<(-1))||(ydiff>(1))) movey=Math.round(ydiff/10),ystart-=movey;
  if ((xdiff<(-1))||(xdiff>(1))) movex=Math.round(xdiff/10),xstart-=movex;
  eval(dS+object+sdm+v+(ystart+innerY));
  eval(dS+object+sdm+h+(xstart+innerX));
  setTimeout("makeXY()",25);
  if(document.getElementById) document.getElementById("up").visibility='show';
}

function placeIt(){ ystart=eval(y); xstart=eval(x); }

function stat0() { self.status=''; }
</SCRIPT>
<STYLE>
#UP {height: 25; position: absolute; width: 150; z-index: 100} 
</STYLE>
</HEAD>
<BODY ONLOAD="makeVars();makeXY();">
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<DIV ID="up">
placer ici le code html qui suit le déroulement de la page
</DIV>

</BODY>

titange305 · 6 Janvier 2005

comment je dois faire pour l'insérer

voici mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<script LANGUAGE="JavaScript">
im1 = new Image();
im2 = new Image();
im3 = new Image();
im4 = new Image();
im5 = new Image();
im6 = new Image();
im7 = new Image();
im8 = new Image();
im9 = new Image();
im10 = new Image();
im11 = new Image();
im12 = new Image();
im13 = new Image();
im14 = new Image();
im15 = new Image();
im16 = new Image();

<!--les images pour le survol du menu-->
im1.src = "image/menu1.gif";
im2.src = "image/menu.gif";
im3.src = "image/materiel1.gif";
im4.src = "image/materiel.gif";
im5.src = "image/shaker1.gif";
im6.src = "image/shaker.gif";
im7.src = "image/ldrink1.gif";
im8.src = "image/ldrink.gif";
im9.src = "image/coupe1.gif";
im10.src = "image/coupe.gif";
im11.src = "image/vcocktail1.gif";
im12.src = "image/vcocktail.gif";
im13.src = "image/liens1.gif";
im14.src = "image/liens.gif";
im15.src = "image/email1.gif";
im16.src = "image/email.gif";

</SCRIPT>
<script LANGUAGE="JavaScript">
function changeImage(nomIm,src)
{
  document.images[nomIm].src = src;
}
</SCRIPT>
<html>
<head>
<title>Les cocktails</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body class="arrierplan1">

<!--Le conteneur placé en float à droite et largeur de 85%-->
<div class="content"> 

</div>

<!--Lien pour les menu placer à droite avec une marge de 80% à droite et le survol des menu-->
<div class="menu">
<a href="index.html" onMouseover="changeImage('menu',im1.src)" onMouseout="changeImage('menu',im2.src)">
<img name="menu" src="image/menu.gif" alt="logo menu" border="0"></a>
<a href="materiel/materiel.html" onMouseover="changeImage('materiel',im3.src)" onMouseout="changeImage('materiel',im4.src)">
<img name="materiel" src="image/materiel.gif" alt="logo matériel" border="0"></a>
<a href="shaker/shaker.html" onMouseover="changeImage('shaker',im5.src)" onMouseout="changeImage('shaker',im6.src)">
<img name="shaker" src="image/shaker.gif" alt="logo shaker" border="0"></a>
<a href="longdrink/longdrink.html" onMouseover="changeImage('longdrink',im7.src)" onMouseout="changeImage('longdrink',im8.src)">
<img name="longdrink" src="image/ldrink.gif" alt="logo long drink" border="0"></a>
<a href="coupe/coupe.html" onMouseover="changeImage('coupe',im9.src)" onMouseout="changeImage('coupe',im10.src)">
<img name="coupe" src="image/coupe.gif" alt="logo coupe" border="0"></a>
<a href="vcocktail/vcocktail.html" onMouseover="changeImage('vcocktail',im11.src)" onMouseout="changeImage('vcocktail',im12.src)">
<img name="vcocktail" src="image/vcocktail.gif" alt="logo verre cocktail" border="0"></a> 
<a href="liens/liens.html" onMouseover="changeImage('liens',im13.src)" onMouseout="changeImage('liens',im14.src)">
<img name="liens" src="image/liens.gif" alt="logo liens" border="0"></a>
<a href="email/email.html" onMouseover="changeImage('email',im15.src)" onMouseout="changeImage('email',im16.src)">
<img name="email" src="image/email.gif" alt="logo email" border="0"></a>
</div>

</body>
</html>

merci

Modifié 6 Janvier 2005 par titange305

Vincent · 6 Janvier 2005

heureusement que je m'ennuyais un peu

voici quelques trucs :

sert a positionner le calque

  innerX=0;
  innerY=0;

la position 'absolute' est obligatoire pour que le DHTML fonctionne

#menudhtml {position: absolute}

le DTD empeche l'execution du DHTML, si qq un a une idée, je suis preneur, la solution n'est de pas mettre le DTD ou alors peut etre qu'il faut en chercher un autre (mais sur ce point, je suis pas très fort)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">

voilà le code à utiliser :

<HTML>
<HEAD>
<title>Les cocktails</title>

<script>


function makeVars() {
  if(document.all) {
    h=".pixelLeft="; v=".pixelTop="; dS=""; sdm=".style";
    y="document.body.scrollTop"; x="document.body.scrollLeft";
    doWidth="document.body.clientWidth"; doHeight="document.body.clientHeight"
    object="menudhtml";
  }
  else if(document.getElementById){
    v=".top="; h=".left="; dS="document.";sdm=".style";
    y="window.pageYOffset"; x="window.pageXOffset";
    doWidth="window.innerWidth"; doHeight="window.innerHeight"
    object="getElementById(\"menudhtml\")";
  }
  xyz=400
  placeIt()
}

movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0

function makeXY(){
  innerX=0;
  innerY=0;
  yy=eval(y);
  xx=eval(x);
  ydiff=ystart-yy;
  xdiff=xstart-xx;
  if ((ydiff<(-1))||(ydiff>(1))) movey=Math.round(ydiff/10),ystart-=movey;
  if ((xdiff<(-1))||(xdiff>(1))) movex=Math.round(xdiff/10),xstart-=movex;
  eval(dS+object+sdm+v+(ystart+innerY));
  eval(dS+object+sdm+h+(xstart+innerX));
  setTimeout("makeXY()",25);
  if(document.getElementById) document.getElementById("menudhtml").visibility='show';
}

function placeIt(){ ystart=eval(y); xstart=eval(x); }

function changeImage(nomIm,src)
{
 document.images[nomIm].src = src;
}

im1 = new Image();
im2 = new Image();
im3 = new Image();
im4 = new Image();
im5 = new Image();
im6 = new Image();
im7 = new Image();
im8 = new Image();
im9 = new Image();
im10 = new Image();
im11 = new Image();
im12 = new Image();
im13 = new Image();
im14 = new Image();
im15 = new Image();
im16 = new Image();

<!--les images pour le survol du menu-->
im1.src = "image/menu1.gif";
im2.src = "image/menu.gif";
im3.src = "image/materiel1.gif";
im4.src = "image/materiel.gif";
im5.src = "image/shaker1.gif";
im6.src = "image/shaker.gif";
im7.src = "image/ldrink1.gif";
im8.src = "image/ldrink.gif";
im9.src = "image/coupe1.gif";
im10.src = "image/coupe.gif";
im11.src = "image/vcocktail1.gif";
im12.src = "image/vcocktail.gif";
im13.src = "image/liens1.gif";
im14.src = "image/liens.gif";
im15.src = "image/email1.gif";
im16.src = "image/email.gif";

</SCRIPT>
<link href="styles.css" rel="stylesheet" type="text/css" />
<STYLE>
#menudhtml {position: absolute}
</STYLE>

</HEAD>
<BODY ONLOAD="makeVars();makeXY();" class="arrierplan1" >

<div class="content">
<!-- les <BR> sont uniquement la pour simuler du contenu -->
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</div>


<!--Lien pour les menu placer à droite avec une marge de 80% à droite et le survol des menu-->
<div id="menudhtml" class="menu">
<a href="index.html" onMouseover="changeImage('menu',im1.src)" onMouseout="changeImage('menu',im2.src)">
<img name="menu" src="image/menu.gif" alt="logo menu" border="0"></a>
<a href="materiel/materiel.html" onMouseover="changeImage('materiel',im3.src)" onMouseout="changeImage('materiel',im4.src)">
<img name="materiel" src="image/materiel.gif" alt="logo matériel" border="0"></a>
<a href="shaker/shaker.html" onMouseover="changeImage('shaker',im5.src)" onMouseout="changeImage('shaker',im6.src)">
<img name="shaker" src="image/shaker.gif" alt="logo shaker" border="0"></a>
<a href="longdrink/longdrink.html" onMouseover="changeImage('longdrink',im7.src)" onMouseout="changeImage('longdrink',im8.src)">
<img name="longdrink" src="image/ldrink.gif" alt="logo long drink" border="0"></a>
<a href="coupe/coupe.html" onMouseover="changeImage('coupe',im9.src)" onMouseout="changeImage('coupe',im10.src)">
<img name="coupe" src="image/coupe.gif" alt="logo coupe" border="0"></a>
<a href="vcocktail/vcocktail.html" onMouseover="changeImage('vcocktail',im11.src)" onMouseout="changeImage('vcocktail',im12.src)">
<img name="vcocktail" src="image/vcocktail.gif" alt="logo verre cocktail" border="0"></a>
<a href="liens/liens.html" onMouseover="changeImage('liens',im13.src)" onMouseout="changeImage('liens',im14.src)">
<img name="liens" src="image/liens.gif" alt="logo liens" border="0"></a>
<a href="email/email.html" onMouseover="changeImage('email',im15.src)" onMouseout="changeImage('email',im16.src)">
<img name="email" src="image/email.gif" alt="logo email" border="0"></a>
</div>

</BODY>
</HTML>

:hourra:

titange305 · 6 Janvier 2005

cela fonctionne parfaitement avec netscape mais avec ie non, mon problème est que mest image sont placé horizontalement et je voudrais qu'ils soient placé verticalement

merci

Modifié 6 Janvier 2005 par titange305

Vincent · 6 Janvier 2005

le script fonctionne parfaitement avec les 2 navigateurs : IE et N7 et compatible...

Pour le point de la mise en page, je te laisse le soin de l'adapter en modifiant la feuille de style...

pour plus d'informations pour placer des elements en bloc au lieu de ligne, tu peux aller visiter les sites tels qu'openweb, alsacreations, etc..., tous les liens sont dans le topsite.

Et pour ma part, si tu peines sur la mise en page, j'abandonnerais assez vite les 'effets visuels'... pour un premier site, il faut commencer simple

titange305 · 6 Janvier 2005

je suis tout a fais d'acord avec toi, mais je trouve aussi que c'est en analysant les code qu'on progrèsse.

Un grand merci

titange305 · 6 Janvier 2005

j'ai mis la position en relative et maintenant ca fonctionne

titange305 · 7 Janvier 2005

donc on ne peut pas mettre de doctype?

comment fais t'on cela si on veut mettre un doctype?

Connexion

script pour descendre une image (javascript)

Sujets conseillés

titange305

Lien vers le commentaire

Partager sur d’autres sites

Sarc

Lien vers le commentaire

Partager sur d’autres sites

titange305

Lien vers le commentaire

Partager sur d’autres sites

Vincent

Lien vers le commentaire

Partager sur d’autres sites

titange305

Lien vers le commentaire

Partager sur d’autres sites

Vincent

Lien vers le commentaire

Partager sur d’autres sites

titange305

Lien vers le commentaire

Partager sur d’autres sites

Vincent

Lien vers le commentaire

Partager sur d’autres sites

titange305

Lien vers le commentaire

Partager sur d’autres sites

titange305

Lien vers le commentaire

Partager sur d’autres sites

titange305

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité