Remplacement d'une image au clic

**Loulo8407** · 05/08/2013, 12h14

Bonjour,

J'ai une image avec un lien :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#"><img src="../img/doc2_nouveaute.png" width="70" height="16" /></a>

et je souhaiterai que quand on a cliqué sur ce lien ça affiche en permamence l'autre image pour montrer aux utilisateurs qu'ils ont déjà cliqué sur ce lien.

j'ai essayé comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
div a.lien{height:20px; width:200px; background-image:url(../img/doc2_nouveaute.gif);}
div a.lien:active{height:20px; width:200px; background-image:url(../img/doc1_nouveaute.gif);}

mais ça marche pas correctement

Merci pour votre aide

Sandra

**rodolphebrd** · 05/08/2013, 12h56

Bonjour,

je pense que vous trouverez quelque chose ici :http://www.developpez.net/forums/d13...igner-onclick/

**Loulo8407** · 06/08/2013, 10h16

Bonjour merci pour votre réponse

j'ai vu qu'avec du CSS et :hover ou :visited on pouvait arriver à changer les images après la visite d'un lien.
Mon problème est que je souhaiterai que ça garde l'image qui dit que l'on a visité le lien, même après avoir fermé son navigateur.

Quelle technique utiliser ?

Merci encore pour votre aide

Sandra

Invité · 06/08/2013, 11h03

Bonjour Sandra,

Envoyé par Loulo8407

..., même après avoir fermé son navigateur...

avec des cookies, alors ?
ou en enregistrant en base de données.

Ce serait quand même bien qu'une fois au moins, tu EXPLIQUES clairement tes besoins.

**Bovino** · 06/08/2013, 11h34

Cela fait partie des réglages du navigateur (donc des choix de l'utilisateur) de déterminer s'il faut se souvenir ou non des liens visités.
Donc soit tu te fies à ça et tu respectes le choix de l'utilisateur, soit il faudra passer par un langage de programmation (donc pas avec CSS qui est un langage de présentation des informations) pour te "souvenir" côté client (JavaScript / Web Storage ou cookies) ou côté serveur (PHP ou autre) des liens visités.

**Loulo8407** · 07/08/2013, 09h17

Bonjour,

je pense que dans mon cas le javascript serait plus approprié que le php avec base de données, Je vais essayer d'être plus clair sur mes besoins :

J'ai un affichage d'actualités sur la page d'accueil, géré par une base de données qui affiche les 5 dernières actualités.
Quand une actualité nouvelle est mise en ligne j'ai une image avec écrit "nouveauté" qui s'affiche et quand les gens ont cliqué sur le lien je souhaiterai que s'affiche une autre image, genre "Archive".

En fait je touche rarement au code et là je me trouve perdu, je ne sais pas comment m'y prendre. J'aurai aimé trouver des exemples.

Désolé si je ne suis toujours pas clair dans mes explications.

Sandra

**Loceka** · 14/08/2013, 16h57

Envoyé par Loulo8407

j'ai vu qu'avec du CSS et :hover ou :visited on pouvait arriver à changer les images après la visite d'un lien.

Pour moi, se baser uniquement sur :visited devrait suffire vu que l'information perdure même après redémarrage du navigateur et du PC (si l'utilisateur garde la configuration de base du navigateur).

**Loulo8407** · 19/08/2013, 14h56

Merci Rkellix,

Grâce à ton lien et ton message j'ai pu mieux avancer sur ma problématique.
Je ne m’attendais pas à ce que ce soit tant de travail pour, juste changer une image au clic sur un lien !!! Incroyable !!!

J'ai donc ajouté mes 2 fonctions pour créer et lire les cookies.
Ensuite j'ai ajouté le bout de code qui modifie mon image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
var x = readCookie('visite')
if (x) {
	var urlImage = "../img/doc1_nouveaute_tarifs_et_baremes.png"
	var obj = document.getElementById("imageLien").src = urlImage
}
</script>

J'en ensuite une liste d'actualités qui apparait grâce à une base de données ( voir ci-dessous) dans laquelle j'ai ajouté dans le AHREF :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="createCookie('visite', 'ok',100000)"

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 id='imageLien'

dans la balise IMG.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
echo "<ul>";
		echo "<li class=\"titre_gris_fonce\">ACTUALITES <a href='admin/actualites_accueil/toutes_les_actus.php'> (Toutes les Actualit&eacute;s)</a></li>";
		while ($list = mysql_fetch_array($result)) {
			$affiche_date_fr= explode("-", $list['date']);
			$affiche_date_annee  = ($affiche_date_fr[0]);
			$affiche_date_mois = ($affiche_date_fr[1]);
			$affiche_date_jour= ($affiche_date_fr[2]);	
			//lien
			$Lien_racine_actualites = WEBROOT."/admin/actualites_accueil/documents_pdf/".$list['lien'];
						echo '<li>';   
			echo "<img src='/img/doc2_nouveaute.png' height='16' width='70' id='imageLien' />";
					if ($list['lien']==''){echo '<span class=lien_gris_fonce>'.$list['titre']." ".$list['lieu'].'</span>'; }
 
 
					else{				
						?><span class="lien_gris_fonce"><a href="<?php echo $Lien_racine_actualites; ?>" target="_blank" onclick="createCookie('visite', 'ok',100000)" ><?php echo $list['titre']." ".$list['lieu']; ?></a></span>
						<?php 	
					}
					 echo "<span class='date_page_accueil'>($affiche_date_jour/$affiche_date_mois/$affiche_date_annee)</span><br>"; 
		echo '</li>';
	   }
 
echo '</ul>';

j'ai bien le cookie qui se crée et l'image qui se modifie (qu'au rechargement de la page :-( ) mais que sur la première ligne des mes actualités.

Comment faire SVP pour que l'image se modifie partout là où l'on clique sur un lien et que ça le garde lors de la réouverture du navigateur ?

En tout cas merci bien à toi encore une fois, j'ai déjà appris pleins de choses grâce à toi.

SANDRA

Invité · 20/08/2013, 11h09

Bonjour,

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
// Changement de l'image au chargement de la page
function loadCookieActu(id){
	if (readCookie('monsite-actu'+id)) { // lecture du cookie (s'il existe)
		document.getElementById('imageLien'+id).src = '../img/doc1_nouveaute_tarifs_et_baremes.png';
	}
}
// Création + Changement de l'image au click
function createCookieActu(id){
	// création du cookie
	var name = 'monsite-actu'+id;
	var value = 'ok'; // ok
	var days = 365; // 365 jours
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
	document.cookie = name+"="+value+expires+"; path=/";
	// changement d'image
	document.getElementById('imageLien'+id).src = '../img/doc1_nouveaute_tarifs_et_baremes.png';
}
</script>

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
echo "<ul>";
echo "	<li class=\"titre_gris_fonce\">ACTUALITES <a href='admin/actualites_accueil/toutes_les_actus.php'> (Toutes les Actualit&eacute;s)</a></li>";
while ($list = mysql_fetch_array($result)) {
	$id_actu = $list['id'];
	$affiche_date_fr = explode("-", $list['date']);
	$affiche_date_annee = ($affiche_date_fr[0]);
	$affiche_date_mois = ($affiche_date_fr[1]);
	$affiche_date_jour = ($affiche_date_fr[2]);	
	//lien
	$Lien_racine_actualites = WEBROOT."/admin/actualites_accueil/documents_pdf/".$list['lien'];
echo "	<li>";   
echo "		<img src='/img/doc2_nouveaute.png' height='16' width='70' id='imageLien".$id_actu."' />";
	if ($list['lien']==''){
echo '		<span class=lien_gris_fonce>'.$list['titre']." ".$list['lieu'].'</span>';
	} else {				
?>			<span class="lien_gris_fonce"><a href="<?php echo $Lien_racine_actualites; ?>" target="_blank" onclick="createCookieActu('<?php echo $id_actu; ?>');" ><?php echo $list['titre']." ".$list['lieu']; ?></a></span>
			<script>loadCookieActu('<?php echo $id_actu; ?>');</script>
<?php 	
	}
echo "		<span class='date_page_accueil'>($affiche_date_jour/$affiche_date_mois/$affiche_date_annee)</span><br>"; 
echo "	</li>";
}
echo "</ul>";
?>

Explications :
Chaque "actu" est identifiée grâce à $list['id'] (id est celui en base de données, auto-incrémenté, et donc UNIQUE)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	$id_actu = $list['id'];

On va donc s'en servir pour identifier chaque ligne/image/case-à-cliquer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img...id='imageLien".$id_actu."'...>
...onclick="createCookieActu('<?php echo $id_actu; ?>');" >...
...loadCookieActu('<?php echo $id_actu; ?>');...

Au chargement de la page :

on va lire les cookies enregistrés,
et afficher l'image si nécessaire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

			<script>loadCookieActu('<?php echo $id_actu; ?>');</script>

Au clic sur un lien :

on va créer le cookie,
et afficher l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

...onclick="createCookieActu('<?php echo $id_actu; ?>');" >...

**Rkellix** · 20/08/2013, 11h38

Bonjour,

Une autre méthode en s'inspirant du code d'au-dessus

L'idée est de crée un cookie qui contient une liste des id des images déjà visité ou chaque id est séparé par une virgule . Quand on charge on passe en revue chaque id et on modifie les images.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
// Création + Changement de l'image au click
function createCookieActu(listId){
// changement d'image
	document.getElementById('imageLien'+id).src = '../img/doc1_nouveaute_tarifs_et_baremes.png';
 
	createCookie('visite',listId,100000);
}
 
var x = readCookie('visite')
if (x) {
	var urlImage = "../img/doc1_nouveaute_tarifs_et_baremes.png"
	var tableau=x.split(",");
	for (var i in tableau)
		{
		var obj = document.getElementById('imageLien' + tableau[i]).src = urlImage
		}
 
 
}
</script>

Pour la partie php, il faut qu'on regarde si l'id existe déjà dans le cookie, si oui on remet les données du cookie pour cette actualité, si non on reprend les données du cookie et on rajoute l'id de l'actualité et si il n'y a pas de cookie on mets simplement la valeur de l'id.

On obtient ce code finalement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
echo "<ul>";
		echo "<li class=\"titre_gris_fonce\">ACTUALITES <a href='admin/actualites_accueil/toutes_les_actus.php'> (Toutes les Actualit&eacute;s)</a></li>";
		while ($list = mysql_fetch_array($result)) {
			$id_actu = $list['id'];
			$affiche_date_fr= explode("-", $list['date']);
			$affiche_date_annee  = ($affiche_date_fr[0]);
			$affiche_date_mois = ($affiche_date_fr[1]);
			$affiche_date_jour= ($affiche_date_fr[2]);	
			//lien
			$Lien_racine_actualites = WEBROOT."/admin/actualites_accueil/documents_pdf/".$list['lien'];
						echo '<li>';   
			echo "<img src='/img/doc2_nouveaute.png' height='16' width='70' id='imageLien".$id_actu."' />";
					if ($list['lien']==''){echo '<span class=lien_gris_fonce>'.$list['titre']." ".$list['lieu'].'</span>'; }
 
 
					else{				
						?><span class="lien_gris_fonce"><a href="<?php echo $Lien_racine_actualites; ?>" target="_blank" onclick="createCookieActu('<?php if(isset($_COOKIE["visite"])){ if(in_array ($id_actu,explode( ',',$_COOKIE["visite"]))){echo $_COOKIE["visite"];}else{echo $_COOKIE["visite"].','.$id_actu;} }else{echo $id_actu;}?>')" ><?php echo $list['titre']." ".$list['lieu']; ?></a></span>
						<?php 	
					}
					 echo "<span class='date_page_accueil'>($affiche_date_jour/$affiche_date_mois/$affiche_date_annee)</span><br>"; 
		echo '</li>';
	   }
 
echo '</ul>';

Remplacement d'une image au clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager