Texte sous photo
Résolu/Fermé
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
-
8 mars 2012 à 14:50
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 9 mars 2012 à 08:49
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 9 mars 2012 à 08:49
A voir également:
- Texte sous photo
- Traduction photo gratuit - Guide
- Photo de profil - Guide
- Partage photo - Guide
- Photo aérienne de ma maison - Guide
- Photo filtre gratuit - Télécharger - Retouche d'image
12 réponses
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 16:57
8 mars 2012 à 16:57
Bonjour,
Vous vous êtes mis au javascript sans passer par le css ? o__O
Ou sinon vous avez appris le html sans le css ? O__o
Vous vous êtes mis au javascript sans passer par le css ? o__O
Ou sinon vous avez appris le html sans le css ? O__o
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 17:05
8 mars 2012 à 17:05
OUPS...
Mon code CSS:
html {
margin:0;
padding:0;
background: url(Images/bg2.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
}
a{
text-decoration:underline;
color:#BF2F68;
}
#header{
width:980px;
height:109px;
margin:auto;
background:url(images/top_menu_bg.png) no-repeat center;behavior: url(iepngfix.htc);
}
.logo{
padding:15px 0 0 0;
float:left;
}
/*---------------- menu tab----------------------*/
#menu_tab{
width:1030px;
float:left;
padding:15px;
}
ul.menu {
list-style-type:none; display:block; width:630px;
margin: auto; padding:65px 60px 0 0; background:none;}
ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:28px;}
ul.menu li.divider {
display:block;
float:left;
width:1px;
height:31px;
padding:0px ;
margin:0px;
}
a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}
a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #BF2F68;}
a.nav:hover {
color: #BF2F68; text-decoration:none;}
/*----------------main_content----------------*/
#main_content{
width:902px;
clear:both;
background-color:transparent;
height:50px;
margin:20px 0 0 0;
padding:3px 0 0 250px;
}
#center_content{
width:902px;
float:left;
height:500px;
padding:10px 0 30px 100px;
}
.title{
clear:both;
padding:5px 0 10px 0;
color:#FFFFFF;
}
.title a{
color:#DF6195;
text-decoration:underline;
}
/*---------------------pagination-----------------------------*/
div.pagination {
padding:5px;
margin:5px;
text-align:center;
float:left;
font-size:10px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #d8325d;
}
div.pagination a:hover, div.pagination a:active {
border:1px solid #ddd;
color: #fff;
background-color: #d8325d;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
font-weight: bold;
background-color: #d8325d;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
color: #ccc;
}
/*----footer---------*/
#footer{
width:auto;
clear:both;
padding:725px 0 10px 325px;
margin:10px 0 0 0;
height:15px;
text-align:center;
font-size:16px;
color:#a6f2a4;
}
.center_footer{
float:left;
padding:10px 0 0 100px;
}
Mon code CSS:
html {
margin:0;
padding:0;
background: url(Images/bg2.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
}
a{
text-decoration:underline;
color:#BF2F68;
}
#header{
width:980px;
height:109px;
margin:auto;
background:url(images/top_menu_bg.png) no-repeat center;behavior: url(iepngfix.htc);
}
.logo{
padding:15px 0 0 0;
float:left;
}
/*---------------- menu tab----------------------*/
#menu_tab{
width:1030px;
float:left;
padding:15px;
}
ul.menu {
list-style-type:none; display:block; width:630px;
margin: auto; padding:65px 60px 0 0; background:none;}
ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:28px;}
ul.menu li.divider {
display:block;
float:left;
width:1px;
height:31px;
padding:0px ;
margin:0px;
}
a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}
a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #BF2F68;}
a.nav:hover {
color: #BF2F68; text-decoration:none;}
/*----------------main_content----------------*/
#main_content{
width:902px;
clear:both;
background-color:transparent;
height:50px;
margin:20px 0 0 0;
padding:3px 0 0 250px;
}
#center_content{
width:902px;
float:left;
height:500px;
padding:10px 0 30px 100px;
}
.title{
clear:both;
padding:5px 0 10px 0;
color:#FFFFFF;
}
.title a{
color:#DF6195;
text-decoration:underline;
}
/*---------------------pagination-----------------------------*/
div.pagination {
padding:5px;
margin:5px;
text-align:center;
float:left;
font-size:10px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #d8325d;
}
div.pagination a:hover, div.pagination a:active {
border:1px solid #ddd;
color: #fff;
background-color: #d8325d;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
font-weight: bold;
background-color: #d8325d;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
color: #ccc;
}
/*----footer---------*/
#footer{
width:auto;
clear:both;
padding:725px 0 10px 325px;
margin:10px 0 0 0;
height:15px;
text-align:center;
font-size:16px;
color:#a6f2a4;
}
.center_footer{
float:left;
padding:10px 0 0 100px;
}
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 17:08
8 mars 2012 à 17:08
Ce n'était pas la peine de me mettre le code, c'était juste que je croyais que tu ne connaissais pas le css. Mais alors, quel est le problème ? Mettre le texte en gras et le centrer ?
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 17:19
8 mars 2012 à 17:19
Je souhaite mettre un texte en gras et centrer sous la photo principale de ma galerie.
Ce texte correspondra au prénom de la personne qui est sur la photo.
J'arrive à mettre un texte sous la photo principale, mais je ne sais pas mettre le texte correspondant à la photo qui est affiché, car en cliquant sur une miniature, la photo principale change.
Il faudrait que le texte soit en relation avec la photo, sinon cela ne sert à rien.
Ce n'est pas un titre statique que je veux...
Ce texte correspondra au prénom de la personne qui est sur la photo.
J'arrive à mettre un texte sous la photo principale, mais je ne sais pas mettre le texte correspondant à la photo qui est affiché, car en cliquant sur une miniature, la photo principale change.
Il faudrait que le texte soit en relation avec la photo, sinon cela ne sert à rien.
Ce n'est pas un titre statique que je veux...
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 17:26
8 mars 2012 à 17:26
D'accord, ce n'est pas un problème de css, ok. Alors oui, je vois ce que tu veux faire. As-tu un endroit qui lie ta photo et ton texte ? (une base de données ou un tableau quelconque)
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 17:34
8 mars 2012 à 17:34
mon tableau est dans le code html:
Rien ne lie le texte à l'image puisque je ne sais pas comment le faire.
<table width=700 border=0 cellspacing=21 cellpadding=0 align="center">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<div class="z"> </div>
<tr>
<td colspan=7 align=center><img name="mainpic" src="Images/1.jpg" width=755 height=570 border=0></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><a href="javascript:doPic('Images/1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/2.jpg');"><img src="Images/2.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/3.jpg');"><img src="Images/3.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/4.jpg');"><img src="Images/4.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/5.jpg');"><img src="Images/5.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/6.jpg');"><img src="Images/6.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/7.jpg');"><img src="Images/7.jpg" width=90 height=60 border=0></a></td>
</tr>
</table>
Rien ne lie le texte à l'image puisque je ne sais pas comment le faire.
<table width=700 border=0 cellspacing=21 cellpadding=0 align="center">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<div class="z"> </div>
<tr>
<td colspan=7 align=center><img name="mainpic" src="Images/1.jpg" width=755 height=570 border=0></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><a href="javascript:doPic('Images/1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/2.jpg');"><img src="Images/2.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/3.jpg');"><img src="Images/3.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/4.jpg');"><img src="Images/4.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/5.jpg');"><img src="Images/5.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/6.jpg');"><img src="Images/6.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('Images/7.jpg');"><img src="Images/7.jpg" width=90 height=60 border=0></a></td>
</tr>
</table>
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 17:55
8 mars 2012 à 17:55
Il faudra pourtant les lier d'une quelconque manière.
Tu peux faire quelque chose comme ça :
En HTML
En JS
Tu peux faire quelque chose comme ça :
En HTML
// L'image principale // J'ai rajouté un span avec un id pour qu'on puisse récupérer facilement sa position dans la page // Il faudra faire une classe en css pour mettre le texte centré et en gras <td colspan=7 align=center> <img name="mainpic" src="Images/1.jpg" width=755 height=570 border=0><br /> <span class="text_centre_gras" id="legende"></span> </td>
// Les miniatures // Un span invisible avec un id pour qu'on puisse le récupérer sans problème // J'ai factorisé ton paramètre pour doPic comme ça je peux le récupérer pour l'id de mon span <td> <a href="javascript:doPic('1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a> <span id="1.jpg" style="visibility:hidden">Texte</span> </td>
En JS
// On retrouve la factorisation dans imgOn // On récupère ce qu'il y a à l'intérieur d'id avec innerHTML function doPic(imgName) { if (ns3up || ie4up) { imgOn = ("Image/" + imgName); document.mainpic.src = imgOn; document.getElementById("legende").innerHTML = document.getElementById(imgName).inerHTML; } }
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 18:13
8 mars 2012 à 18:13
C'est super gentil de m'avoir répondu si rapidement, mais je suis désolé de ne pas tout comprendre (je débute) GRRRRRRR...lol
Je vais essayer quand même, car c'est en faisant qu'on apprend...
Je te tiens au courant...
Merci
Je vais essayer quand même, car c'est en faisant qu'on apprend...
Je te tiens au courant...
Merci
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 18:20
8 mars 2012 à 18:20
J'ai mis des commentaires, mais si quelque chose t'échappe, n'hésite pas à demander =)
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
Modifié par valttt le 8/03/2012 à 18:31
Modifié par valttt le 8/03/2012 à 18:31
Pour commencer::
J'ai du modifier: <a href="javascript:doPic('1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="1.jpg" style="visibility:hidden">Texte</span>
</td>
en
<a href="javascript:doPic('Images/1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="1.jpg" style="visibility:hidden">TOTO</span>
</td>
pour que la galerie soit opérationnelle, sinon les miniatures ne pointait sur rien.
Ensuite, je ne sais pas comment et ou faire la modif du CSS (// Il faudra faire une classe en css pour mettre le texte centré et en gras)
Merci
J'ai du modifier: <a href="javascript:doPic('1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="1.jpg" style="visibility:hidden">Texte</span>
</td>
en
<a href="javascript:doPic('Images/1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="1.jpg" style="visibility:hidden">TOTO</span>
</td>
pour que la galerie soit opérationnelle, sinon les miniatures ne pointait sur rien.
Ensuite, je ne sais pas comment et ou faire la modif du CSS (// Il faudra faire une classe en css pour mettre le texte centré et en gras)
Merci
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 18:39
8 mars 2012 à 18:39
ah bon ? Mais j'avais changé le js pour qu'il rajoute le "Images/" ... Bon alors il va falloir changer le span id="1" tout court et tu devras appeler ta fonction comme ceci : doPic('Images/1.jpg', 1)
Et en JS, ta fonction devient :
Et en JS, ta fonction devient :
// On rajoute un argument à ta fonction function doPic(imgName, text) { if (ns3up || ie4up) { imgOn = ("Image/" + imgName); document.mainpic.src = imgOn; document.getElementById("legende").innerHTML = document.getElementById(text).inerHTML; } }
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
Modifié par AssassinTourist le 8/03/2012 à 18:42
Modifié par AssassinTourist le 8/03/2012 à 18:42
J'ai rajouté en-dessous de ton image principale ceci :
(avec un nom de class génialissime bien sûr...)
Là où tu as ton css, tu rajouteras simplement ta classe :
<span class="text_centre_gras" id="legende"></span>
(avec un nom de class génialissime bien sûr...)
Là où tu as ton css, tu rajouteras simplement ta classe :
.text_centre_gras{ /* le css que tu veux appliquer à ce texte */ }
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 18:45
8 mars 2012 à 18:45
Excuse moi, mais tu vas me prendre pour un bourrin, mais yais rin compris lol...
Bref, c'est quoi le js, c'est un code que je dois mettre quelque part, ou c'est un fichier .js que je dois créer ?
Bref, c'est quoi le js, c'est un code que je dois mettre quelque part, ou c'est un fichier .js que je dois créer ?
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 19:00
8 mars 2012 à 19:00
Pas de problème =)
Le js, c'est l'abréviation de javascript, pardon. C'est le langage que tu mets entre tes balises <SCRIPT LANGUAGE="JavaScript"> </SCRIPT>
Le js, c'est l'abréviation de javascript, pardon. C'est le langage que tu mets entre tes balises <SCRIPT LANGUAGE="JavaScript"> </SCRIPT>
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 19:06
8 mars 2012 à 19:06
Merci, je vais faire une pose, car j'y suis depuis ce matin, je commence à fatiguer..
Je te tiens au courant de la suite...
Merci encore
Je te tiens au courant de la suite...
Merci encore
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
Modifié par valttt le 8/03/2012 à 19:48
Modifié par valttt le 8/03/2012 à 19:48
Bon, j'ai ré-modifier comme tu me l'a dit la première fois:
Résultat: Ma galerie ne fonctionne plus et j'ai le texte "Undefined" sous la photo principale avec la police et la couleur que j'ai choisi.
Voila mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="JMBerthier - Galerie Photo XHTML" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Autour de la Guitare</title>
<link rel="stylesheet" type="text/css" href="photo.css" />
<SCRIPT LANGUAGE="JavaScript">
// On retrouve la factorisation dans imgOn
// On récupère ce qu'il y a à l'intérieur d'id avec innerHTML
function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("Image/" + imgName);
document.mainpic.src = imgOn;
document.getElementById("legende").innerHTML = document.getElementById(imgName).inerHTML;
}
}
</script>
</HEAD>
<div id="header">
<div id="menu_tab">
<ul class="menu">
<li class="divider"></li>
<li><a href="accueil.html" class="nav"> Accueil </a></li>
<li><a href="photo.html" class="nav_selected"> Photos_Videos </a></li>
<li><a href="agenda.html" class="nav"> Agenda </a></li>
<li><a href="forum" class="nav"> Forum </a></li>
<li><a href="espace" class="nav"> Espace Membres </a></li>
<li><a href="contact.html" class="nav"> Contact </a></li>
</ul>
</div>
</div>
<table width=700 border=0 cellspacing=21 cellpadding=0 align="center">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<div class="z"> </div>
<tr>
<td colspan=7 align=center>
<img name="mainpic" src="Images/1.jpg" width=755 height=570 border=0><br />
<span class="text_centre_gras" id="legende"></span>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<a href="javascript:doPic('1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="1.jpg" style="visibility:hidden">TOTO</span>
</td>
<td>
<a href="javascript:doPic('2.jpg');"><img src="Images/2.jpg" width=90 height=60 border=0></a>
<span id="2.jpg" style="visibility:hidden">TITI</span>
</td>
<td>
<a href="javascript:doPic('3.jpg');"><img src="Images/3.jpg" width=90 height=60 border=0></a>
<span id="3.jpg" style="visibility:hidden">TUTU</span>
</td>
<td>
<a href="javascript:doPic('4.jpg');"><img src="Images/4.jpg" width=90 height=60 border=0></a>
<span id="4.jpg" style="visibility:hidden">TETE</span>
</td>
<td>
<a href="javascript:doPic('5.jpg');"><img src="Images/5.jpg" width=90 height=60 border=0></a>
<span id=".jpg" style="visibility:hidden">TATA</span>
</td>
<td>
<a href="javascript:doPic('6.jpg');"><img src="Images/6.jpg" width=90 height=60 border=0></a>
<span id="Images/6.jpg" style="visibility:hidden">TOUTOU</span>
</td>
<td>
<a href="javascript:doPic('7.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="7.jpg" style="visibility:hidden">TAUTAU</span>
</td>
</tr>
</table>
</html>
Résultat: Ma galerie ne fonctionne plus et j'ai le texte "Undefined" sous la photo principale avec la police et la couleur que j'ai choisi.
Voila mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="JMBerthier - Galerie Photo XHTML" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Autour de la Guitare</title>
<link rel="stylesheet" type="text/css" href="photo.css" />
<SCRIPT LANGUAGE="JavaScript">
// On retrouve la factorisation dans imgOn
// On récupère ce qu'il y a à l'intérieur d'id avec innerHTML
function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("Image/" + imgName);
document.mainpic.src = imgOn;
document.getElementById("legende").innerHTML = document.getElementById(imgName).inerHTML;
}
}
</script>
</HEAD>
<div id="header">
<div id="menu_tab">
<ul class="menu">
<li class="divider"></li>
<li><a href="accueil.html" class="nav"> Accueil </a></li>
<li><a href="photo.html" class="nav_selected"> Photos_Videos </a></li>
<li><a href="agenda.html" class="nav"> Agenda </a></li>
<li><a href="forum" class="nav"> Forum </a></li>
<li><a href="espace" class="nav"> Espace Membres </a></li>
<li><a href="contact.html" class="nav"> Contact </a></li>
</ul>
</div>
</div>
<table width=700 border=0 cellspacing=21 cellpadding=0 align="center">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<div class="z"> </div>
<tr>
<td colspan=7 align=center>
<img name="mainpic" src="Images/1.jpg" width=755 height=570 border=0><br />
<span class="text_centre_gras" id="legende"></span>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<a href="javascript:doPic('1.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="1.jpg" style="visibility:hidden">TOTO</span>
</td>
<td>
<a href="javascript:doPic('2.jpg');"><img src="Images/2.jpg" width=90 height=60 border=0></a>
<span id="2.jpg" style="visibility:hidden">TITI</span>
</td>
<td>
<a href="javascript:doPic('3.jpg');"><img src="Images/3.jpg" width=90 height=60 border=0></a>
<span id="3.jpg" style="visibility:hidden">TUTU</span>
</td>
<td>
<a href="javascript:doPic('4.jpg');"><img src="Images/4.jpg" width=90 height=60 border=0></a>
<span id="4.jpg" style="visibility:hidden">TETE</span>
</td>
<td>
<a href="javascript:doPic('5.jpg');"><img src="Images/5.jpg" width=90 height=60 border=0></a>
<span id=".jpg" style="visibility:hidden">TATA</span>
</td>
<td>
<a href="javascript:doPic('6.jpg');"><img src="Images/6.jpg" width=90 height=60 border=0></a>
<span id="Images/6.jpg" style="visibility:hidden">TOUTOU</span>
</td>
<td>
<a href="javascript:doPic('7.jpg');"><img src="Images/1.jpg" width=90 height=60 border=0></a>
<span id="7.jpg" style="visibility:hidden">TAUTAU</span>
</td>
</tr>
</table>
</html>
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 21:26
8 mars 2012 à 21:26
Tu n'as pas changé tout ce que je t'ai dit de changer et j'avais fait quelques erreurs ;) J'ai pu tester chez moi ce code et il fonctionne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="JMBerthier - Galerie Photo XHTML" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Autour de la Guitare</title> <link rel="stylesheet" type="text/css" href="test.css" /> <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName, text) { browserName = navigator.appName; browserVer = parseInt(navigator.appVersion); ns3up = (browserName == "Netscape" && browserVer >= 3); ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4); if (ns3up || ie4up) { imgOn = ("Images/" + imgName); document.mainpic.src = imgOn; document.getElementById("legende").innerHTML = document.getElementById(text).value; } } </script> </HEAD> <div id="header"> <div id="menu_tab"> <ul class="menu"> <li class="divider"></li> <li><a href="accueil.html" class="nav"> Accueil </a></li> <li><a href="photo.html" class="nav_selected"> Photos_Videos </a></li> <li><a href="agenda.html" class="nav"> Agenda </a></li> <li><a href="forum" class="nav"> Forum </a></li> <li><a href="espace" class="nav"> Espace Membres </a></li> <li><a href="contact.html" class="nav"> Contact </a></li> </ul> </div> </div> <table width=700 border=0 cellspacing=21 cellpadding=0 align="center"> <tr><td> </td></tr> <tr><td> </td></tr> <tr><td> </td></tr> <tr><td> </td></tr> <div class="z"> </div> <tr> <td colspan=7 align=center> <img name="mainpic" src="Images/test1.png" width=755 height=570 border=0><br /> <span class="text_centre_gras" id="legende"></span> </td> </tr> <tr><td> </td></tr> <tr> <td> <a href="javascript:doPic('test1.png', 1);"><img src="Images/test1.png" width=90 height=60 border=0></a> <input type="hidden" value="TOTO" id="1" /> </td> <td> <a href="javascript:doPic('test2.png', 2);"><img src="Images/test2.png" width=90 height=60 border=0></a> <input type="hidden" value="TITI" id="2" /> </td> </tr> </table> </html>
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 21:29
8 mars 2012 à 21:29
j'ai quand même factorisé le dossier où se trouve toutes les images (il manquait simplement un "s" pour l'appel dans le javascript)
il faut rajouter un paramètre dans la fonction quand on la déclare et quand on l'appelle !
J'ai changé les span id en input hidden finalement, c'est bien mieux (et plus propre)
J'ai mis mes valeurs (test1.png) à toi de mettre les tiennes
Mon tableau n'a que deux colonnes parce que j'avais la flemme.
il faut rajouter un paramètre dans la fonction quand on la déclare et quand on l'appelle !
J'ai changé les span id en input hidden finalement, c'est bien mieux (et plus propre)
J'ai mis mes valeurs (test1.png) à toi de mettre les tiennes
Mon tableau n'a que deux colonnes parce que j'avais la flemme.
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 21:42
8 mars 2012 à 21:42
COOLLLLLLLLLLLLLLLLLLLLLL, MECIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Petit bémol, lorsque l'on ouvre la page, il faut cliquer sur la première image miniature pour pouvoir voir le texte.
Une fois les images vu une après l'autre, tout va bien...
Petit bémol, lorsque l'on ouvre la page, il faut cliquer sur la première image miniature pour pouvoir voir le texte.
Une fois les images vu une après l'autre, tout va bien...
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
8 mars 2012 à 22:08
8 mars 2012 à 22:08
Ca, c'est parce que je n'ai rien mis dans le span de legende
Mets ta valeur par défault
Mets ta valeur par défault
<span class="text_centre_gras" id="legende">TOTO</span>
valttt
Messages postés
269
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
31 janvier 2024
15
8 mars 2012 à 22:28
8 mars 2012 à 22:28
Et ben depuis tout à l'heure, je suis en train de me prendre la tête pour créer une image 0.png transparente que j'aurai appelé dans <td colspan=7 align=center>
<img name="mainpic" src="Images/0.png" width=755 height=570 border=0><br /> pour être obligé de clique sur la première miniature pour afficher les images avec leur texte respectif...
MDRRRRRRRRR
Le pire c'est que j'avais déjà essayé cet après midi de le faire et j'avais oublié la manip...
Maintenant que c'est opérationnel, je vais m'efforcer de comprendre les codes que tu m'a donné pour en tiré un apprentissage qui est loin d'être négligeable.
Encore merci et "CHAPEAU" pour ton boulot !!!
<img name="mainpic" src="Images/0.png" width=755 height=570 border=0><br /> pour être obligé de clique sur la première miniature pour afficher les images avec leur texte respectif...
MDRRRRRRRRR
Le pire c'est que j'avais déjà essayé cet après midi de le faire et j'avais oublié la manip...
Maintenant que c'est opérationnel, je vais m'efforcer de comprendre les codes que tu m'a donné pour en tiré un apprentissage qui est loin d'être négligeable.
Encore merci et "CHAPEAU" pour ton boulot !!!
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
9 mars 2012 à 08:49
9 mars 2012 à 08:49
De rien et content que tu aies résolu ton problème =)