Script liens avec 2 photos [Résolu]

2 liens

1 resizer d image http://www.easypict.org/

1 optimiser d image : http://tools.dynamicdrive.com/imageoptimizer

RAD

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>

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

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

Je ne connais pas toweb désolée, et je ne sais pas quels types de scripts il utilise :S

salut,

peux-tu agir sur le html ?
et les css ?

Oui, oui pas de problème je peux agir sur le HTML, css par contre je ne sais pas (je pense que oui)

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

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="http://www.commentcamarche.net/">Une &eacute;bauche d'essaim.</a>
	<a id="droite" href="http://www.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);
}

Joli travail :)

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

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

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

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

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

La seule bonne solution c'est celle qui nous convient le mieux :)

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+

ajoute la propriété align="center" a ta table:
<table align="center" ></table>

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

Merci ça marche impec'

<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