Afficher une image avec JavaScript

Résolu/Fermé
Flo - 19 déc. 2011 à 16:19
 hussein - 16 févr. 2013 à 13:08
Bonjour,

Sur une page.php, j'affiche une image, grâce à un script créé par le Site du Zéro.
Ce script permet d'afficher une image à partir d'un clic sur un lien sans passer par l'emplacement où se trouve l'image sur le DD (on affiche directement l'image sur la page web ou se trouve le lien).
On permet ceci en bloquant la redirection du lien.

Le problème est que l'exécution de ce script bloque TOUS les liens de la page web !

Voici le code du script :

var links = document.getElementsByTagName('a'),
    linksLen = links.length;

for (var i = 0 ; i < linksLen ; i++) {

    links[i].onclick = function() {
        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';
};


Et voici le code de ma page web :

<ul id="bouton">
	<li> <a href="acceuil.php?visited=acceuil"> Acceuil </a>| </li>
	<li> <a href="cv.php?visited=cv"> CV </a>| </li>
	<li> <a href="creations.php?visited=creations"> Mes créations </a>| </li>
	<li> <a href="contact.php?visited=contact"> Contact </a> </li>
</ul>
<div id="bloc_cv">
	<p>Vous pouvez consulter mon CV en ligne en cliquant 
        <a href="images/CV25.jpg">ici</a>.</p>
	<div id="overlay"></div>
	<script src="cv.js"></script>
	</div>
</div>


Je ne souhaite bloquer la redirection que du lien qui est en gras. Que dois-je modifier dans mon script ?

Merci d'avance pour vos réponses !

2 réponses

matthoffman Messages postés 405 Date d'inscription lundi 24 mars 2008 Statut Membre Dernière intervention 22 janvier 2013 47
Modifié par matthoffman le 19/12/2011 à 16:27
Tu rajoutes un id a ton lien
<a id="id_block" href="images/CV25.jpg">ici</a>.</p>


Tu me vires tout ca

var links = document.getElementsByTagName('a'),  
    linksLen = links.length;  

for (var i = 0 ; i < linksLen ; i++) {  

    links[i].onclick = function() {  
        displayImg(this); // On appelle notre fonction pour afficher les images  
        return false; // Et on bloque la redirection  
    };  

}  


Et tu le remplaces par ca:

document.getElementsById('id_block').onclick = function() {  
        displayImg(this); // On appelle notre fonction pour afficher les images  
        return false; // Et on bloque la redirection  
    };  
2