28172 sujets

CSS et mise en forme, CSS3

Changer la couleur du content et text

Bonjour
Je souhaiterais faciliter la navigation de mon site pour les personnes mal-voyentes.Pour cela,je voudrais mettre en place un système où lorsqu'une personne clique sur une image (exemple un A de couleur blanc sur un fond bleu) mon content sera en arrière plan bleu avec la police blanche.

Je voudrais savoir si ce système est entièrement faisable en css ou doi-je passer par du jquery ?

Voila comment je vois cela :

<div class="Carre"><a class="LienCarre" id="NoirBlanc" href="#"><img src="images-accessibarre/NoirBlanc.png" alt="Contraste : Fond Noir - Police Blanche" title="Contraste : Fond Noir - Police Blanche" /></a></div>
<div class="Carre"><a class="LienCarre" id="VertBlanc" href="#"><img src="images-accessibarre/VertBlanc.png" alt="Contraste : Fond Vert - Police Blanche" title="Contraste : Fond Vert - Police Blanche" /></a></div>
<div class="Carre"><a class="LienCarre" id="BrunBlanc" href="#"><img src="images-accessibarre/BrunBlanc.png" alt="Contraste : Fond Brun - Police Blanche" title="Contraste : Fond Brun - Police Blanche" /></a></div>
<div class="Carre"><a class="LienCarre" id="JauneBrun" href="#"><img src="images-accessibarre/JauneBrun.png" alt="Contraste : Fond Jaune - Police Brun" title="Contraste : Fond Jaune - Police Brune" /></a></div>
<div class="Carre"><a class="LienCarre" id="JauneNoir" href="#"><img src="images-accessibarre/JauneNoir.png" alt="Contraste : Fond Jaune - Police Noire" title="Contraste : Fond Jaune - Police Noire" /></a></div>
<div class="Carre"><a class="LienCarre" id="BlancNoir" href="#"><img src="images-accessibarre/BlancNoir.png" alt="Contraste : Fond Blanc - Police Noire" title="Contraste : Fond Blanc - Police Noire" /></a></div>
<div class="Carre"><a class="LienCarre" id="RoseBlanc" href="#"><img src="images-accessibarre/RoseBlanc.png" alt="Contraste : Fond Rose - Police Blanche"  title="Contraste : Fond Rose - Police Blanche"/></a></div>
<div class="Carre"><a class="LienCarre" id="BleuBeige" href="#"><img src="images-accessibarre/BleuBeige.png" alt="Contraste : Fond Bleu - Police Beige" title="Contraste : Fond Bleu - Police Beige" /></a></div>
<div class="Carre"><a class="LienCarre" id="JauneBleu" href="#"><img src="images-accessibarre/JauneBleu.png" alt="Contraste : Fond Jaune - Police Bleue" title="Contraste : Fond Jaune - Police Bleue" /></a></div>
<div class="Carre"><a class="LienCarre" id="JauneRouge" href="#"><img src="images-accessibarre/JauneRouge.png" alt="Contraste : Fond Jaune - Police Rouge" title="Contraste : Fond Jaune - Police Rouge" /></a></div>

<div id="ContenuWeb">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia autem esse alias excepturi culpa similique neque odio cum vitae! Nesciunt, harum, ipsa at iure velit non adipisci minima nisi quisquam architecto similique provident placeat. Cum, sunt, ad eum quae dolor praesentium voluptatum tenetur officiis nemo doloribus minima obcaecati modi soluta debitis blanditiis dolorem corrupti placeat aperiam nostrum aliquid fugiat excepturi quos consequuntur quisquam velit perferendis quo nobis dignissimos officia suscipit magnam ea exercitationem atque vero reiciendis voluptate labore a hic provident ut incidunt doloremque. Vel, illo, tempore ad voluptatibus similique architecto quibusdam accusantium eligendi cupiditate. Ipsum ratione earum nostrum pariatur!</p>
</div>


Est-ce possible ? ou doi-je passer par jquery ?

Merci d'avance
Administrateur
stephane72 a écrit :
Je voudrais savoir si ce système est entièrement faisable en css ou doi-je passer par du jquery ?

Hello,

C'est faisable en CSS, mais tu ne pourras pas conserver l'information d'une page à une autre (cookie, session). Pour cela il te faut forcément un langage dynamique côté client ou serveur, donc JavaScript ou PHP par exemple (pourquoi jQuery ?)
Raphael a écrit :

Hello,

C'est faisable en CSS, mais tu ne pourras pas conserver l'information d'une page à une autre (cookie, session). Pour cela il te faut forcément un langage dynamique côté client ou serveur, donc JavaScript ou PHP par exemple (pourquoi jQuery ?)


Ok , Et quelqu'un pourrait il m'aider à créer ce code ? car je ne mettrise que html et css
Modifié par stephane72 (04 Sep 2013 - 12:19)
Je viens donc de trouver un exemple sur google et que j'ai adapté.Le voici ci-dessous :


<html>
	<head>
		<script language="javascript">
		function changebackground(couleur) {
		document.getElementById('xd-container').style.background=couleur;
		}

		function changecolor(couleur) {
		document.getElementById('xd-container').style.color=couleur;
		}
		</script>
	</head>
	<body>
		<div class="icon">
			<a href="javascript:changebackground('#000000');changecolor('#fff');"><img src="noir.gif"></a> <a href="javascript:changebackground('#FF0000');changecolor('#000')"><img src="rouge.gif"></a> <a href="javascript:changebackground('#00FF00');"><img src="rouge.gif"></a> <a href="javascript:changebackground('#0000FF');"><img src="bleu.gif"></a> <a href="javascript:changebackground('#FF00FF');"><img src="magenta.gif"></a> <a href="javascript:changebackground('#FFFF00');"><img src="cyan.gif"></a> <a href="javascript:changebackground('#00FFFF');"><img src="jaune.gif"></a>
		</div>
		<div id="xd-container">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, tempore, ex minus accusantium pariatur beatae sint consequuntur perspiciatis nihil ducimus est numquam quae ratione in quibusdam animi corporis enim aliquam!
		</div>
	</body>
</html>


Seulement,il me manque donc l'option concernant les cookie, session.Quelqu'un aurait il une idée ?

Merci
Sujet clos
Aller à