Comment passer d'une page à une autre ?

6 octobre 2015 à 15:42:10

Bonjour !

J'aimerais créer une page d'accueil avec une photo sur laquelle on clique pour accéder au contenu du site web.

Seulement, au cas où l'utilisateur ne comprenne pas qu'il faille cliquer sur la photo, j'aimerai un compte à rebours (certainement un setTimeout) au terme duquel l'utilisateur est automatiquement redirigé à l'adresse du lien de la photo.

J'ai essayé un très naïf

var index = document.querySelector('a');
			setTimeout(function(){
				index.addEventListener(0, function(){
				}, true);
				}, 3000);

Bon soyez indulgent, je suis un grand débutant, et évidemment mon code ne donne rien. Il ne donne pas non plus d'erreur, c'est déjà ça.

Merci à toute aide !

Absy

-
Edité par NorbertDeJesusPires 6 octobre 2015 à 15:43:16

lithiumrock

6 octobre 2015 à 17:35:42

Salut,

Je pense que ce que tu cherche est

location.href='http://www.url.com';

à l'intérieur de la fonction de settimeout.

J'ai pas essayé donc je ne sais pas si ça fonctionne...

-
Edité par lithiumrock 6 octobre 2015 à 17:36:24

NorbertDeJesusPires

6 octobre 2015 à 17:54:23

Ok merci, j'essaierai !

Mais j'ai eu une autre idée entre temps, plutôt que de m'embêter de rediriger d'une page à une autre, j'ai pensé aux animations, en faisant disparaître mon image par opacité et en faisant apparaître mon autre page en même temps.

Seulement je ne comprends pas, après avoir essayé plusieurs codes, j'en suis arrivé à reprendre celui du cours 'dynamisez vos sites avec javascript, seulement l'image ne veut rien savoir et reste opaque Pourquoi donc ?

<!DOCTYPE html>
<html class="index">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="test.css" />
        <title>Accueil</title>
    </head>

    <body class="index">
		<div id="accueil">
			<img id='myImg' src="photos/accueil1.png"/>
		<script>
			var myImg = document.getElementById('myImg');

			function anim() {

			var s = myImg.style,
			result = s.opacity = parseFloat(s.opacity) - 0.1;
  
			if ( result > 0.2 ) {
        setTimeout(anim, 50); // La fonction anim() fait appel à elle-même si elle n'a pas terminé son travail
		}

	}

anim(); // Et on lance la première phase de l'animation
		</script>
		</div>
    </body>
</html>

Je ne comprends pas pourquoi ce code marche avec l'exemple du cours mais pas avec mon code.

-
Edité par NorbertDeJesusPires 6 octobre 2015 à 17:55:30

lithiumrock

6 octobre 2015 à 21:32:04

Après vérification il suffit juste de rajouter opacity a l'élément myImg en css

style='opacity:1;'

-
Edité par lithiumrock 6 octobre 2015 à 21:47:50