Mini projet html/css/java HELP

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mini projet html/css/java HELP

fordragon

On va tous crever ...

Bonjour,

Bon, j'ai un mini projet à rendre le 24.03.2013 à 23h59 au plus tard, sur le Html/Css/Javascript, et je galère un peux ^^

Je dois créer un jeux sur une page web, et ce jeux est un puzzle. L'image doit être coupé en 9.
Sa doit ressemble à sa à la fin:

Voila ce que j'ai fait:

Html:

Code :

<!doctype>
<html>
<head>
<title> Puzzler</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div class="centrage"><h1>1WEB Project-Puzller</div></h1>
<br>
<br>
<form name="forsec">
<input type="text" size="3" name="secm"> minute(s)
<input type="text" size="3" name="secs"> secondes
<input type="text" size="3" name="secd"> dixiemes
<input type="button" value="Chrono" onclick="chrono()">
<input type="button" value="RaZ" onclick="rasee()">
<input type="button" value="Tempo" onclick="clearTimeout(compte)">
</form>

<br>
<br>
<br>
<br>
<table width="230" height="160">
<tr>
<td>sdf</td>
<td>dsf</td>
<td>sdf</td>
</tr>
<tr>
<td>sdf</td>
<td>sdf</td>
<td>sdf</td>
</tr>
<tr>
<td>sdf</td>
<td>sdf</td>
<td>sdf</td>
</tr>
</table>
<img src="dossier/image.jpg" height="190" width="220">
<br>
<br>
<div id="scores">
<center>Scores</center>
<br>

</div>



</body>
</html>

Css:

Code :

/* spécification du tableau */

td
    {
    border: 1px solid black;
    }
    
table
    {
    border-collapse: collapse; /*coller les case du tableau entre elle */
    display: inline-block;
    width: 75px;
    vertical-align: top;
    
    }

/* centrer du text */    
.centrage
    {
    text-align: center;
    }

/*taille du titre */    
h1
    {
    font-size: 75px;
    }
/*positioner l'image a coter du puzzle */    

img
    {
    display: inline-block;
    border: 1px solid black;
    vertical-align: top;
    height: auto; /* permet de garder une image non déformé */
    }

#Scores  
    {
    width:100px;
    margin:left; /* position du cadres */
    padding:10px;
    background-color:#FFF;
    border-left:1px solid #000000; /* couleur cadre */
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
    }

Javascript:

Code :

/* code pour couper une image en 9 partie */

window.onload = function ( )  
    {
        = 'dossier/image.jpg'; //'
        var img = new Image();
        img.onload = function ( )
            {
            var min  = Math.min( img.width, img.height );
            var size = Math.floor( min / 3 );
            var i;
            var div;
            var row;
            var col;
            var container = document. .  ('div');
            for ( i = 0; i < 9; i += 1 )
                {
                div = document. .  ('div');
                div.style.width  = size + 'px';
                div.style.height = size + 'px';
                div.style.backgroundImage = 'url(' + img_path + ')';
                row = ( i % 3 );
                col = Math.floor( i / 3 );
                div.style.backgroundPosition =   - row * size + 'px ' + - col * size + 'px';
                div.style.float = 'left';
                if ( !row )
                    {
                    div.style.clear = 'left';
                    }
                container. .  ( div );
                }
            document.body. .  ( container );
            };
        img.src = img_path;
    };

/* chronometre*/  

var dixiem=0 /* mise a zero des dixièmes */
var secon=0 /* " des secondes */
var minu=0 /* " des min */

function chrono()
        {
        dixiem++; /* incrémentation dixièmes à 1 */
        if (dixiem>9)
            {
            dixiem=0;secon++
            } /* si dixiem > 9 réini à 0 et incrémente sec de 1 */
        if (secon>59)
            {
            secon=0;minu++
            } /* si sec > 59 réini à 0 et incrémente min de 1 */
        document.forsec.secd.value=" "+dixiem /* affichage des dixiem */
        document.forsec.secs.value=" "+secon /* affichage des secondes */
        document.forsec.secm.value=" "+minu /* affichage des min */
        compte=setTimeout('chrono()',100) /* relance fonction */
    }

function rasee()/* remise compteurs à 0 */
    {
    clearTimeout(compte) /* arrêt chrono */
    dixiem=0;
    secon=0;
    minu=0;
    document.forsec.secd.value=" "+dixiem
    document.forsec.secs.value=" "+secon
    document.forsec.secm.value=" "+minu
    }

Quasiment rien ne fonctionne, et je ne comprend pas pourquoi ...

Le chrono ne se lance pas, et j'ai pourtant tout vérifié, j'ai les même noms partout ...

je me suis inspiré de script trouvé sur le net, je l'avoue.

Message édité par fordragon le 13-03-2013 à 11:42:47

---------------
Project X2: EVGA P55 FTW, I5 760 @3.3Ghz WaterCoolé, G.Skill RIPJAWS 2x4 Gb @1600Mhz, SSD Intel 520 de 240 Gb, F3 1000 Gb @7200tr/min, 470 GTX WaterCoolé, Seasonic X-Series 750W, 24" Iiyama ProLite B2409HDS-B1 + 19" 1440*900 Water RED Boitier Black

Publicité

inceptor

Bonjour élève de Supinfo.
Je vois que la majeur parti de ton code est tiré du net. Et tu demandes a ce forum de te "faire" cette exercice noter.
Il serait peut être mieux de commencé par posé une question. De plus, toute tentative de plagia sera considéré comme cheater.
Merci de ta compréhension.

fordragon

On va tous crever ...

Alors:
1 je me suis inspiré, et alors ?
2 tu es flic ?
3 celui qui ne sait jamais aidé du net, qu'il me lance la première pierre
4 les questions sont explicites, je vais les reformuler
5 désolé de te décevoir, mais on n'est pas tous fort en programmation, et malgré mon cours, faire un chronométré, désolé de te décevoir, mais je ne sais pas faire !
6 tu es née en 1994, ce qui fait que tu as tout juste 19 ans, donc tu es en deuxieme année a supinfo, donc tu n'es pas STA, donc tes remontrances, tu te les gardes !
Si tu es doué en prog/etc, et que tu peux m'aider, je suis preneur !
Je n'ai jamais demander qu'on face mon code, vue que j'en ai déjà fait une bonne partie. Sa bug juste et je ne trouve pas mes erreurs !

Voici mes questions:
- Je n'arrive pas à comprendre pourquoi mon chronomètre ne démarre pas, et je ne trouve pas mes erreures, pouvez vous m'aider à les trouver ?
- Comment faire pour mettre les images dans les cellules de mon tableau ?

PS: @inceptor: Si c'est toi ici aussi: http://www.siteduzero.com/forum/su [...] eme-taille
Sérieux, va te pendre
Si ton but est de saquer les élèves de SupInfo en étant STA, parce que tu es bon en prog/etc, tu as rien comprit à la vie !
Et sache qu'on récolte toujours ce qu'on sème, donc méfie toi aux crasses que tu peux faire aux autres, un jour il y aura un retour de rateau qui sera violent

Message édité par fordragon le 13-03-2013 à 09:49:50

gatsu35

Blablaté par Harko

nan mais tu colles un morceau de code à l'arrache
Déjà avant toute chose, essaye au maximum de faire des fonctions, avec des noms qui décrivent leur action.
exemple dans ton window.onload tu as plein de code, tu peux très bien faire des fonctions et ton window.onload appelera un main() qui appelera toutes les autres fonctions.

Ensuite, tout d'abord avant de faire un chronomètre, travaille d'abord l'image, comme sur le site du zero, il te l'ont dit : ne pas découper l'image toi même, mais réutiliser les CSS et le background position, ça peut aider.

Enfin, oui, on ne fait pas les devoirs, mais on peut aider.

---------------
Blablaté par Harko

rufo

Pas me confondre avec Lycos!

L30 du JS : container. . ( div );
C'est censé marcher ça :??: Y'a un espace entre les 2 points...
Idem L30.

Mon avis est que si ton chrono se lance pas, ça vient sans doute d'erreurs (de syntaxe) dans le code. Installes Firebug sur Firefox, ça t'aidera pour débugger...

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

fordragon

On va tous crever ...

@Gatsu35: d'accord, je vais regarder tout sa et revenir vers vous.

@Rufo: Il y a eu un bug quand j'ai copier/coller le code ...
Il manque des mots, je modifie sa tout de suite !

fordragon

On va tous crever ...

Sa y est, sa fonctionne

J'ai enlevé le <script> et </script> du chrono, et mes 9 images découpées sont apparues !
et le chrono fonctionne, YOUPI
J'avance

Bon maintenant il faut que j'arrive à les placer dans un tableau, la par contre ça ne va pas être la même ^^

@Gatsu: Je n'ai pas trop compris pour les fonctions et le main ...
Je dois bien avouer que c'est un peux du chinois pour moi ...
Peux tu m'illustrer tes propos par un exemple ?
Que j'essaye de rendre ce bout de code plus clair

Message édité par fordragon le 13-03-2013 à 14:48:23

rufo

Pas me confondre avec Lycos!

ben au lieu de faire window.onload = function ( )
{
...le code de la fonction...
}

Tu fais window.onload = main();
puis
function main()
{
...le code de la fonction...
}

C'est plus clair comme code.

PS : merci de faire un effort en orthographe, ton dernier message est une horreur

fordragon

On va tous crever ...

D'accord, je vois mieux la !

Bon je vais essayer de faire sa, et je reviens vers vous !

PS: Nom de dioux, j'ai été un peux trop vite, effectivement

Message édité par fordragon le 13-03-2013 à 15:05:24

fordragon

On va tous crever ...

Bon, je viens d'essayer de rendre le code plus clair ...
Sauf que cette fois, je n'ai plus d'image et mon chrono me renvoi des erreurs :sweat:

voila ce que j'ai fait:

Code :

/* code pour couper une image en 9 partie */
window.onload = main();
{
var img_path = 'dossier/image.jpg';
var img = new Image();
img.onload = function main()
{
var min = Math.min( img.width, img.height );
var size = Math.floor( min / 3 );
var i;
var div;
var row;
var col;
var container = document. . ('div');
for ( i = 0; i < 9; i += 1 )
function main()
{
div = document. . ('div');
div.style.width = size + 'px';
div.style.height = size + 'px';
div.style.backgroundImage = 'url(' + img_path + ')';
row = ( i % 3 );
col = Math.floor( i / 3 );
div.style.backgroundPosition = - row * size + 'px ' + - col * size + 'px';
div.style.float = 'left';
function main ()
if ( !row )
{
div.style.clear = 'left';
}
container. . ( div );
}
document.body. . ( container );
};
img.src = img_path;
};
/* chronometre*/
var dixiem=0 /* mise a zero des dixièmes */
var secon=0 /* " des secondes */
var minu=0 /* " des min */
function chrono()
{
dixiem++; /* incrémentation dixièmes à 1 */
if (dixiem>9)
{
dixiem=0;secon++
} /* si dixiem > 9 réini à 0 et incrémente sec de 1 */
if (secon>59)
{
secon=0;minu++
} /* si sec > 59 réini à 0 et incrémente min de 1 */
document.forsec.secd.value=" "+dixiem /* affichage des dixiem */
document.forsec.secs.value=" "+secon /* affichage des secondes */
document.forsec.secm.value=" "+minu /* affichage des min */
compte=setTimeout('chrono()',100) /* relance fonction */
}
function rasee()/* remise compteurs à 0 */
{
clearTimeout(compte) /* arrêt chrono */
dixiem=0;
secon=0;
minu=0;
document.forsec.secd.value=" "+dixiem
document.forsec.secs.value=" "+secon
document.forsec.secm.value=" "+minu
}

J'ai essayé de mettre un "window.onload = main();" pour le chrono, mais sa n'a rien changer, chrono toujours HS ...

Je crois que j'ai pas fermé mes fonctions correctement, mais je ne vois pas ou :??:

Message édité par fordragon le 13-03-2013 à 15:18:44

Publicité

rufo

Pas me confondre avec Lycos!

Tu comprends ce que tu fais :??:
window.onload = main();
{
var img_path = 'dossier/image.jpg';
...
}

Comment veux-tu que ça marche ? T'appelles un main() qui n'existe pas Installes Firebug sur Firefox. Il t'aurais dit aussi que la fonction main() n'existe pas...

window.onload = main();
function mail()
{
var img_path = 'dossier/image.jpg';
...
}

fordragon

On va tous crever ...

J'essaye de comprendre ...
Je capte pas tout.

Bah oui, il me dit que main n'éxiste pas, mais je ne comprennais pas pourquoi ...

Et la je comprend

EDIT:

Code :

/* code pour couper une image en 9 partie */
window.onload = main();
function main()
{
var img_path = 'dossier/image.jpg';
var img = new Image();
img.onload = function main()
{
var min = Math.min( img.width, img.height );
var size = Math.floor( min / 3 );
var i;
var div;
var row;
var col;
var container = document. . ('div');
for ( i = 0; i < 9; i += 1 )
function main()
{
div = document. . ('div');
div.style.width = size + 'px';
div.style.height = size + 'px';
div.style.backgroundImage = 'url(' + img_path + ')';
row = ( i % 3 );
col = Math.floor( i / 3 );
div.style.backgroundPosition = - row * size + 'px ' + - col * size + 'px';
div.style.float = 'left';
if ( !row )
{
div.style.clear = 'left';
}
container. . ( div );
}
document.body. . ( container );
};
img.src = img_path;
};
/* chronometre*/
var dixiem=0 /* mise a zero des dixièmes */
var secon=0 /* " des secondes */
var minu=0 /* " des min */
function chrono()
{
dixiem++; /* incrémentation dixièmes à 1 */
if (dixiem>9)
{
dixiem=0;secon++
} /* si dixiem > 9 réini à 0 et incrémente sec de 1 */
if (secon>59)
{
secon=0;minu++
} /* si sec > 59 réini à 0 et incrémente min de 1 */
document.forsec.secd.value=" "+dixiem /* affichage des dixiem */
document.forsec.secs.value=" "+secon /* affichage des secondes */
document.forsec.secm.value=" "+minu /* affichage des min */
compte=setTimeout('chrono()',100) /* relance fonction */
}
function rasee()/* remise compteurs à 0 */
{
clearTimeout(compte) /* arrêt chrono */
dixiem=0;
secon=0;
minu=0;
document.forsec.secd.value=" "+dixiem
document.forsec.secs.value=" "+secon
document.forsec.secm.value=" "+minu
}

Mon chrono refonctionne et je n'ai plus d'erreur sur firefox debug, mais je n'ai plus mes 9 images découpées ...

Message édité par fordragon le 13-03-2013 à 15:34:19

gatsu35

Blablaté par Harko

déjà faut mettre
window.onload = main();
car c'est une référence à main que tu dois lui donner pas directement exécuter main

window.onload = main;

Ensuite, il faut déclarer tes fonctions avant de les utiliser
Et c'est quoi toutes ces fonctions main déclarée à l'intérieur de ta fonction main() ? tu as réfléchi un minimum ?

Message édité par gatsu35 le 13-03-2013 à 16:35:31

---------------
Blablaté par Harko

rufo

Pas me confondre avec Lycos!

Je pense qu'avant de vouloir coder un truc en JS, faudrait apprendre les bases de ce langage

fordragon

On va tous crever ...

@gatsu: Bah je l'ai mit le "window.onload = main();" ...
Bah j’essaie et je peux te dire que ce n'est pas évident pour moi !

@rufo: Bah les bases je les ai vue en cours ...

Je sais que je suis mauvais, je fais de mon mieux pour progresser et pour avoir la moyenne à ce mini-projet.
Ne vous inquiétez pas, je n'ai pas l'intention de finir programmeur ^^
Je suis obligé de passer pas ces cours pour valider mon année.

gatsu35

Blablaté par Harko

nan faut pas mettre window.onload = main()
mais window.onload = main

Ce n'est pas le resultat de la fonction que tu veux, mais la référence à la fonction.

---------------
Blablaté par Harko

fordragon

On va tous crever ...

d'accord, donc "windows.onload = main()" c'est pour le résultat et le "window.onload = main" c'est pour l'appeler, c'est sa ?

rufo

Pas me confondre avec Lycos!

oui.

fordragon

On va tous crever ...

D'accord, merci pour ta patience

Bon, j'ai fait sa, avec ton aide:

Code :

var i
var div
var row
var col
var img_path = 'dossier/image.jpg'
var img = new Image()
var min = Math.min( img.width, img.height )
var size = Math.floor( min / 3 )
var container = document. . ('div')
window.onload = main;
function main()
{
var img_path = 'dossier/image.jpg';
var img = new Image();
img.onload = function main()
{
var min = Math.min( img.width, img.height );
var size = Math.floor( min / 3 );
var container = document. . ('div');
for ( i = 0; i < 9; i += 1 )
function main()
{
div = document. . ('div');
div.style.width = size + 'px';
div.style.height = size + 'px';
div.style.backgroundImage = 'url(' + img_path + ')';
row = ( i % 3 );
col = Math.floor( i / 3 );
div.style.backgroundPosition = - row * size + 'px ' + - col * size + 'px';
div.style.float = 'left';
if ( !row )
{
div.style.clear = 'left';
}
container. . ( div );
}
document.body. . ( container );
};
img.src = img_path;
};
/* chronometre*/
var dixiem=0 /* mise a zero des dixièmes */
var secon=0 /* " des secondes */
var minu=0 /* " des min */
function chrono()
{
dixiem++; /* incrémentation dixièmes à 1 */
if (dixiem>9)
{
dixiem=0;secon++
} /* si dixiem > 9 réini à 0 et incrémente sec de 1 */
if (secon>59)
{
secon=0;minu++
} /* si sec > 59 réini à 0 et incrémente min de 1 */
document.forsec.secd.value=" "+dixiem /* affichage des dixiem */
document.forsec.secs.value=" "+secon /* affichage des secondes */
document.forsec.secm.value=" "+minu /* affichage des min */
compte=setTimeout('chrono()',100) /* relance fonction */
}
function rasee()/* remise compteurs à 0 */
{
clearTimeout(compte) /* arrêt chrono */
dixiem=0;
secon=0;
minu=0;
document.forsec.secd.value=" "+dixiem
document.forsec.secs.value=" "+secon
document.forsec.secm.value=" "+minu
}

mais les images ne sont toujours pas revenues ...

J'ai déclaré toutes les variables, comme pour le chrono. Enfin, je crois ^^

Message édité par fordragon le 14-03-2013 à 09:53:56

fordragon

On va tous crever ...

A l'aide ...

je suis au bord de la déprime ^^

FORUM HardWare.fr

Programmation

HTML/CSS

Mini projet html/css/java HELP

Sujets relatifs
executer un binaire en HTML	[resolu] Fetch_object
Recherche programmeur - Projet application mobile.	[Java] I2P : bloqué par un pare feu
AIDE projet terminale STI2D	parcours fichier HTML
HTML tableau colspan	Serveur web java multithread
Java Eclipse Classpath et ressources
Plus de sujets relatifs à : Mini projet html/css/java HELP

Page générée en 0.124 secondes