[html] Ascenceur

Fermé
prevert Messages postés 24 Date d'inscription dimanche 22 mai 2005 Statut Membre Dernière intervention 26 janvier 2021 - 22 mai 2005 à 10:24
prevert Messages postés 24 Date d'inscription dimanche 22 mai 2005 Statut Membre Dernière intervention 26 janvier 2021 - 4 juin 2005 à 12:58
Bonjour,

Comment puis faire les ascenceurs comme sur la page http://www.baifalldream.org/theranga.html ? Il s'agit des deux triangles.

Merci d'avance pour votre réponse.
A voir également:

7 réponses

crabs Messages postés 908 Date d'inscription lundi 18 avril 2005 Statut Membre Dernière intervention 3 août 2008 506
22 mai 2005 à 10:37
Salut,
Tu regardes le source de la page, tu télécharges tout ce qui va avec (les .js inclus)
et tu décodes tout le javascript...
0
prevert Messages postés 24 Date d'inscription dimanche 22 mai 2005 Statut Membre Dernière intervention 26 janvier 2021
23 mai 2005 à 00:57
Merci pour ta réponse.

Malheureusement je n'y connais rien en javascript. J'aimerais mettre ça sur mon site http://leconteurpoete.free.fr. Tu peux m'aider encore une fois STP ?

Merci
0
Kermitt31 Messages postés 3669 Date d'inscription jeudi 15 juillet 2004 Statut Contributeur Dernière intervention 8 août 2006 492
23 mai 2005 à 08:32
Ton site est pas a jour parce que le 3 Mai 2005 cc'est déjà passé... Désolé mais j'y connais rien non plus en javascript
0
mamiemando Messages postés 33079 Date d'inscription jeudi 12 mai 2005 Statut Modérateur Dernière intervention 23 avril 2024 7 749
23 mai 2005 à 11:27
<style>
	#outScroller { z-index: 100; overflow: hidden; left: 100px; top: 80px; width: 380px; height: 300px; position: absolute; }
	#inScroller { text-align: justify; z-index: 40; position: absolute; top: 0px; left: 0px; }
</style>


Ca correspond au style des triangles, et notmament c'est ça qui les place sur la page (zindex).

Ensuite l'idée est d'utiliser un JS qui va détecter quand le pointeur de la souris survole la zone des triangles (évenement onmouseover) :


<head>
<script language="javascript" src="scroll.js"></script>	<script language="javascript" src="mm.js"></script>
</head>


Les triangle sont gérés par cette partie du code
	<tr>
		<td valign="top" align="center">
			<a class="arrow" onmouseover="up();" onmouseout="out();" href="javascript:void(0)"><img src="img/up.gif" border="0"></a>

		</td>
	</tr>
	<tr>
		<td valign="bottom" align="center">
			<a class="arrow" onmouseover="down();" onmouseout="out();" href="javascript:void(0)"><img src="img/down.gif" border="0"></a>
		</td>
	</tr>


Il suffit donc que tu récupères les js suivant (pas besoin de le comprendre ;o)) :

http://www.baifalldream.org/scroll.js
http://www.baifalldream.org/mm.js

et que tu les mettes dans le même répertoire que ta page et normalement ça devrait être bon ;o)
0
Merci, je vais essayer.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
prevert Messages postés 24 Date d'inscription dimanche 22 mai 2005 Statut Membre Dernière intervention 26 janvier 2021
30 mai 2005 à 17:38
Merci pour votre aide mais je n'y arrive pas.

Pourriez-vous, s'il vous plaît me corriger la page http://leconteurpoete.free.fr/portrait.html afin que ça marche ?

Je le ferai de la même manière sur les autres pages de mon site.

Merci d'avance pour votre aide.
0
mamiemando Messages postés 33079 Date d'inscription jeudi 12 mai 2005 Statut Modérateur Dernière intervention 23 avril 2024 7 749
31 mai 2005 à 11:08
Je viens de regarder.
Il manque tout le code que jet'ai détaillé ou je me trompe ?

Il faut récupérer :
- la partie css pour régler la position des deux triangles,
- et la partie html pour les dessiner.
- les deux javascripts pour gérer les évenements de la souris.
- les deux fichiers d'images de triangles ;o)
0
prevert Messages postés 24 Date d'inscription dimanche 22 mai 2005 Statut Membre Dernière intervention 26 janvier 2021
4 juin 2005 à 12:58
Merci encore pour votre aide.

Ci-dessous le code que j'ai fait. Quelles sont mes erreurs ?

Merci d'avance pour vos réponses.

<HTML>
<HEAD>
<TITLE>portrait</TITLE>
<LINK REL="SHORTCUT ICON" href="http://leconteurpoete.free.fr/favicon.ico">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="page.css" rel="stylesheet" type="text/css">
<script language="javascript" src="scroll.js"></script> <script language="javascript" src="mm.js"></script>
</HEAD>
<BODY style="text-align: center; background-color=#ffffff; margin: auto;">
<style>
#outScroller { z-index: 100; overflow: hidden; left: 100px; top: 80px; width: 380px; height: 300px; position: absolute; }
#inScroller { text-align: justify; z-index: 40; position: absolute; top: 0px; left: 0px; }
</style><!-- ImageReady Slices (portrait.psd) -->
<TABLE WIDTH=610 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2 ROWSPAN=2>
<IMG SRC="images/portrait_01.gif" WIDTH=231 HEIGHT=163 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="images/portrait_02.gif" WIDTH=210 HEIGHT=125 ALT=""></TD>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="images/portrait_03.gif" WIDTH=169 HEIGHT=163 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=125 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/portrait_04.gif" WIDTH=98 HEIGHT=38 ALT=""></TD>
<TD>
<a href="formations.html"><IMG SRC="images/portrait_05.gif" WIDTH=112 HEIGHT=38 ALT="" BORDER="0"></a></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=38 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/portrait_06.gif" WIDTH=179 HEIGHT=123 ALT=""></TD>
<TD bgcolor=#c30078 COLSPAN=4 ROWSPAN=6>
<div id="content" style="height: 240; overflow: auto;">
<TABLE BORDER=0 WIDTH=280> <FONT COLOR="#FFFFFF">
<TR>
<TD>
<tr>
<td valign="top" align="center">
<a class="arrow" onmouseover="up();" onmouseout="out();" href="javascript:void(0)"><img src="img/up.gif" border="0"></a>

</td>
</tr>
<tr>
<td valign="bottom" align="center">
<a class="arrow" onmouseover="down();" onmouseout="out();" href="javascript:void(0)"><img src="img/down.gif" border="0"></a>
</td>
</tr><P><B><FONT SIZE="+2">A</FONT></B>ntoine est né en plein septembre<BR>
<B><FONT SIZE="+2">B</FONT></B>izarrerie de la nature<BR>
<B><FONT SIZE="+2">C</FONT></B>omme une goutte de plaisir<BR>
<B><FONT SIZE="+2">D</FONT></B>ans la vie, il gigote et joue<BR>
<B><FONT SIZE="+2">E</FONT></B>nfant qui s'amuse d'un rien<BR>
<B><FONT SIZE="+2">F</FONT></B>ait de ses idées une fête<BR>
<B><FONT SIZE="+2">G</FONT></B>ai luron au pays des fêes<BR>
<B><FONT SIZE="+2">H</FONT></B>ibou sur un nuage rose<BR>
<B><FONT SIZE="+2">I</FONT></B>l regarde ceux qui l'écoutent<BR>
<B><FONT SIZE="+2">J</FONT></B>eux de regards et connivence<BR>
<B><FONT SIZE="+2">K</FONT></B>aléidoscope bizarre<BR>
<B><FONT SIZE="+2">L</FONT></B>e voilà qui vole et qui plane<BR>
<B><FONT SIZE="+2">M</FONT></B>ultipliant les mots, les phrases<BR>
<B><FONT SIZE="+2">N</FONT></B>ageant dans des contrées secrètes<BR>
<B><FONT SIZE="+2">O</FONT></B>ffrant ses contes et ses histoires<BR>
<B><FONT SIZE="+2">P</FONT></B>etit Poucet marchand de rêves<BR>
<B><FONT SIZE="+2">Q</FONT></B>uestionneur du temps qui s'emballe<BR>
<B><FONT SIZE="+2">R</FONT></B>êveur d'un monde qu'il se crée<BR>
<B><FONT SIZE="+2">S</FONT></B>imple farfadet facétieux<BR>
<B><FONT SIZE="+2">T</FONT></B>irant la langue au firmament<BR>
<B><FONT SIZE="+2">U</FONT></B>tilement et par plaisir<BR>
<B><FONT SIZE="+2">V</FONT></B>oilà qu'il raconte avec joie<BR>
<B><FONT SIZE="+2">W</FONT></B>eek-end après week-end<BR>
<B><FONT SIZE="+2">X</FONT></B> fois par jour se répétant<BR>
<B><FONT SIZE="+2">Y</FONT></B> a qu'une chose à ajouter<BR>
<B><FONT SIZE="+2">Z</FONT></B>ébulon est là pour vous distraire
</TABLE></P>
</div></TD>
<TD COLSPAN=3>
<IMG SRC="images/portrait_08.gif" WIDTH=134 HEIGHT=54 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=54 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/portrait_09.gif" WIDTH=10 HEIGHT=46 ALT="" BORDER="0"></TD>
<TD>
<A href="" onClick="window.open('contact.html','Contact','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=0,copyhistory=0,menuBar=0,width=250,height=150')" TARGET="_self"><IMG SRC="images/portrait_10.gif" WIDTH=68 HEIGHT=46 ALT=""></A></TD>
<TD>
<IMG SRC="images/portrait_11.gif" WIDTH=56 HEIGHT=46 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=46 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/portrait_12.gif" WIDTH=134 HEIGHT=41 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=23 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=4>
<IMG SRC="images/portrait_13.gif" WIDTH=179 HEIGHT=164 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=18 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3>
<a href="sommaire.html"><IMG SRC="images/portrait_14.gif" WIDTH=134 HEIGHT=46 ALT="" BORDER="0"></A></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=46 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/portrait_15.gif" WIDTH=134 HEIGHT=100 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=57 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/portrait_16.gif" WIDTH=297 HEIGHT=43 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=43 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=179 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=52 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=98 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=112 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=35 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=68 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=56 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
0