vue Aperçu d'un site sur une image
Kommunauty
Connexion
Inscription

Aperçu d'un site sur une image


Anonyme Messages : 0

Bonjour,

Pour bien expliquer j'ai:

-ma page page.HTML

-un fichier .JS

Morceau de code sur la PAGE:

<script type="text/javascript" src="scripts/partenariat.js"></script>

<script>

formulaire();

</script>

<div id="apesite">

<script>

image();

</script>

</div>

Mes deux fonctions sur le JS:

function formulaire()

{

document.write("<DIV id=partenariat><SCRIPT LANGUAGE="JavaScript">function checkBlank(input,msg){ if (input.value == null || input.value.length == 0) { alert ("Cher client, vous n'avez pas remplit toutes les informations nécessaires pour envoyer votre message."); return false; } return true;}function checkForm(form){ if (  !checkBlank(form.email)) { return false; } form.submit(); alert ("Message complet, merci de patienter un instant..."); return true;}</SCRIPT> <DIV id=formulaire style='visibility:visible;overflow:hidden;position:absolute;z-index:50;left:0;top:0;width:324;height:234;'><center><form action="http://blabla.com/reception.php" method="post" name="blabla" id="BlasterLogs"><p><span class="style6">Votre Site Internet </span> <span class="style8">(ex: <a class="postlink" href="http://www.google.fr">http://www.google.fr</a>) </span></p><p><input id="site" name="site" maxlength="9999" size="30" style="text-align:center;" value="http://www.google.fr" /></p> <p><input id="visites" name="visites" maxlength="9999" size="30" style="text-align:center;" value="Visites uniques par mois" /></p> <p><textarea name="description" rows="8" cols="55" style="width: 300; height: 60; text-align: center;">Description</textarea></p><p><input type="submit" class="button" id="valider" style="width: 90" name="Submit" value="Envoyer" onClick="checkForm(this.form)"><input type="reset" value="Effacer Données" class="button"></p></DIV></DIV>");

}

function image()

{

var url=document.getElementById('site').value;

var showimg='<img src="http://www.mythumbshot.com/get?url='+url+'/" width="200" height="150">';

document.write("<DIV id=apercu style='visibility:visible;overflow:hidden;position:absolute;z-index:100;left:334;top:0;width:200;height:234;'><center> <br> <br> <br> </center> <DIV id=img style='visibility:visible;overflow:hidden;position:absolute;z-index:100;left:0;top:0;width:200;height:226;'><center><br><br> "+showimg+" <br><br> <input type="button" value="Tester le site" class="button" onClick=" document.getElementById('apercu').innerHTML='<script> image(); </script>'; "> </center></DIV></DIV></DIV>")

}

J'aimerais donc pouvoir en quelque sorte "rafraichir la fonction", ré-afficher l'image "var showimg" avec la nouvelle url entrée dans le champ 'site' grâce au bouton "Tester le site".

Sinon il doit y avoir un soucis au niveau de ma première fonction également, elle détecte bien qu'on a pas remplit tout les champs et affiche le message d'alerte mais elle envoi quant même le message et si on a bien remplit le formulaire, n'affiche pas le message positif.

Voili voilou c'est à vous!

dimanche 22 mars 2009

SiMax Messages : 7572

Salut ! J'ai corrigé ton code pour qu'il fonctionne. J'ai modifié un peu le fonctionnement. Lorsque l'utilisateur a écrit l'adresse de son site et passe à la case suivante (description), la miniature s'affiche toute seule.


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1&#46;0 Transitional//EN' 'http&#58;//www&#46;w3&#46;org/TR/xhtml1/DTD/xhtml1-transitional&#46;dtd'>
<html xmlns='http&#58;//www&#46;w3&#46;org/1999/xhtml'>
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<script type="text/javascript">
function image(url)
{
var url = url&#46;value;

document&#46;getElementById("apesite")&#46;innerHTML = '<img src="http&#58;//www&#46;mythumbshot&#46;com/get?url='+url+'/" width="200" height="150">';
}

function checkBlank(input,msg)
{
if (input&#46;value == null || input&#46;value&#46;length == 0)
{
alert ("Cher client, vous n'avez pas remplit toutes les informations nécessaires pour envoyer votre message&#46;");
return false;
}
return true;
}

function checkForm(form)
{
if (!checkBlank(form&#46;email))
{
return false;
}
form&#46;submit();
alert ("Message complet, merci de patienter un instant&#46;&#46;&#46;");
return true;
}
</script>

</head>

<body>

<div id="partenariat">
<div id="formulaire">
<center>
<form action="http&#58;//blabla&#46;com/reception&#46;php" method="post" name="blabla" id="BlasterLogs">
<p><span class="style6">Votre Site Internet </span> <span class="style8">(ex&#58; http&#58;//www&#46;google&#46;fr) </span></p>
<p><input id="site" name="site" maxlength="9999" size="30" style="text-align&#58;center;" value="http&#58;//www&#46;google&#46;fr" onblur="image(this);"/></p>
<p><input id="visites" name="visites" maxlength="9999" size="30" style="text-align&#58;center;" value="Visites uniques par mois" /></p>
<p><textarea name="description" rows="8" cols="55" style="width&#58; 300; height&#58; 60; text-align&#58; center;">Description</textarea></p>
<p><input type="submit" class="button" id="valider" style="width&#58; 90" name="Submit" value="Envoyer" onClick="checkForm(this&#46;form)"><input type="reset" value="Effacer Données" class="button"></p>
</form>
</center>
</div>
</div>

<div id="apesite"></div>

</body>
</html>

Regarde et dis moi si tu comprends comment ça fonctionne et où étaient tes erreurs.

Au passage, attention quand tu codes aux points suivants :

  • Les balises doivent être en minuscule : <div> et pas <DIV>
  • [/*:m:2c2e1ui8]

  • Les balises doivent être fermées : tu as ouvert une balise <center> et un <div> mais tu ne les a pas fermé
  • [/*:m:2c2e1ui8]

  • Les attributs doivent être entre guillements : id="site" et pas id=site
  • [/*:m:2c2e1ui8]

  • Quand tu peux, écris directement ton formulaire au lieu d'appeler une fonction JS pour l'écrire
  • [/*:m:2c2e1ui8][/list:u:2c2e1ui8]

dimanche 22 mars 2009

Anonyme Messages : 0

Justement toute la difficulté réside à mettre ça en fichier js externe (l'intérêt pour moi est la facilité de MAJ).

dimanche 22 mars 2009 (Dernière édition dimanche 22 mars 2009)

SiMax Messages : 7572

Pour plus de facilité j'ai tout mis sur la même page mais ensuite tu n'as qu'à copier le code Javascript et à le lier à la page comme tu avais fait

dimanche 22 mars 2009

Anonyme Messages : 0

Je teste et je te dit.

dimanche 22 mars 2009

SiMax Messages : 7572

D'accord !

dimanche 22 mars 2009

Anonyme Messages : 0

Pour l'affichage automatique de l'image, c'est bon.

Pour la vérification des champs je me débrouillerais.

Par contre j'ai voulu ajouter un bouton pour afficher l'image du site manuellement:

document.write("<br><div align="right"> <input type="button" class="button" value="Tester le site" onClick="image(document.getElementById('site').value);"/> </div>")

ça ne fonctionne pas, il ne reconnait pas le ('site').value même en mettant ("site").value.

dimanche 22 mars 2009

SiMax Messages : 7572

Dans ce cas essaye avec :

onclick="image(document&#46;blabla&#46;site)"
dimanche 22 mars 2009

Anonyme Messages : 0

CONGRATULATION!

dimanche 22 mars 2009

SiMax Messages : 7572

Hésite pas à revenir si tu as des problèmes !

dimanche 22 mars 2009

Page suivante »