Insérer un tableau HTML dans le code Image Ready

Discussion dans 'Web, design' créé par Noir, 28 Avril 2005.

Statut de la discussion:
Fermée.
  1. Offline
    Noir Never forget who i am !
    j'ai un petit problème avec un site.

    Je ne suis pas tellement adepte de Image Ready mais cette fois j'ai pas le choix.

    Je souhaite insérer un tableau dans un tableau (pour les news).

    J'ai déjà fait moi même le premier tableau pour insérer tout ce bordel à l'intérieur de ce premier (pour le centrer) mais maintenant quand je le crée, il se fout en dessous ou en haut.

    Quelqu'un peut m'aider?

    Voici le code source

    Code:
    [quote]<html>
    <head>
    <title>titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- ImageReady Preload Script (new.psd) -->
    <script type="text/javascript">
    <!--
    
    function newImage(arg) {
    	if (document.images) {
    		rslt = new Image();
    		rslt.src = arg;
    		return rslt;
    	}
    }
    
    function changeImages() {
    	if (document.images && (preloadFlag == true)) {
    		for (var i=0; i<changeImages.arguments.length; i+=2) {
    			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    		}
    	}
    }
    
    var preloadFlag = false;
    function preloadImages() {
    	if (document.images) {
    		index_01_Carte_image_02_over = newImage("images/index_01-Carte-image_02_ove.gif");
    		index_01_Carte_image_03_over = newImage("images/index_01-Carte-image_03_ove.gif");
    		index_01_Carte_image_04_over = newImage("images/index_01-Carte-image_04_ove.gif");
    		index_01_Carte_image_05_over = newImage("images/index_01-Carte-image_05_ove.gif");
    		index_01_Carte_image_06_over = newImage("images/index_01-Carte-image_06_ove.gif");
    		index_01_Carte_image_07_over = newImage("images/index_01-Carte-image_07_ove.gif");
    		index_01_Carte_image_08_over = newImage("images/index_01-Carte-image_08_ove.gif");
    		index_01_Carte_image_09_over = newImage("images/index_01-Carte-image_09_ove.gif");
    		index_01_Carte_image_10_over = newImage("images/index_01-Carte-image_10_ove.gif");
    		index_01_Carte_image_01_over = newImage("images/index_01-Carte-image_01_ove.gif");
    		preloadFlag = true;
    	}
    }
    
    // -->
    </script>
    <!-- End Preload Script -->
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
    <TABLE border="1" height="768" Width="1024" align="center">
    	<TR>
    		<TD>
    
    <!-- ImageReady Slices (design2_TTBourlers.psd) -->
    <img name="index_01" src="images/index_01.gif" width="1024" height="768" border="0" alt="" usemap="#index_01_Map">
    <map name="index_01_Map">
    <area shape="rect" alt="" coords="859,502,927,526" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_10_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_10_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_10_ove.gif'); return true;">
    <area shape="rect" alt="" coords="847,466,947,493" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_09_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_09_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_09_ove.gif'); return true;">
    <area shape="rect" alt="" coords="857,435,937,462" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_08_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_08_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_08_ove.gif'); return true;">
    <area shape="rect" alt="" coords="813,402,981,428" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_07_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_07_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_07_ove.gif'); return true;">
    <area shape="rect" alt="" coords="825,369,964,393" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_06_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_06_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_06_ove.gif'); return true;">
    <area shape="rect" alt="" coords="848,331,934,364" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_05_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_05_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_05_ove.gif'); return true;">
    <area shape="rect" alt="" coords="826,304,973,328" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_04_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_04_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_04_ove.gif'); return true;">
    <area shape="rect" alt="" coords="854,272,937,297" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_03_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_03_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_03_ove.gif'); return true;">
    <area shape="rect" alt="" coords="869,241,937,266" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_02_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_02_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_02_ove.gif'); return true;">
    <area shape="rect" alt="" coords="850,212,942,239" href="#"
    	onmouseover="changeImages('index_01', 'images/index_01-Carte-image_01_ove.gif'); return true;"
    	onmouseout="changeImages('index_01', 'images/index_01.gif'); return true;"
    	onmousedown="changeImages('index_01', 'images/index_01-Carte-image_01_ove.gif'); return true;"
    	onmouseup="changeImages('index_01', 'images/index_01-Carte-image_01_ove.gif'); return true;">
    </map>
    <!-- End ImageReady Slices -->
    
    		</TD>
    	</TR>
    </TABLE>
    </body>
    </html>
    [/quote]
    Noir, 28 Avril 2005
    #1
  2. Offline
    [L56] Elite
    Salut,

    Y'a un truc que je capte pas dans ta démarche :

    Tu as une image dans ton tableau, donc c'est assez logique que le tableau que tu veux y imbiquer se mette en dessous ou au dessus de l'image, donc l'image qui est dans ton tableau, tu devrais plutôt les mettre en background du tableau.

    Maintenant, j'ai peut être pas compris ce que tu voulais, tu veux peut être dire que le nouveau tableau se met en dessous ou au dessus du 1er tableau?

    Un petit conseil, essaye les css pour ton centrage :
    par exemple :

    #container {
    position:absolute;
    height:420px;
    width:760px;
    border:2px solid #FFFFFF;
    margin-left:-380px;
    margin-top:-210px;
    left:50%;
    top:50%;
    background-color:proud:666666;
    }

    [L56]
    [L56], 28 Avril 2005
    #2
  3. Offline
    II phl II Touriste
    II phl II, 28 Avril 2005
    #3
  4. Offline
    Noir Never forget who i am !
    ... tu parles de quoi :?: parce que ça ne me concerne pas.

    Pour répondre à L56,

    Le centrage n'est pas mon probleme, ce que je veux c'est insérer un tableau dans mon tableau et par la suite le positionner ou je veux.

    J'ai regardé dans le code mais rien n'y fait, je sais comment faire en règle général mais comme j'ai utilisé Image Ready, vu tout ce qu'il m'a pondu, je suis un perdu.
    Noir, 29 Avril 2005
    #4
  5. Offline
    [L56] Elite
    En effets, j'ai regardé le code d'image Ready, et je me suis enfuit en hurlant...(moi, j'utilise Firework)

    Mais le problème c'est que Image Ready t'à insérer une image ainsi qu'un espace réservé, donc tu me pourras jamais mettre un tableau par dessus tout ça.

    Tout ce que tu pourras éventuellement insérer, c'est un layer.

    Evidement je ne sais pas de quoi tu part comme image donc j'ai du mal a émettre un avis sur ce que tu fais, mais je suis assez perplexe : une grande image avec des zone map dessus...???

    Je pense que tu devrais organiser toute tes tranches, c-a-d tout découper puis exporter dans un dreamweaver ou golive ou ...(comme tu le sens...).Tu DOIS découper tes bouton surtout si tu veux faire des rollOvers. Et pour la partie où tu veux ré imbriquer ton tableau, tu vires l'image qui est dans la cellule, tu la remets en arrière plan de la cellule, et tu pourras ainsi placer ton tableau news...

    Autre chose : ton tableau principale mesure 1024X768 => BAD IDEA!!! (Sauf si c'est voulu, alors j'ai rien dit...:roll: ).

    Si tu veux travaillé en 1024X768, tu dois faire un tab général de 955X600, car faut pas oublié que les browser bouffe de la place dans ton écran (barre titre, barre url, ...) et qu'un trop grand tableau te donnera des ascenseur vertical (c'est pas le plus grave) mais aussi un ascenseur horizontale (ça, c'est la CATA!!!, bonjour l'ergonomie)

    En ce qui concerne Alsacreation, c'est juste un conseil que l'on te donne, car les tableau ce sera bientôt obsolète, c'est pas pour demain, mais c'est pour bientot. Tu a bien plus de controle avec les CSS2. (moi qui suis tres loin d'être un Dieu des CSS, j'ai totalement abandonné les tableau et je fais des mise en page total en CSS...c'est bien plus souple)

    Question :

    l'image de fond de ton tableau, c'est tin interface en fait?

    [L56]
    [L56], 29 Avril 2005
    #5
  6. Offline
    Noir Never forget who i am !
    Tableau obligé, les images découpés c'est fait vu que Image Ready fait ça comme un grand ... tout est découpé et c'est lui même qui a fait le travail pour le mettre en fichier html.

    Bref ce que je veux c'est insérer un tableau comme ceci (image vite fait dans paint)

    [IMG]

    Pour le 1024 c'est voulu aussi mais je vais voir pour 955*600. C'est pas moi qui veut, c'est le client ;)

    Toute l'image est mon interface.
    Noir, 29 Avril 2005
    #6
  7. Offline
    [L56] Elite
    Je suis pas un pro de Image Ready..et je ne sais pas si tu pourrais faire cela avec image ready, j'en suis pas sûre du tout.

    Moi à ta place, je replace le code dans un editeur HTML, ou dans le bloc note, je vire l'image qui se trouve dans la cellule, je replace cette image en background de la cellule et j'imbrique un tableau :

    voila un exemple, un tab de 3 lignes et 3 colones, ou il se passe ce que tu cherche dans la 1er cellule en haut a gauche :

    Code:
    <table width="200" border="1">
      <tr>
        <td background="images/bandeau.jpg">
          <table width="200" border="1">
            <tr>
              <td>le news ici</td>
            </tr>
          </table></td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    Voilà, si tu as des questions, n'hésite pas...

    [L56]
    [L56], 29 Avril 2005
    #7
  8. Offline
    Noir Never forget who i am !
    Oui c'est comme ça que je procède d'habitude mais avec image ready c'est pas évident! C'est pas grave, je vais avoir l'aide de mon prof qui sait comment s'y prendre. Merci quand même de l'aide.

    Au passage si quelqu'un à la solution, qu'il n'hésite pas ;)
    Noir, 29 Avril 2005
    #8
  9. Offline
    [L56] Elite
    je ne vois pas comment mettre une tranche dans une tranche, mais si ton prof a une soluce...

    je pense que Image ready dois fonctionnerx comme Firework au niveau des tableau, donc qu'il ne crée qu'un seul tableau avec plein de cellules (sauf si je me trompe...).

    Il faut toujours essayer de faire la découpe la plus propre possible, (que les lignes coïncide) puis après si tu as des imbrications de table, tu passes dans dreamweaver (ou autre), et tu construits...


    [L56]
    [L56], 29 Avril 2005
    #9
  10. Offline
    Noir Never forget who i am !
    Oui je sais mais comme Image Ready fait la decoupe lui même c'est plus difficile de comprendre ce qui est coupé.

    Merci
    Noir, 29 Avril 2005
    #10
  11. Offline
    Noir Never forget who i am !
    Apparement d'après ce que j'ai entendu, il suffirait de couper soit même les boutons avec l'outil tranche et le reste, Image Ready créera des cellules en faisant les rowspan etc..

    Je vais tester ça ce soir, on verra bien.
    Noir, 30 Avril 2005
    #11
  12. Offline
    [L56] Elite
    [L56]
    [L56], 30 Avril 2005
    #12
  13. Offline
    Noir Never forget who i am !
    Désolé, je t'avais mal compris mais faut dire qu'avec Image Ready je ne savais pas trop comment procéder.

    Tu avais raison :wink:

    1000 excuses
    Noir, 30 Avril 2005
    #13
  14. Offline
    [L56] Elite
    t'inquiète, chuis passé par là avec Firework...(que je te recommande :wink: )

    [L56]
    [L56], 30 Avril 2005
    #14
Statut de la discussion:
Fermée.