Forum d'entraide PHPFrance

Bonjour à tous !

Je suis débutante en XHTML et CSS. Cependant, j'aurai besoin d'utiliser des includes pour mon site et à ce niveau là je dois dire que je suis plus que débutante.

Les includes, j'ai compris le principe ! Maintenant, j'aurai besoin d'aller plus loin.

Je vous explique mon soucis.

Je voudrai en faite créer une sorte de petit "diaporama".
- Une image apparait de base sur la page.
- 3 boutons se trouvent "au dessus" de cette image. Lorsque je clique sur le bouton "1", la même image reste. Sur le bouton "2" une 2e image s'affiche et idem pour le bouton "3".

un aperçu:

http://img256.imageshack.us/img256/7719/apercub.jpg

J'avais déjà essayer de le réalisé mon "diaporama" avec des iframes, ce qui était parfait sur chrome, moins sur firefox ainsi qu'IE...
De plus, cette méthode est légèrement dépassée...

Merci de votre aide =)

Il suffit de changer la source de l'image en javascript, ce que réalise la première fonction " Change_img " :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<script type="text/javascript">
<!--
function Change_img(id_photo, image)
{

	var id_pho = document.getElementById(id_photo);

	if (id_pho) id_pho.src = image;
}


function Img_preload (){

Img_preload_src = new Array();

for (var i=0; i < Img_preload.arguments.length; i++)
	{
	Img_preload_src[Img_preload.arguments[i]] = new Image();
	Img_preload_src[Img_preload.arguments[i]].src = Img_preload.arguments[i];
	}
}

// Fonction de chargement onload 
function AddLoad_JS(func) {

                if (window.addEventListener)
                {
                        window.addEventListener("load", func, false);
                }
       else if (document.addEventListener)
                {
                        document.addEventListener("load", func, false);
                }
       else if (window.attachEvent)
                {
                        window.attachEvent("onload", func);
                }
}


// Chargement onload de la fonction Img_preload pour précharger les photos listées en argument
AddLoad_JS(function(){Img_preload('PHOTO/photo2.jpg','PHOTO/photo3.jpg')});
-->
</script>

</head>

<body>
<div><img id = "image" src = "PHOTO/photo1.jpg" /></div>
<span style="cursor:pointer" onclick = "Change_img('image','PHOTO/photo1.jpg')">image 1</span>
<span style="cursor:pointer" onclick = "Change_img('image','PHOTO/photo2.jpg')">image 2</span>
<span style="cursor:pointer" onclick = "Change_img('image','PHOTO/photo3.jpg')">image 3</span>

</body>
</html>

J'ai rajouté une fonction qui permet de précharger les images qui ne sont pas directement affichées dans le code html.

Evidemment il faut indiquer le chemin complet de l'image (par rapport au script en cour) dans les fonctions Change_img et Img_preload. J'ai donc considéré pour l'exemple que tes photos étaient dans le répertoire PHOTO

[hs]AB -> pourquoi document.addEventListener ? t'as eu des soucis avec certain navigateur ?[/hs]

[hs]AB -> pourquoi document.addEventListener ? t'as eu des soucis avec certain navigateur ?[/hs]

Perso non, mais comme il est impossible de les tester tous je préfère suivre les conseils d'alsacreation. Tu trouveras leur explication ici. Maintenant je ne sais pas si c'est réellement utile mais d'un autre côté je me dis que ça ne gêne pas ...

Bonjour,

Merci bcp

J'y jette un oeil dès que je dispose d'un peu plus de temps. Je vous tiens au courant

Bonne soirée

Pour les intéressés voici la solution que j'ai trouvé (avec un peu) beaucoup d'aide ^^

<?php
	$centre01 ="images/centre01.gif";
	$centre02 ="images/centre02.gif";
	$centre03 ="images/centre03.gif";
?>

> à placer avant le DOCTYPE

          <a href="accueil.php?1"><img src="images/bouton1.png"/></a></div>

		<div class="bouton2"><a href="accueil.php?2"><img src="images/bouton2.png"/></a></div>

		<div class="bouton3"><a href="accueil.php?3"><img src="images/bouton3.png"/></a></div>
		
	
				<?php
		if (isset($_GET['2']))
		{
		echo "<img src=\"$centre02\" >"; 
		}
		else if (isset($_GET['3']))
		{
		echo "<img src=\"$centre03\" >"; 
		}
		else
		{
		echo "<img src=\"$centre01\" >"; 
		}
				?>

Pour les intéressés voici la solution que j'ai trouvé (avec un peu) beaucoup d'aide ^^

<?php
	$centre01 ="images/centre01.gif";
	$centre02 ="images/centre02.gif";
	$centre03 ="images/centre03.gif";
?>

> à placer avant le DOCTYPE

          <a href="accueil.php?1"><img src="images/bouton1.png"/></a></div>

		<div class="bouton2"><a href="accueil.php?2"><img src="images/bouton2.png"/></a></div>

		<div class="bouton3"><a href="accueil.php?3"><img src="images/bouton3.png"/></a></div>
		
	
				<?php
		if (isset($_GET['2']))
		{
		echo "<img src=\"$centre02\" >"; 
		}
		else if (isset($_GET['3']))
		{
		echo "<img src=\"$centre03\" >"; 
		}
		else
		{
		echo "<img src=\"$centre01\" >"; 
		}
				?>

OOps !

J'ai été un peu trop vite

Je reprend :

<?php
        $centre01 ="images/centre01.gif";
        $centre02 ="images/centre02.gif";
        $centre03 ="images/centre03.gif";
?>

> avant le DOCTYPE

                <a href="accueil.php?1"><img src="images/bouton1.png"/></a>

		<a href="accueil.php?2"><img src="images/bouton2.png"/></a>

		<a href="accueil.php?3"><img src="images/bouton3.png"/></a>

		
                       	<?php
		if (isset($_GET['2']))
		{
		echo "<img src=\"$centre02\" >"; 
		}
		else if (isset($_GET['3']))
		{
		echo "<img src=\"$centre03\" >"; 
		}
		else
		{
		echo "<img src=\"$centre01\" >"; 
		}
				?>

voilà qui est mieux

Si quelqu'un pouvait supprimer les deux posts précédents. Pour éviter la pollution

Merci les modos !

Pour positionner mes boutons correctement j'ai besoin de mon CSS évidement.
Je ne dois rien y changer ? Parce que je ne parviens pas à les positionner sans faire bouger l'image également

En créant 2 blocs différents, j'ai essayé les valeurs négatives, les Z-index. Rien n'y fait... Ils sont indissociable...

Gardes ma solution pour mémoire quand même, car elle te permet de faire ton diaporama sans avoir à recharger la page

Et puis avec cette méthode en javascript, les images suivantes s'affichent immédiatement pour peu que l'on attende une ou deux secondes (le temps que les images en preload aient terminé leur chargement) avant d'utiliser un des boutons de navigation, et donc c'est fonctionnel et sans attente pour un usage courant.

Il te suffisait de faire un copié collé et de remplacer l'adresse de mes images par les tiennes pour que cela fonctionne donc c'est facile à tester.

Avec ta méthode, les images suivantes s'affichent sans doute immédiatement dans tes tests mais c'est parce que tu les as dans le cache de ton navigateur. Donc l'affichage sera moins rapide pour un visiteur qui visite ta page pour la première fois que celui que tu observes. Pour avoir le même rendu dans tes tests, vides le cache de ton navigateur avant chaque test.

Mais bon ta méthode n'est pas mauvaise elle est simplement moins confortable pour le visiteur.

Concernant ton problème de positionnement essaies de mettre tes boutons en position : absolute pour les désolidariser du reste.

Forum d'entraide PHPFrance

includes et conditions

includes et conditions

Re: includes et conditions

Re: includes et conditions

Re: includes et conditions

Re: includes et conditions

Re: includes et conditions

Re: includes et conditions

Re: includes et conditions

Re: includes et conditions

Re: includes et conditions