[AIDE] Script Javascript

**will74** · 11/06/2007, 17h37

Bonjour à tous ...

Je vien vous exposer un petit problème que je rencontre sur le kit graphik que je suis en train de créer..
J'aimerais un effet du genre que lorsque l'utilisateur clique sur un lien, un nouvel élément apparaisse dans la page sans rechargement d'une page différent ...
Exemple ici : http://jigsaw.w3.org/css-validator/

Dans le tableau bleu obtenu, lorsque vous cliquez sur "Options supllémentaires", un nouvel élément s'affiche expréssement en dessous, et disparaît si on reclique dessus..
Après avoir un peu examiné le truc je suis sur que le tout est fait en javascript .. or je n'y connais rien à ce langage :d

Voici la page d'origine dont je vous parle : lien
Vous remarquerez tout en dessous un lien "GoConnect".. J'aimerais que ce lien soit à l'exemple de "Options supplémentaires dans ma page d'exxemple, et que la page d'arrivée soit celle-ci : lien..

Pour ce, un tableau contenant le formulaire serait afficgé ainsi que le fond d'écran de la page changé ...
Le premier se nomme "bg.gif", et le second qui donne l'aspect cadre "bg-connect.gif"...

Si vous pourriez m'aider quant à l'installation d'un tel script, je vous en serais reconnaissant ...

a+

Will :d

PS :

J'ai déjà trouvé ceci mais sans succès quant à son installation ..

**E.Bzz** · 11/06/2007, 17h41

Bonjour,
ton script "toggle" devrait fonctionner (sauf adaptations pour IE 7), sous réserve de donner des ID aux éléments à masquer, et de les passer correctement en paramètres à tes fonctions ...

A+

**will74** · 11/06/2007, 17h55

Je ne comprend pas ce que tu veut dire par ceci :

et de les passer correctement en paramètres à tes fonctions ...

A+

**E.Bzz** · 11/06/2007, 17h58

Envoyé par will74

Je ne comprend pas ce que tu veut dire par ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function toggle(monId) {

Il faut passer correctement la valeur monId à l'appel de la fonction ...

**will74** · 11/06/2007, 17h59

C'est ce que je fais ..

onClick=fonction(connect)...
et malgré cela sa ne marche pas ..

**E.Bzz** · 11/06/2007, 18h00

Envoyé par will74

C'est ce que je fais ..

onClick=fonction(connect)...
et malgré cela sa ne marche pas ..

Heu ... oui mais là, difficile de savoir

Donne tous le code (HTML + JS) ...

A+

**will74** · 11/06/2007, 18h05

Voici le code de ma page html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="Description" content="aINtOx" />
<meta name="robots" content="index" />
<meta name="Keywords" content="MOTS CLES" />
<meta name="author" content="will's" />
<meta name="identifier-url" content="http://www.aintox.com" />
<meta name="Reply-to" content="mailto:aintox@hotmail.fr" />
<meta name="Rating" content="General" />
<meta name="Category" content="Homepage" />
<meta name="Page-topic" content="Homepage" />
<meta name="Classification" content="aINtOx" />

<meta http-equiv="Content-Language" content="fr" />
<meta name="location" content="France, FRANCE" />
<meta name="date-creation-ddmmyyyy" content="01012007" />
<meta name="date-revision-ddmmyyyy" content="01012007" />
<meta name="Distribution" content="Global" />
<meta name="Audience" content="General" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="images/x-icon" href="favicon.ico" />
<title>..:: aINtOx Just'first ::..</title>

<link href="css/aintox.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">

</script>
<script type="text/javascript" language="JavaScript" src="main/js/rollover-menu.js"></script>
<script type="text/javascript" language="JavaScript" src="main/js/preload.js"></script>
</head>

<body onLoad="preloadImages('main/menu-home-over.png','main/menu-portofolio-over.png','main/menu-forum-over.png','main/menu-contact-over.png')">
<p align="center"> </p>
<div align="center">
<p> </p>
<div>
<p align="left"></p>
<form id="connect" name="connect" method="post" action="">
<table width="414" border="0" align="center">
<tr>
<td width="176" valign="top"><span class="general">Pseudo :</span>
<input name="pseudo" type="text" class="input" />
</td>
<td width="159" valign="top"><span class="general">Pass :</span>
<input name="pass" type="password" class="input" /></td>
<td width="71"><div align="center">
<input name="Submit" type="submit" class="lweiss" value="Login" />
</div></td>
</tr>
</table>
</form>
</div>
<p> </p>
<p> </p>
<p><img src="main/menu-home-over.png" width="87" height="16" alt="Home" />    <a href="portofolio.html" onmouseover="i268866.src='main/menu-portofolio-over.png'" onmouseout="i268866.src='main/menu-portofolio.png'"><img src="main/menu-portofolio.png" alt="Portofolio" name="i268866" hspace="0" vspace="0" border="0" id="i268866" /></a>    <a href="forum.html" onmouseover="i857488.src='main/menu-forum-over.png'" onmouseout="i857488.src='main/menu-forum.png'"><img src="main/menu-forum.png" alt="Forum" name="i857488" hspace="0" vspace="0" border="0" id="i857488" /></a>    <a href="contact.html" onmouseover="i916983.src='main/menu-contact-over.png'" onmouseout="i916983.src='main/menu-contact.png'"><img src="main/menu-contact.png" alt="Contact" name="i916983" hspace="0" vspace="0" border="0" id="i916983" /></a></p>
<table width="590" height="196" border="0" align="center">
<tr>
<td width="582" height="12"><img src="main/table-haut.png" width="584" height="81" alt="table-haut" /></td>
</tr>
<tr>
<td height="50" nowrap="nowrap" background="main/table-bg.png">
<div align="center" class="actif">
<p class="general"><strong>B</strong>ienvenue sur ..:: <strong>a</strong>INtOx Just'first ::.. <strong>K</strong>it gRaphIk by<strong> w</strong>ill</p>
<p class="Style4"> </p>
<p class="Style5"> </p>
</div>
<p align="center"> </p>
<ul class="about">
<p align="center">Kit designed to use in portofolio | <a href="#" >Go Connect™ </a></p>
</ul>
</td>
</tr>
<tr>
<td height="12"><img src="main/table-bas.png" width="584" height="79" alt="table-bas" /></td>
</tr>
</table>
<p class="date"> </p>
<p class="date"><span class="date">.:: All rights reserved - Please read the liscence ::.</span></p>
<p class="date"> © 2007 by Will's Productions. Tous droits réservés.</p>
<p class="date"><script type="text/javascript" language="JavaScript" src="main/js/date.js"></script></p>
<p class="date"> </p>
<p class="date"> </p>
<p class="date"><img src="main/logo/logo-medium.png" width="48" height="60" alt="logo-medium" /></p>
<p class="date"> </p>
<p class="date"> </p>
<p class="date"> </p>
<p class="date"> </p>
</div>
<p class="date"> </p>
</body>
</html>

Et celui de mon code javascript :

Pour précision, c'est sur le elien "GoConnect" que doit se faire l'apparition de la div "connect"
De plus j'ai mis en gras la dic qui doit apparaît/disparaître au clic ..

Merci

**E.Bzz** · 11/06/2007, 18h16

Ok.

Donc en l'état les fonctions toggle ne sont pas appelées par ta page.
Pas étonnant qu'elles ne fonctionnent pas ...
Avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="toggle('connect');">Go Connect™ </a>

ça devrait le faire, non ?

**will74** · 11/06/2007, 18h21

Nickel ..
Mais par défaut je voudrais que la div soit cachée ..
Or ici elle est affiché dès le début ..

De plus je ne pense pas que cela soit en java, mais saurait tu me dire comment faire pour changer l'image de fond de mon document au clic sur le lien "GoConnect" afin de donner ce rendu : http://wouili.free.fr/KiT%20GraFik%2...x-connect.html

Merci d'avance

**E.Bzz** · 11/06/2007, 18h35

Envoyé par will74

Nickel ..
Mais par défaut je voudrais que la div soit cachée ..

Oui, j'allais te dire qu'il vallait mieux intervenir sur le <div> que sur le <form>.
Ajoute un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="display:none;"

dans le tag concerné.

De plus je ne pense pas que cela soit en java, mais saurait tu me dire comment faire pour changer l'image de fond de mon document au clic sur le lien

En Javascript, si

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

monElement.style.backgroundImage='la_bonne_url.gif';

à ajouter dans tes fonctions ...

A+

**will74** · 11/06/2007, 18h41

Ou dois-je incorporer les deux codes que tu m'a donné ..
Peut-tu me montrer dans mon script java

a+

**E.Bzz** · 11/06/2007, 18h43

Envoyé par will74

Ou doi-je inscrire le style:display=non pour la div ?

Comme pour un form :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="display:none;">

A+

**will74** · 11/06/2007, 18h46

Envoyé par E.Bzz

Comme pour un form :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="display:none;">

A+

Après cela si je clique sur mon lien la dic ne veut plus s'afficher ?
Et pour le background, pour quelle fonction dois-je le placer ?
a+

**E.Bzz** · 11/06/2007, 18h56

Envoyé par will74

Après cela si je clique sur mon lien la dic ne veut plus s'afficher ?
Et pour le background, pour quelle fonction dois-je le placer ?
a+

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 function toggle(connect) {
var monElement = document.getElementById(connect);
if(monElement.style.display == 'none')
monElement.style.display = 'block';
else 
monElement.style.display = 'none';
}
function toggleOn(connect) {
var monElement = document.getElementById(connect);
monElement.style.display = 'block';
}
function toggleOff(connect) {
var monElement = document.getElementById(connect);
monElement.style.display = 'none';
}

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="div_connect" style="display:none;background-image=url(ton_image.gif);">
<p align="left"></p>
<form id="connect" name="connect" method="post" action="">
<table width="414" border="0" align="center">
<tr>
<td width="176" valign="top"><span class="general">Pseudo :</span>
<input name="pseudo" type="text" class="input" />
</td>
<td width="159" valign="top"><span class="general">Pass :</span>
<input name="pass" type="password" class="input" /></td>
<td width="71"><div align="center">
<input name="Submit" type="submit" class="lweiss" value="Login" />
</div>
...
...
<p align="center">Kit designed to use in portofolio&nbsp;|&nbsp;<a href="#" onclick="toggle('div_connect');">Go Connect™ </a></p>

... et pas besoin de script pour changer l'image de fond quand le div est masqué

A+

**will74** · 11/06/2007, 19h55

Merci pour tout ....
Le changement de background ne marche toujours pas, mais je vais trouver autr chose ..
En tout cas c'est nickel .
Merci de ton aide ..

a+

**E.Bzz** · 12/06/2007, 09h22

Envoyé par will74

Le changement de background ne marche toujours pas, mais je vais trouver autr chose ..

Mais pourquoi changer le background quand le div est masqué ??

**will74** · 12/06/2007, 11h26

Envoyé par E.Bzz

Mais pourquoi changer le background quand le div est masqué ??

Non je veux changer la background de la page quand la div est affiché pour donner un effet cadre ..
Et par défault j'ai créé un background spécial pour cela...
Ainsi, lorsque l'on cliquerait sur le lien GoConnect, ce n'est pas le background de la div qui devrait changer mais celui de toute la page ..
Ainsi, au reclic, quand la div disparaitrai, le background originale de la page reviendrait ..

Et tout cela de préférence serait intégré dans mon fichier script en javascript...

Voilà

a+

[AIDE] Script Javascript

JavaScript

Discussions similaires

Partager

Partager