Membre
|
Bonsoir,
il y a une possibilité de cibler un élément qui ce trouve dans une autre balise en javascript?
Je voudrais ciblé a qui ce trouve dans un p, c'est pour mes images qui s'agrandissent quand on clic dessus. le prblème est que tout fonction normalement, mais quand je clic aussi sur mes liens il ce passe la chose que quand je clic sur les image...
code: HTML
<p>
<a href="imgs/1.jpg" title="Afficher l'image originale"><img src="imgs/1_min.jpg" alt="Miniature" /></a>
<a href="imgs/2.jpg" title="Afficher l'image originale"><img src="imgs/2_min.jpg" alt="Miniature" /></a>
<a href="imgs/3.jpg" title="Afficher l'image originale"><img src="imgs/3_min.jpg" alt="Miniature" /></a>
<a href="imgs/4.jpg" title="Afficher l'image originale"><img src="imgs/4_min.jpg" alt="Miniature" /></a>
</p>
code: CSS
#overlay {
display : none; /* Par défaut, on cache l'overlay */
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
text-align: center; /* Pour centrer l'image que l'overlay contiendra */
/* Ci-dessous, nous appliquons un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */
background-color: rgba(0,0,0,0.6);
}
#overlay img {
margin-top: 100px;
}
p {
text-align: center;
}
code: JAVASCRIPT
var links = document.getElementsByTagName('a'),
linksLen = links.length;
for (var i = 0 ; i < linksLen ; i++) {
links[i].onclick = function() { // Vous pouvez très bien utiliser le DOM-2
displayImg(this); // On appelle notre fonction pour afficher les images
return false; // Et on bloque la redirection
};
}
function displayImg(link) {
var img = new Image(),
overlay = document.getElementById('overlay');
img.onload = function() {
overlay.innerHTML = '';
overlay.appendChild(img);
};
img.src = link.href;
overlay.style.display = 'block';
overlay.innerHTML = '<span>Chargement en cours...</span>';
}
document.getElementById('overlay').onclick = function() {
this.style.display = 'none';
};
Merci
|
