Remplacement d'une image au clic

Version imprimable

05/08/2013, 12h14
Loulo8407

Remplacement d'une image au clic
Bonjour,

J'ai une image avec un lien :

Code:

<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:

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 :cry:

Sandra
05/08/2013, 12h56
rodolphebrd

Bonjour,

je pense que vous trouverez quelque chose ici :http://www.developpez.net/forums/d13...igner-onclick/
06/08/2013, 10h16
Loulo8407

Css ou autre ???

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
06/08/2013, 11h03
Invité
Bonjour Sandra,

Citation:

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.
06/08/2013, 11h34
Bovino

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.
07/08/2013, 09h17
Loulo8407

Changement d'image au clic visité

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
07/08/2013, 09h38
Invité

Bonjour,

Citation:

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.
09/08/2013, 12h13
Loulo8407

Bonjour

Citation:

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
14/08/2013, 15h08
Loulo8407

Aide

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:

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

Au secour !!!

Sandra
14/08/2013, 16h37
Rkellix
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:

<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:

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>
14/08/2013, 16h57
Loceka

Citation:

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).

Aide

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:

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:

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

et

Code:

id='imageLien'

dans la balise IMG.
Code:

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é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

Bonjour,

Code:

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:

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:

$id_actu = $list['id'];

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

Code:

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:

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

Au clic sur un lien :

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

Code:

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

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:

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:

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

21/08/2013, 14h17
Loulo8407

Remerciements

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 :ccool:

Citation:

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:

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

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:

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:

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

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