Script liens avec 2 photos

Résolu
Bonjour,

Pourriez-vous me dire comment puis-je mettre deux photos (avec un titre en bas à l'intérieur de chacune) côte à côte sur mon site avec un lien vers deux pages du site.

J'espère que vous pourrez me venir en aide. En effet je ne maîtrise pas trop bien le language HTML.

Merci par avance.
Configuration: Windows XP
Internet Explorer 7.0

20 réponses

  1. <table width="200" border="1" align="center">
    <tr>
    <td><a href="lien de mon site" ><img src="lien donné par l'hébergeur" border="0" </a> <br />
    Trail d'Azay-Le-Ferron</a></td>
    <td><a href="lien 2 de mon site" ><img src="lien 2 donné par l'hébergeur" border="0" </a> <br />
    Course des 2 Viaducs</a></td>
    </tr>
    </table>

    tu peut mettre plusieurs attributs pour la balise tableau, l'ordre n'a pas d'importance
    1. Je le mets où par contre le align="center"? avant ou après width="200" border="1"? Je l'insère comme ça :

      <table align="center" >
      <table width="200" border="1">
      <tr>
      <td><a href="lien de mon site" ><img src="lien donné par l'hébergeur" border="0" </a> <br />
      Trail d'Azay-Le-Ferron</a></td>
      <td><a href="lien 2 de mon site" ><img src="lien 2 donné par l'hébergeur" border="0" </a> <br />
      Course des 2 Viaducs</a></td>
      </tr>
      </table>
      </table>

      Merci pour tout
      1. Contributeur
        ajoute la propriété align="center" a ta table:
        <table align="center" ></table>
        1. Merci,

          Je verrai bien à la longue s'il faut que je me mette au css. Mais il va falloir que j'apprenne petit à petit.
          Par contre, personne pour me dire comment centrer mes photos?

          A+
          1. Contributeur
            cela fonctionne aussi , c est sur ! mais en cela vas vite transformer ta page en usine a gaz bien moins facile a gerer si tu ajoute beaucoup de photo !!
            1. Désolé Dalida,

              Mais je n'arrive pas avec le script html + CSS. Je ne dois pas faire comme il faut c'est pour cela que j'ai fait l'autre script, il me manque plus qu'à centrer et le tour sera joué.

              Merci pour vos aides respectives
              1. Contributeur
                c'est pas grave, dans une page comme la tienne mieux continuer avec les tableaux !
                en gros, il y a deux écoles : les css ou les tableaux.
                c'est un peu caricatural mais bon…

                je ne suis pas de la même école !
              2. @DalidaJe suis sure que tu as commencée avec des tableaux toi aussi :)

                Il faut un début à tout, la voie de l'apprentissage est longue, courage à tous ceux qui marchent dessus :)
              3. Contributeur
                @Dalidacertainement pas !
                j'ai commencé il y a peu avec xhtml/css, valide et autant que possible accessible. donc les tableaux non merci !
            2. Alors merci pour vos solutions et je suis assez fier de moi ;-))) car voici le résultat :
              www.leblancathletisme.fr
              (ce sont les 2 photos qui s'appellent : trail d'azay le ferron et course des 2 viaducs)

              J'ai inséré ce script grâce à votre aide :

              <table width="200" border="1">
              <tr>
              <td><a href="lien de mon site" ><img src="lien donné par l'hébergeur" border="0" </a> <br />
              Trail d'Azay-Le-Ferron</a></td>
              <td><a href="lien 2 de mon site" ><img src="lien 2 donné par l'hébergeur" border="0" </a> <br />
              Course des 2 Viaducs</a></td>
              </tr>
              </table>

              J'ai été obligé de passer par un hébergeur car sinon les photos originales prenaient une place trop importante. Y-a-t-il un moyen de mettre les photos originales mais les mettre un peu plus petites?

              Deuxième question : serait-il possible de les centrer sur ma page?

              Merci beaucoup
              1. Contributeur
                ET bien comme cela il verra comment faire !!!
                et je suis loin d etre sur qu il comprenne mieux les calques flottants !!
                la solution de la mise en forme des liens est tout de meme plus logique et bien plus simple, a mon avis !!!!
                1. Du calme :) Je charie hein ^^
              2. Joli travail :)

                Zut si il sait pas agir sur le CSS ou sur l'en-tête de sa page :S :D
                1. Contributeur
                  re,

                  ou en version accessible et conforme tu peux tout simplement mettre en forme tes liens.

                  pour ça deux <a> suffisent comme dans cet exemple. je les ai mis dans un <div> pour me faciliter le ciblage.

                  html
                  <div>
                  	<a id="gauche" href="https://www.commentcamarche.net/">Une &eacute;bauche d'essaim.</a>
                  	<a id="droite" href="https://forums.commentcamarche.net/forum/">Une belle couleuvre.</a>
                  </div>
                  

                  css
                  div a{
                  	display:block;
                  	float:left;
                  	width:240px;
                  	padding-top:180px;
                  	border:1px solid #666;
                  	background-repeat:no-repeat;
                  	background-position:top left;
                  }
                  #gauche{
                  	background-image:url(ressources/image_gauche.jpg);
                  	margin-right:1em;
                  }
                  #droite{
                  	background-image:url(ressources/image_droite.jpg);
                  }
                  
                  1. Essaye d'afficher un calque flottant au centre avec le tableaux que j'ai donné plus haut :)

                    voici le code du calque flottant :

                    <div id="accueil" style="position:absolute; left:200px; top:150px; width:100px; height: 100px; z-index:1; overflow: visible;">
                      <table width="200" border="1">
                        <tr>
                          <td><a href="image1.jpg"><img src="image1.jpg" border="0" /><br />
                            Texte1</a></td>
                          <td><a href="image2.jpg"><img src="image2.jpg" border="0" /><br />
                            Texte2</a></td>
                        </tr>
                      </table>
                    </div>


                    Pour en changer la position il te suffit de changer left: 200px; top: 150px; c'est la position par rapport au coin supérieur gauche de la page :)
                    1. Oui, oui pas de problème je peux agir sur le HTML, css par contre je ne sais pas (je pense que oui)
                      1. Je ne connais pas toweb désolée, et je ne sais pas quels types de scripts il utilise :S
                        1. Je précise enfin que mes photos ne sont pas sur mon disque dur mais chez un hébergeur donc j'ai des liens à copier.

                          Vraiment désolé de ne l'avoir dit que maintenant
                          1. Merci pour ce script mais je vais mieux m'exprimer ;-).
                            Voilà je voudrais mettre 2 photos (l'une à côté de l'autre).
                            Sur chaque photo, je veux mettre un titre en bas à l'intérieur de la photo.
                            Enfin je veux que quand on clique sur une ou l'autre des photos, on tombe sur une autre page de mon site (en fait les deux photos auraient deux liens distincts de mon site).

                            C'est un site d'athlétisme, on veut mettre sur notre page d'accueil nos deux organisations de course et quand on cliquera sur l'une ou l'autre des photos on tombe sur les détails d'organisation de chacune d'elles.

                            Je précise une dernière chose, j'utilise le logiciel toweb (pour la création de site) et je ne peux pas mettre 2 photos côte à côte mais par contre j'ai la possibilité de mettre des scripts.

                            Merci pour la rapidité de la réponse
                            1. Je n'ai pas très bien compris ce que tu voulais mais voici un exemple, rajoute ceci avant la fin de ton body ( </body> )

                              <table width="200" border="1">
                                <tr>
                                  <td><a href="image1.jpg"><img src="image1.jpg" border="0" /><br />
                                    Texte1</a></td>
                                  <td><a href="image2.jpg"><img src="image2.jpg" border="0" /><br />
                                    Texte2</a></td>
                                </tr>
                              </table>