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

Invité · 07/08/2013, 09h38

Bonjour,

Envoyé par Loulo8407

... et quand les gens ont cliqué sur le lien je souhaiterai que s'affiche une autre image, ...

Parfois, les questions simples entrainent des réponses complexes.

1/ Tant que le visiteur reste sur la page, pas des souci :
un simple bout de script JavaScript pour changer d'image sur le onclick suffit.

2/ Si on veut "pouvoir s'en souvenir", même si le visiteur change de page (et revient plus tard sur celle-ci) :
là, un cookies ou une SESSION PHP peuvent être nécessaires pour enregistrer, puis récupérer, le choix du visiteur.

3/ ..., même après avoir fermé son navigateur...
Là, il faut carrément enregistrer le choix sur le "long terme" !
avec un cookies, enregistré sur l'ordinateur du client, qu'on "interrogera" à la prochaine connexion.
A toi de voir si ça vaut la peine d'employer les grands moyens pour si peu.

**Loulo8407** · 09/08/2013, 12h13

Parfois, les questions simples entrainent des réponses complexes

Je te le fait pas dire !! :-(

En fait je trouve que c'est beaucoup de choses pour pas grand chose mais c'est mon employeur qui me le demande donc ... :-(

Je cherche une exemple en code de ce genre de travail afin de le mettre à ma "sauce" mais impossible de le trouver !!!

pourtant je dois pas être le premier a souhaiter ce genre de chose.

Merci pour ton aide en tout cas

Sandra

**Loulo8407** · 14/08/2013, 15h08

Re Bonjour,

Impossible pour moi de trouver sur le web des exemple pour faire afficher une image différente lorsqu'un lien a été cliqué et que ça reste avec le navigateur qui a été fermé.

J'ai commencé a créer un variable avec cookie pour pouvoir garder l'information qui signale que le lien a étét visité, mais je ne sais pas quoi faire après :-(

Code :

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

setcookie('visite', 'ok', time() + 365*24*3600, null, null, false, true);

Au secour !!!

Sandra

**Rkellix** · 14/08/2013, 16h37

Bonjour,

Il faut que tu crées une fonction qui crée des cookies et une autre pour lire les cookies.

Regarde ce lien , tu trouveras ton bonheur.

Après dans ton lien,tu places ton onclick pour créer ton cookie.

Ton code devrai ressembler à ça:

Code :

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

<a href="#" onclick="createCookie('visite', 'ok',100000)" ><img id="imageLien" src="..." alt="..." ></a>

Pour finir, au chargement de ta page il faut lire le cookie. Si ton cookie est présent , tu changes l'image.

Code :

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

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

**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>';

**Loulo8407** · 21/08/2013, 14h17

Bonjour et grand bravo à jreaunx62 etrkellix !!!

grâce à vous j'ai appris pleins de choses et vous m'avez remotivé à apprendre la programmation.

Super et encore merci

Invité · 21/08/2013, 15h42

Envoyé par Loulo8407

... vous m'avez remotivé à apprendre la programmation.

Tant mieux !
Voici encore de quoi apprendre !

4 façons d'écrire la date en Français (JJ/MM/YYYY) à partir d'une date en Anglais (YYYY-MM-DD) :

Code php :

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

$date_en = '2013-03-27'; // date en Anglais (YYYY-MM-DD)

Code php :

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

1
2
3
// Méthode 1 (la tienne) : bof bof
$date_fr = explode("-", $date_en);
$date_fr = $date_fr[2].'/'.$date_fr[1].'/'.$date_fr[0];

Code php :

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

1
2
// Méthode 2 : bof (c'est la méthode 1, sur une seule ligne)
$date_fr = implode('/',array_reverse(explode("-", $date_en)));

Code php :

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

1
2
// Méthode 3 : MIEUX
$date_fr = date_format(date_create($date_en), 'd/m/Y');

Code php :

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

1
2
// Méthode 4 : ENCORE MIEUX
$date_fr = date('d/m/Y', strtotime($date_en));

Remplacement d'une image au clic

JavaScript

Discussions similaires

Partager

Partager