Afficher une image avec JavaScript [Résolu/Fermé]

Signaler
-
 hussein -
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 !
A voir également:

2 réponses

Messages postés
405
Date d'inscription
lundi 24 mars 2008
Statut
Membre
Dernière intervention
22 janvier 2013
44
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  
    };  
Merci d'avoir répondu aussi vite matthoffman !
Le problème maintenant c'est que mon script ne s'exécute plus, mon image s'ouvre normalement
Messages postés
405
Date d'inscription
lundi 24 mars 2008
Statut
Membre
Dernière intervention
22 janvier 2013
44
Evidemment, j'ai fait une faute lol:

document.getElementById('id_block') 

Enleve le "s" a Elements ^^

NB: Si tu es sous Firefox, utilise la console d'erreur quand tu travailles avec du JS, ca permet de voir les erreurs stupides dans ce genre :p
Ca marche impec', merci beaucoup ! Et merci du conseil aussi
salut ça marche bien mais et pour plusieurs images ? merci bien de répondre
salut ça marche bien mais et pour plusieurs images ? merci bien de répondre !