texte sous une image agrandie - HTML/CSS - Programmation
MarshPosté le 16-03-2014 à 11:09:49
Bonjour
je cherche depuis plusieurs jour pour ma galerie de photos, a mettre un titre sous une image qui est agrandie avec la fonction "onclick". Avec les css, j'ai réussi a mettre un cadre et un fond sur la photo agrandie, mais je n'arrive pas a intégrer sont titre. Est-il possible d'intégrer dans les code javascript une fonction qui associe l'agrandissement de la photo est sont titre. voici mon code <div id="grdgalerie"></div> <p1> <ul class="gal"> <a href="photos_galerie_web/grandes_vignettes/champs_en_fleur.jpg"height="450" width="760" title="Afficher l'image originale"><img src="photos_galerie_web/petites_vignettes/champs_en_fleur.jpg" height="160" width="260" alt="miniature"/></a><span>Champs en fleurs</span> <script> var links = document.getElementsByTagName('a') linksLen = links.length; for (var i = 0 ; i < linksLen ; i++) { links[i].onclick = function() { displayImg(this); return false; }; } function displayImg(link) { var img = new Image(), grdgalerie = document.getElementById('grdgalerie'); img.onload = function() { grdgalerie .innerHTML = ''; grdgalerie .appendChild(img) }; img.src = link.href; grdgalerie .style.display = 'block'; grdgalerie .innerHTML = '<span>Chargement en cours...</span>'; document.getElementById('grdgalerie').onclick = function() { this.style.display = 'none'; }; </script>
Marsh Posté le 16-03-2014 à 11:09:49
Bonjour
je cherche depuis plusieurs jour pour ma galerie de photos, a mettre un titre sous une image qui est agrandie avec la fonction "onclick".
Avec les css, j'ai réussi a mettre un cadre et un fond sur la photo agrandie, mais je n'arrive pas a intégrer sont titre.
Est-il possible d'intégrer dans les code javascript une fonction qui associe l'agrandissement de la photo est sont titre.
voici mon code
<div id="grdgalerie"></div>
<p1>
<ul class="gal">
<a href="photos_galerie_web/grandes_vignettes/champs_en_fleur.jpg"height="450" width="760" title="Afficher l'image originale"><img src="photos_galerie_web/petites_vignettes/champs_en_fleur.jpg" height="160" width="260" alt="miniature"/></a><span>Champs en fleurs</span>
<script>
var links = document.getElementsByTagName('a')
linksLen = links.length;
for (var i = 0 ; i < linksLen ; i++) {
links[i].onclick = function() {
displayImg(this);
return false; };
}
function displayImg(link) {
var img = new Image(),
grdgalerie = document.getElementById('grdgalerie');
img.onload = function() {
grdgalerie .innerHTML = '';
grdgalerie .appendChild(img) };
img.src = link.href;
grdgalerie .style.display = 'block';
grdgalerie .innerHTML = '<span>Chargement en cours...</span>'; document.getElementById('grdgalerie').onclick = function() {
this.style.display = 'none';
};
</script>
d'avance merci