[AIDE] Script Javascript

Version imprimable

11/06/2007, 17h37
will74

[AIDE] Script Javascript

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 ..

Citation:

function toggle(monId) {
var monElement = document.getElementById(monId);
if(monElement.style.display == 'none')
monElement.style.display = 'block';
else
monElement.style.display = 'none';
}
function toggleOn(monId) {
var monElement = document.getElementById(monId);
monElement.style.display = 'block';
}
function toggleOff(monId) {
var monElement = document.getElementById(monId);
monElement.style.display = 'none';
}
11/06/2007, 17h41
E.Bzz

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+
11/06/2007, 17h55
will74

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

Citation:

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

A+
11/06/2007, 17h58
E.Bzz

Citation:

Envoyé par will74

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

Code:

function toggle(monId) {

Il faut passer correctement la valeur monId à l'appel de la fonction ...
11/06/2007, 17h59
will74

C'est ce que je fais ..

onClick=fonction(connect)...
et malgré cela sa ne marche pas ..
11/06/2007, 18h00
E.Bzz

Citation:

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+
11/06/2007, 18h05
will74

Voici le code de ma page html :

Citation:

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

Citation:

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';
}

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
11/06/2007, 18h16
E.Bzz

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:

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

ça devrait le faire, non ?
11/06/2007, 18h21
will74

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
11/06/2007, 18h35
E.Bzz

Citation:

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:

style="display:none;"

dans le tag concerné.

Citation:

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:

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

à ajouter dans tes fonctions ...

A+
11/06/2007, 18h41
will74

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

a+
11/06/2007, 18h43
E.Bzz

Citation:

Envoyé par will74

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

Comme pour un form :

Code:

<div style="display:none;">

A+
11/06/2007, 18h46
will74

Citation:

Envoyé par E.Bzz

Comme pour un form :

Code:

<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+

Citation:

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+

:koi:

Code:

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:

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é :mrgreen:

A+

11/06/2007, 19h55
will74

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+
12/06/2007, 09h22
E.Bzz

Citation:

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é ??
12/06/2007, 11h26
will74

Citation:

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+