Page 1 sur 2

Mettre une image derrière un lien

MessagePosté: Mar Juil 29, 2008 8:44 am
par Valbuena72
Salut,les tutomakers

voila je voudrais mettre une image
http://valbuenaarts.e3b.org/Avatar.php pour le nombre de la page
mais je n'ai aucune idée comment faire un exemple:
Image

si vous voulez le code de commentaire je vous bien (c'est le même que le livre d'or ) :mrgreen:

merci pour votre aide

Re: Mettre une une image pour lapage en cours

MessagePosté: Mar Juil 29, 2008 1:54 pm
par Yoyo
Salut :) A j'aime bien quand tu viens avec de nouveaux problèmes à résoudre tu sais toi :mrgreen:

Alors, que je comprenne bien. Si tu clics sur la case 6 par exemple, tu aimerais qu'elle devienne noir et que tout le reste des cases soient grises ?

Déjà quels sont les noms de tes images noirs et grises ? :)

Re: Mettre une une image pour lapage en cours

MessagePosté: Mar Juil 29, 2008 1:57 pm
par Valbuena72
oups c'est pas trop ça

c'est juste mettre une image a la place du lien 1 car la ça fait moche
en faite
après faire des rollover

mettre des images a la place du lien voila le sujet
faut il crée mes images ou php va nous en generer ?



p.s je suis un nouveau jeu gratuit tu peux aller a auchan tu va me trouve en libre service avec des enigmes :o

bon je sort :boulay:

Re: Mettre une une image pour lapage en cours

MessagePosté: Mar Juil 29, 2008 2:14 pm
par Yoyo
A d'accord, c'est l'étape après ça mdr

Ben c'est simple dans ton code php tu as surement un code du style pour afficher tous les numéros de page

Code: Tout sélectionner
<?php for($i=0;$i<$nbPages;$i++)
{
     echo 
'<a href="/page.php?page='.$i.'">'.$i.' </a>';
}
?>


Et bien, tu peux le compléter en insérant une classe et dans ton css, tu affiches une image en background pour cette classe :)

Exemple:
Code: Tout sélectionner
<?php for($i=0;$i<$nbPages;$i++)
{
     echo 
'<a class="numero" href="/page.php?page='.$i.'">'.$i.' </a>';
}
?>


et dans ton css tu feras un truc du genre:

Code: Tout sélectionner
.numero {
      
background-imageurl(images/monimage.jpg);

Re: Mettre une une image pour lapage en cours

MessagePosté: Mar Juil 29, 2008 2:18 pm
par Valbuena72
ah merci yoyo je savais pas ou inclure la "class" dans php :|

puis après pour le rollover je pense savoir


Code: Tout sélectionner
.numero a:hover {
      
background-imageurl(images/monimage.jpg);
}  


c'est ça

encore merci

Re: Mettre une une image pour lapage en cours

MessagePosté: Mar Juil 29, 2008 2:20 pm
par Yoyo
De rien :) Tu peux les mettre partout les classes :)

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 8:07 am
par Valbuena72
cool
aussi

je doit crée autant d'image avec le numero de la page ou ça va se faire tout seul ?


Pour rollover c'est bien ça ?

ça ne marche pas

http://valbuenaarts.e3b.org/Avatar.php

un bout du code php j'ai chercher l'erreur je voi po :s
Code: Tout sélectionner
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Livre d'or</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" media="screen" type="text/css" title="style" href="page.css" /> 
        <style type="text/css">
        form, .pages
        {
            text-align:center;
            
            border:2px  #036c98;
        }

        </style>
    </head>
    <body>
 
    
 
    <p class="pages">
 
<?php
mysql_connect
("*****", "********", "********");
mysql_select_db("**********");//question de securite j'ai enleve tout

 
// --------------- Etape 1 -----------------
// Si un message est envoyé, on l'enregistre
// -----------------------------------------
 
if 
(isset($_POST['pseudo']) AND isset($_POST['message']))
{
    $pseudo = mysql_real_escape_string(htmlspecialchars($_POST['pseudo'])); // On utilise mysql_real_escape_string et htmlspecialchars par mesure de sécurité
    $message = mysql_real_escape_string(htmlspecialchars($_POST['message'])); // De même pour le message
    $message = nl2br($message); // Pour le message, comme on utilise un textarea, il faut remplacer les Entrées par des <br />
 
    
// On peut enfin enregistrer :o)
    mysql_query("INSERT INTO commentaire VALUES('', '" . $pseudo . "', '" . $message . "')");
}
 
// --------------- Etape 2 -----------------
// On écrit les liens vers chacune des pages
// -----------------------------------------
 
// On met dans une variable le nombre de messages qu'on veut par page
$nombreDeMessagesParPage = 20; // Essayez de changer ce nombre pour voir :o)
// On récupère le nombre total de messages
$retour = mysql_query('SELECT COUNT(*) AS nb_messages FROM commentaire');
$donnees = mysql_fetch_array($retour);$totalDesMessages = $donnees['nb_messages'];
// On calcule le nombre de pages à créer
$nombreDePages  = ceil($totalDesMessages / $nombreDeMessagesParPage);
// Puis on fait une boucle pour écrire les liens vers chacune des pages
echo 'Page : ';
for ($i = 1 ; $i <= $nombreDePages ; $i++)
{
    echo '<a class="numero" href="Avatar.php?page=' . $i . '">' . $i . '</a> ';
}
?>
 
</p>

<?php
 
 
// --------------- Etape 3 ---------------
// Maintenant, on va afficher les messages
// ---------------------------------------
 
if 
(isset($_GET['page']))
{
        $page = $_GET['page']; // On récupère le numéro de la page indiqué dans l'adresse (livreor.php?page=4)
}
else // La variable n'existe pas, c'est la première fois qu'on charge la page
{
        $page = 1; // On se met sur la page 1 (par défaut)
}
 
// On calcule le numéro du premier message qu'on prend pour le LIMIT de MySQL
$premierMessageAafficher = ($page - 1) * $nombreDeMessagesParPage;
 
$reponse 
= mysql_query('SELECT * FROM commentaire ORDER BY id DESC LIMIT ' . $premierMessageAafficher . ', ' . $nombreDeMessagesParPage);
 
while 
($donnees = mysql_fetch_array($reponse))
{
      echo '<p><strong>' . $donnees['pseudo'] . '</strong> a écrit :<br />' . $donnees['message'] . '</p>';
}




echo "il y a $totalDesMessages commentaire";

 



 
mysql_close
(); // On n'oublie pas de fermer la connexion à MySQL ;o)
?>


 
</body>
</html>

puis le css: nom du fichier css = page.css


Code: Tout sélectionner
/*image des pages*/
        .numero {
      background-image: url(images/page.png);
}
 
 


je sais que tu va me dire regarde si tu bien mis le lien du css dans livreor2.php

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 1:31 pm
par Yoyo
Salut, peut-être comme ceci:

Code: Tout sélectionner
/*image des pages*/
        .numero {
      background-image: url(images/page.png);
      display:block;
}
 


Et oui l'image va se mettre derrière chaque lien qui a la classe "numero". Donc c'est une mauvaise idée de mettre le numéro intégré à l'image directement :D

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 2:38 pm
par Valbuena72
Ok merci mais ça fait ça maintenant => http://valbuenaarts.e3b.org/Avatar.php


et pourquoi le si il y a une nouvelle page 2
ce chiffre se met a la ligne au lieu de continuer ?
j'ai pas v u de <br> pourtant? :|

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 2:50 pm
par Yoyo
Toi t'as un sérieux problème avec le css ^^, déjà si tu mettais plusieurs pages, on pourrait voir le résultat, mais la y en a qu'une lol T'attends de résoudre le probème qd une deuxieme page arrivera ? lol

Faudrait sérieusement que tu lises quelques tutos sur le css, ca t'aiderait, sinon je vais te donner la becquée :D

Code: Tout sélectionner
/*image des pages*/
        .numero {
      background-image: url(images/page.png);
      display:block;
      width:45px;
      height:45px;
      float:left;
}
  


Voila, j'ai du le spammer pour que la 2eme page arrive, c'est pas sérieux tout ça lol. Essaie mon css et si il y a des modifications à faire, tu devrais apprendre les bases au moins

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 3:30 pm
par Valbuena72
:mrgreen: mais j'ai du louper quelque chapitre :|

et merci ça fonctionne comme je voulais

Code: Tout sélectionner
/*image des pages*/
        
.numero a:hover {
      
background-imageurl(images/hover.png);
      
display:block;
      
width:45px;
      
height:45px;
      
float:left;

et ça pour le rollover ? non ? :)
merci encore

enignme resolu :ange:

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 3:47 pm
par Yoyo
C'est les balises
Code: Tout sélectionner
[code][/code] 
pour afficher un script ou un code css ^^

Pour le hover, encore des petites corrections à apporter mdr

- la classe numéro, c'est déjà comme si c'était la balise a, donc pas la peine de le remettre ! .numero:hover doit suffir
- le .numero:hover hérite des propriétés de .numero, donc pourquoi remettre la même chose ? :mrgreen:

Code: Tout sélectionner
/*image des pages*/
        
.numero:hover {
      
background-imageurl(images/hover.png);
}  

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 4:47 pm
par Valbuena72
oullaa ça va pas :mrgreen:

mais ça marche pas :D (le rollover :s)

Ok pour
Code: Tout sélectionner
[code] [/code] 
pour afficher un code

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 5:15 pm
par Yoyo
T'as quand même essayé des trucs ou juste dit ça marche pas ? lol
T'as aussi essayé avec .numero a:hover pour être sure ?

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 5:16 pm
par Valbuena72
hum.... tu me traite de menteur en plus :mrgreen: (je plaisante)
fichier css
Code: Tout sélectionner
/*image des pages*/
        
.numero {
      
background-imageurl(images/page.png);
      
display:block;
      
width:45px;
      
height:45px;
      
float:left;
}
/*rollover  des pages*/
        
.numero :hover {
      
background-imageurl(images/hover.png);
  } 

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 5:17 pm
par Yoyo
T'as essayé ou pas ?? ça se trouve c'est .numero a:hover

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 5:50 pm
par Valbuena72
Ben il a rien qui se passe

pour tout les code que tu m'a donner sniff :cry:

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 6:56 pm
par Yoyo
LOL, j'ai trouvé et je vais t'étriper :o :mrgreen:

T'as même pas été foutu de copier coller le code pour faire fonctionner le hover que je t'ai donné ici et qui marche:

T'as été mettre un espace entre .numero et :hover alors qu'il en faut pas, ça doit s'écrire comme ça .numero:hover

:bigboulay: :bigboulay: :bigboulay: :bigboulay:

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 7:31 pm
par Valbuena72
:bigboulay:

Image

elle est drole ma blague :boulay: :dlb:



mdrr mais pkoi ça marche maintenant :na: :out:


bon d"accord => :sort:

un seul mot => :merci:


j'ai tellement honte que je suis pas sur de revenir :| :mrgreen:

Re: Mettre une image derrière un lien

MessagePosté: Mer Juil 30, 2008 7:32 pm
par Yoyo
Mais si t'es le bienvenu, mais desfois t'exagères :D Enfin, faut espérer que ça s'arrange 8)

Fais de la pub aussi pour tutomaker.com si tu peux, plus on est de fous plus on rit, faudrait + de monde sur le forum :)