Aller au contenu

script pour descendre une image (javascript)

titange305

Par titange305
dans Scripts et utilitaires

 Partager

Sujets conseillés

titange305

titange305

Posté
Posté (modifié)

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é par Dan
Sarc

Sarc

Posté
Posté

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:

Vincent

Vincent

Posté
Posté

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

titange305

Posté
  • Auteur
Posté (modifié)

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é par titange305
Vincent

Vincent

Posté
Posté

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

titange305

titange305

Posté
  • Auteur
Posté (modifié)

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é par titange305
Vincent

Vincent

Posté
Posté

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

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...