28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonsoir,

Je m'explique, sur ma page lien, je vais mettre 22 liens parmis les photographes que je prefere. Avec a chaque passage de souris sur un nom une image de l'auteur apparait.

http://www.creatik.fr/new/liens.php

Ma question est de savoir si il est possible de faire en sorte qu'a chaque fois que l'on rentre sur cette page, un lien soit deja selectionné afin d'activer la balise <span> et ainsi avoir une photo affiché.
Et le tous en aleatoir histoire que l'image et le lien change a chaque visite ...

Dur dur Smiley sweatdrop
Merci a tous
carrement ... ^^

Tu as une idée de comment faire car comme ça, ça me parle pas du tout Smiley smile

merci
Modifié par Lekouti (22 May 2007 - 20:04)
Hello Smiley smile

Tes liens sont affichés dynamiquement ? Si c'est le cas :

<?php

     $lien_aleatoire = rand(1,22); // rand renvoie une valeur comprise entre 1 et 22 (inclus)
     $i = 1;

     while(...) // Ta boucle qui liste les liens
     {
          
          ...

          if($lien_aleatoire == $i) 
          {
               // Activation de la balise span
          }

          $i++;
     }
?>

Pour améliorer ça tu peux remplacer la valeur "22" du rand() par un mysql_numrows.

Et si tes liens sont en mode statique... ça va être barbare :

En haut de la page...

<?php

     $lien_aleatoire = rand(1,22);
     $i = 0;

?>

Sur les liens (balise a ou span je sais pas comment tu gères) :

<span <?php 
                    $i++; 
                    if($lien_aleatoire == $i) 
                    {
                         // Passage du lien en actif 
                    }
          ?> >


Voilà pour l'idée. Si tu veux que je t'aide d'avantage ce serait bien de me montrer le code de ta page php (notament pour voir comment tu gères le passage en lien actif).

Bon courage Smiley cligne
Modifié par BeliG (21 May 2007 - 12:05)
Salut, merci pour ton aide.

Je ne vois pas ce que tu entend pas "affichage dynamique" ?

Voici une partie du code :

<div id="lien1">
<ul>
<li><a href="http://www.olivierroller.com/">Olivier Roller<span><img src="lien/roller.jpg"  alt="" /></span></a></li>

<li><a href="http://www.ajoubin.com/">Arnaud Joubin<span><img src="lien/joubin.jpg"  alt="" /></span></a></li>
<li><a href="http://www.cyrillagel.com/">Cyril Lagel<span><img src="lien/lagel.jpg"  alt="" /></span></a></li>
<li><a href="http://www.sbourson.com/" >Stephane Bourson<span><img src="lien/bourson.jpg"  alt="" /></span></a></li>
</ul>
</div>


Alors, statique ou dynamique ?? Smiley smile

Merci
Modifié par Lekouti (22 May 2007 - 20:05)
Dynamique veut dire que tes liens sont dans une base de données, et recrachés ensuite dans ta page via php... Toi apparement c'est du statique, tout est en dur Smiley cligne

Comment se fait le passage de l'image dans le carré central (activation de la balise <span> contenant l'image associée au lien) ? L'est où le javascript ? Smiley ohwell
Modifié par BeliG (21 May 2007 - 16:12)
Il n'y a pas de javascript, tout est fait en css grace au fabuleu topic de ce site... ^^
Modifié par Lekouti (22 May 2007 - 20:06)
Lekouti a écrit :
ya 0 java tt en css

Il m'a fallu trente secondes pour comprendre ces quelques «mots»... Merci de faire un effort.
Lekouti a écrit :
ya 0 java tt en css grace au fabuleu topic de ce site... ^^

J'peux voir le tuto ? Smiley smile

C'est celui là ?

Alors je ferais comme ceci :

Modifie ton CSS


#lien1 a:hover span, #lien3 a:hover span[b], .aleatoire[/b] {
display : inline;
position : absolute;
top : 202px;
left : 352px;
width : 300px;
height : 300px;
text-align : center; }


Et ta page :



<?php // Quelque part en haut de page
     $lien_aleatoire = rand(1,22);
     $i = 0;
?>

...

<ul>
<li><a href="http://www.olivierroller.com/">Olivier Roller<span
[b]<?php
$i++; 
if($lien_aleatoire == $i) echo 'class="aleatoire"';
?>[/b]
><img src="lien/roller.jpg"  alt="" /></span></a></li>
...
</ul>


C'est fait vite et j'ai pas eu le temps de tester (ni de relire Smiley confus ), tiens moi au courant du résultat on continue ça demain Smiley cligne
Modifié par BeliG (21 May 2007 - 18:09)
Ouai c'est celui ci Smiley smile

Ok merci beaucoup, j'esseye ça des ce soir !!!

Merci Smiley smile
Modifié par Lekouti (22 May 2007 - 20:06)
Je viens de tester et à premiere vu, ça ne marche pas....

le code du haut, il faut que je le mette dans <head> ou <body> ?
Modifié par Lekouti (22 May 2007 - 20:07)
Salut,

tu peux mettre le premier morceau de code PHP n'importe où avant de commencer la liste des photographes.

Tu dois ajouter la deuxième partie pour chacun des liens, tu l'as bien fait ?
ouai j'ai tout fait comme a dis le monsieur ^^

J'ai placé le premier code au dessus des liens et mis le second dans la balise <span> d'ouverture...

Mais ça ne fait rien si ce n'est me mettre un ">" à gauche de la photo qui apparait...donc ça me la decal legerement, puis quand je rajoute le code sur un second lien le ">" ce met à droite du nom...

Je sais pas si j'ai été très clair... ^^

Mais la question que je me pose, c'est que dans le premier code il y a ça...

$lien_aleatoire = rand(1,22)


Je suppose que c'est en rapport avec mes 22 liens mais ne dois je pas justement nommer tout ces liens par des numeros ?

Merci
Modifié par Lekouti (22 May 2007 - 20:09)
Cette ligne de code permet de tirer au sort un entier entre 1 et 22. Ensuite, le script attribue un nombre à chacune de tes photos, et si ce nombre est égal au nombre tiré au sort, il ajoute la classe "aleatoire".

Bizarre, cette histoire de > qui apparaît. On peut voir le code source de la page après fonctionnement du script ?
bon....alors rectification....^^

Je viens de mettre les modifications en ligne.....ça marcher pas en local mais finalement ça marche une fois sur le serveur.

Quand on rafraichi la page, on vois effectivement qu'un random s'opere mais l'image ne s'affiche pas à son emplacement, comme prevu dans le css, mais en dessous du nom.

De plus l'image ne s'enleve pas quand on passe sur un autre lien...

On avance, on avance ^^

css du span :
#lien1 a:hover span, #lien3 a:hover span, .aleatoire {
display : inline;
position : absolute;
top : 202px;
left : 352px;
width : 300px;
height : 300px;
text-align : center;
}


http://www.creatik.fr/new/liens.php (j'ai mis dasn le php du haut rand(1,7) pour l'exemple Smiley cligne )

Sinon et sans vouloir abuser, est il possible egalement que le nom du photographe sois surligné, comme lors du passage de la souris, histoire que l'on sache d'ou vient l'image ?

Merci pour votre aide !

Smiley biggrin
Modifié par Lekouti (22 May 2007 - 20:11)
Salut Lekouti Smiley cligne ,

Il me semble que par rapport à ce que tu veux faire la solution purement PHP ne peut pas fonctionner car même si tu arrives à régler les petits détails qui te manquent, au final tu auras une classe (aleatoire) affectée à un de tes liens mais aucun moyen de la supprimer tant qu'une nouvelle requête n'est pas envoyée (donc un clic et pas un hover Smiley murf )

A ta place je chercherais plutôt du côté javascript...

A+ Smiley biggrin
Modifié par Heyoan (22 May 2007 - 07:15)
Heyoan a écrit :
Salut Lekouti Smiley cligne ,
Il me semble que par rapport à ce que tu veux faire la solution purement PHP ne peut pas fonctionner car même si tu arrives à régler les petits détails qui te manquent, au final tu auras une classe (aleatoire) affectée à un de tes liens mais aucun moyen de la supprimer tant qu'une nouvelle requête n'est pas envoyée (donc un clic et pas un hover Smiley murf )

C'est vrai, si on arrive à faire fonctionner le script tu auras toujours le lien aléatoire souligné (même si tu passes en revu les autres liens de ta page). C'est l'inconvénient de cette méthode 100% CSS pour les images réactives : l'intéractivité est difficilement paramétrable. Donc reste à voir si cette méthode te convient, sinon vois pour un javascript Smiley cligne

Petite remarque, il manque un espace entre le nom de tes balises (<span>) et le script php :
<spanclass="aleatoire">
salut tout le monde,

Effectivement j'avais pas mis d'espace, voila qui est corrigé mais desormé ça ne marche plus Smiley decu

Bizar bizar.

En plus petit question mais est ce normal que l'on ne vois pas le code dans la page ?

Sinon effectivement si cette technique ne marche pas en css/php il va falloir que je me dirige vers du javascript mais n'ayant aucune connaissance dans ce domaine, pouvez vous me dire ce que je dois rechercher ? histoire que je sois moins perdu sur google ^^

Merci à tous pour votre aide
Modifié par Lekouti (22 May 2007 - 20:13)
Salut,

Voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Pourrais tu éditer tes messages pour les rendre compréhensibles auprès de tous, notamment ceux qui en ont vraiment besoin. Ce serait de toute manière une marque de respect envers tous les membres qui prennent le temps de venir te renseigner pour t'aider.
(corriger les fautes, remplacer les abréviations par des mots, etc.)

Merci de ta compréhension
Modifié par Mikachu (22 May 2007 - 11:06)
Lekouti a écrit :
Bizar bizar, en plus petit question mais est ce normal que l'on ne vois pas le code dans la page ?

Oui, le php est un langage interprété côté serveur qui va recracher de l'HTML, à la différence du javascript et de l'html qui sont des langages interprétés niveau navigateur.

Lekouti a écrit :
n'ayant aucune connaissance dasn ce domaine, pouvai vous me dire ce que je dois rechercher ?

Du côté des rollovers et des images réactives avec lien en javascript Smiley cligne
Pages :