Texte sous photo

Résolu
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   -  
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

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.
Merci d'avance pour votre aide...

Mon code html actuel:

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

<!-- Ce script et d'autres sont sur le code java GRATUIT -->
<!-- LE CODE JAVA - https://www.lecodejava.com/ -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</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></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>



</html>

A voir également:

12 réponses

Réponse 1 / 12
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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
0
Réponse 2 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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;
}
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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 ?
0
Réponse 3 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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...
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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)
0
Réponse 4 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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>
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
Il faudra pourtant les lier d'une quelconque manière.
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;
  }
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
J'ai mis des commentaires, mais si quelque chose t'échappe, n'hésite pas à demander =)
0
Réponse 6 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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 : 
// 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;
  }
}
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
J'ai rajouté en-dessous de ton image principale ceci : 
<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 */ 
}
0
Réponse 7 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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 ?
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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>
0
Réponse 8 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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
0
Réponse 9 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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>
0
Réponse 10 / 12
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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>
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
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.
0
Réponse 11 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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...
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
Ca, c'est parce que je n'ai rien mis dans le span de legende
Mets ta valeur par défault 
<span class="text_centre_gras" id="legende">TOTO</span>
0
Réponse 12 / 12
valttt Messages postés 299 Date d'inscription   Statut Membre Dernière intervention   15
 
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 !!!
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
De rien et content que tu aies résolu ton problème =)
0

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos
BourrinOman83 -
Pierr10 -

9 réponses