Changement de l’arriére plan <body>

17 août 2017 à 22:13:22

Bonjours,

Je suis débutant en html et css, et lors de la construction je me suis heurté à un problème qui est:

Lors du survole d'un lien j'aimerait que l'image qui décor le fond du site change avec une autre, et sa avec plusieurs lien qui amènerait chacune à des image différente. Et mon problème c'est que lors qu survol mon image est définit en arrière plan du lien <a> et non de ma page <body>.

J'ai beaux eu essayer plusieurs méthode déjà présenté sur internet dans le passe mais aucune ne correspond a mon attente.

Auriez vous une solution a mon problème ou une déjà existante qui aurait pue m'échapper ?

merci d'avance.

Mamax64

17 août 2017 à 23:47:31

Bjr,

Faire changer l'élément que l'on survole c'est facile , mais en faire changer un autre quand on survole un autre élément, compliqué ... regarde du coté de hover (css).

Bonne chance

ThéoKoël

18 août 2017 à 11:33:51

Mamax64 a écrit:

Bjr,

Faire changer l'élément que l'on survole c'est facile , mais en faire changer un autre quand on survole un autre élément, compliqué ... regarde du coté de :hover (css).

Bonne chance

merci de ta reponce,
Mais justement c'est cette partie un peux plus compliqué qui me bloquent, et pour le :hover effectivement aucun problème lorsque sur lui même mais ce n'est pas mon but, j'ai déjà fait des recherche du cote de w3s est des forum openclassrooms ou stackoverflow mais rien qui puissent résoudre mon problème.

eclairia

18 août 2017 à 11:40:20

Bonjour,

Ce que tu demandes est bien faisable avec :hover.

Si je ne me trompe la syntaxe ressemble à ça:

ton_elem:hover elem_change{
//Ton code
}

elem_change est l'élément changé quand tu passes la souris sur l'élément ton_elem.

-
Edité par eclairia 18 août 2017 à 11:41:27

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

Lamecarlate

18 août 2017 à 12:26:15

Bonjour,

ce n'est pas possible en CSS. Tourne-toi vers le JavaScript, plutôt. Je te donne un exemple (faut pas prendre peur, c'est verbeux, mais pas méchant) :

document.querySelector(tonlien).addEventListener('mouseover', function() {
  document.body.classList.remove(ancienneclasse);
  document.body.classList.add(nouvelleclasse);
});

document.querySelector(tonlien)

Tu sélectionnes le lien.

addEventListener('mouseover', function() {

Tu lui accroches une fonction sur l'événement "mouseover".

document.body.classList.remove(ancienneclasse);
document.body.classList.add(nouvelleclasse);

Tu échanges des classes CSS sur l'élément body (classes que tu auras préparé dans le CSS).

Là, c'est pour un seul lien, je te laisse chercher comment rendre ça générique (et si tu galères trop, n'hésite pas à le dire)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

ThéoKoël

18 août 2017 à 12:33:25

eclairia a écrit:

Bonjour,

Ce que tu demandes est bien faisable avec :hover.

Si je ne me trompe la syntaxe ressemble à ça:
ton_elem:hover elem_change{
//Ton code
}
elem_change est l'élément changé quand tu passes la souris sur l'élément ton_elem.

merci de ta réponse mais lorsque j'appliquent ta modification, plus rien n'est visible (comme si il n'y avait pas de :hover.

peux etre que le code t'aidera.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style-acceuil.css" />
        <title>Famillt site Accueil</title>
    </head>

    <body>
    	<div id="page">
	    	<header>
    			<strong>Accueil</strong><br>
       		</header>
    	   	<nav>
	       		<a href="le-salon.html" id="le-salon">Le salon<a><br>
   		   		<a href="la-chambre-noire">La chambre noire</a><br>
    	   		<a href="la-salle-de-reunion.html">La salle de réunion<a><br>
    	   		<a href="la-salle-de-jeux.html">La salle de jeux<a><br>
    	   		<a href="l'album-photo.html">L'album photo<a><br>
    	   		<a href="a-propos-du-site.html">À propos du site</a><br>
    	   	</nav>
    	   	<footer>
    		   	<a href="condition-d'utilisation.html">Condition d'utilisation</a>
    		   	<a href="hebergeur.html">Hebergeur</a>
    	   	</footer>
    	</div>
    </body>
</html>

@font-face {
    font-family: 'AlexBrush-Regular';
    src: url('police/AlexBrush-Regular.ttf');
}

html
{
	height: 98%;
}
body
{
	background-color: rgb( 202, 189, 175);
	background-image: url("image/bandeau-acceuil.png");
	background-position: center;
	background-repeat: repeat-y;
	background-size: 100%;
	height: 100%;
	font-size: 2em;
	display: flex;
	justify-content: space-around;
}
#page
{
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30%;
}
header
{
	font-size: 3.2em;
	text-align: center;
	font-family: "AlexBrush-Regular";
}
nav
{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 1.4em;
}
footer
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	font-size: 0.5em;
	text-align: center;
}
ul
{
	list-style-type: none;
}
a
{
	color: black;
	text-decoration: none;
}
#le-salon:hover body
{
		background-image: url("image/bandeau-acceuil-le-salon.png");
		background-position: center;
		background-repeat: repeat-y;
}

(Il n'y a pas vonlontairement de <ul><li> pour des raison de rentrage sur le code html)

Lamecarlate a écrit:

Bonjour,

ce n'est pas possible en CSS. Tourne-toi vers le JavaScript, plutôt. Je te donne un exemple (faut pas prendre peur, c'est verbeux, mais pas méchant) :
document.querySelector(tonlien).addEventListener('mouseover', function() {
  document.body.classList.remove(ancienneclasse);
  document.body.classList.add(nouvelleclasse);
});
document.querySelector(tonlien) 
Tu sélectionnes le lien.
addEventListener('mouseover', function() {
Tu lui accroches une fonction sur l'événement "mouseover".
document.body.classList.remove(ancienneclasse);
document.body.classList.add(nouvelleclasse);
Tu échanges des classes CSS sur l'élément body (classes que tu auras préparé dans le CSS).

Là, c'est pour un seul lien, je te laisse chercher comment rendre ça générique (et si tu galères trop, n'hésite pas à le dire)

Merci, pour le moment je ne fait que commencer le cours de javascript, mais je vais m'y pencher si cela n'est possible que par cette méthode.

-
Edité par ThéoKoël 18 août 2017 à 12:37:08

Lamecarlate

18 août 2017 à 13:14:54

Si tu n'as pas commencé JS, je te conseille de bien avancer en HTML et CSS, quitte à devoir abandonner temporairement ton idée de design Ne te disperse pas.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

ThéoKoël

18 août 2017 à 13:37:58

Lamecarlate a écrit:

Si tu n'as pas commencé JS, je te conseille de bien avancer en HTML et CSS, quitte à devoir abandonner temporairement ton idée de design Ne te disperse pas.

Merci, mais de ce cote la le cours est complètement terminé, je n'est plus qu'a me penche sur JS.

-
Edité par ThéoKoël 18 août 2017 à 13:40:45