Bonjour,


Je désirerais faire un rolover sur des images au passage de la souris.

<<< (image précédente) (image suivante) >>>

J'ai essayé de le faire avec des css mais impossible,
Je ne peux mettre qu'un style sur la fonction pagination image
Voici mon code d'appel de la fonction dans la page :

J'aimerais quelque chose du genre :

"si la souris est sur $img1,
alors $img1='<img src="squelettes/images/droiteON.jpg" />';"

"si la souris est sur $img2,
alors $img2='<img src="squelettes/images/gaucheON.jpg" />';"

Est-ce réalisable en php ?, Faut il du javascript.

Merci pour votre aide.

Bonne journée.

Voici mon code php :

<?php
function lienPage($id_article, $vignette, $image, $titre, $texte) {
    // affiche un lien avec les paramètres en argument
    echo "<a href='page.php?id_article=$id_article";
   echo "&debut_vignette=$vignette&debut_image=$image'";
   echo " title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>";
}   


function paginationImage($id_article, $nb_images) {
$img1='<img src="squelettes/images/droite.jpg" />';
$img2='<img src="squelettes/images/gauche.jpg" />';

    // affiche des liens permettant d'afficher les images précédente et suivante
    if ($nb_images > 1) {
        $debut_image = $_GET["debut_image"];
        if ($debut_image > 0) {
            $debut_vignette = floor(($debut_image-1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image-1), "", "$img2");
        }
        echo "&nbsp; &nbsp; &nbsp;";
        if ($debut_image < $nb_images-1) {
            $debut_vignette = floor(($debut_image+1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image+1), "", "$img1");
           
        }
    }
}
?>

Bonjour,
Je ne suis pas d'accord avec toi, les styles sont illimités tu devrais pouvoir en utiliser plusieurs, tu change juste le nom de la class CSS et voilà.

Et oui pour le JS, tu n'y échapperas pas si tu veux utilise l'objet souris, la ou je n'ai pas bien compris c'est le résultat que tu veux obtenir ? As-tu un model à nous présenter pour que nous puissions te guider

Dog

Merci Dog pour ta réponse,

Je débute sur SPIP et PHP.

http://jpnogier.free.fr/spip/edition_je ... ut_image=2

Ci-dessus la page en question où j'aimerais remplacer les signes typographiques de pagination << et >> par des images.

Je désirerais faire un rollover sur ces images au passage de la souris.

La fonction pagination est appelèe par ce code dans ma page

<?php paginationImage($id_article, $nb_images); ?>

Cette fonction me renvoie plusieurs choses. En effet :

---> si je suis à la première image de mon portfolio : j'ai le lien image suivante >>
--> de la seconde image à l'avant dernière image du portfolio : j'ai les liens << image précédente et image suivante >>
--> sur la dernière image du portfolio : j'ai le lien << image précédente

Je pourait mettre un style sur cette fonction avec par exemple une image en background. Mais cela ne resoudra pas le problème. En effet il me faut 2 backround différents (flèche précédente et flèche suivante) suivant sur quelle vignette je me trouve.

Suis-je plus clair ?

Quelle est la marche à suivre pour le JS ?

Merci pour votre aide.

dans ton exemple je ne vois pas les signes de pagination << >> ??

dans ton exemple je ne vois pas les signes de pagination << >> ??

Sur la page html ou dans le code ?

Sur la page html ils sont sous l'image grand format à droite.

dans le code :
je les avais remplacé par $img1 et $img2

function paginationImage($id_article, $nb_images) {
$img1='<img src="squelettes/images/droite.jpg" />';
$img2='<img src="squelettes/images/gauche.jpg" />';

    // affiche des liens permettant d'afficher les images précédente et suivante
    if ($nb_images > 1) {
        $debut_image = $_GET["debut_image"];
        if ($debut_image > 0) {
            $debut_vignette = floor(($debut_image-1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image-1), "", "$img2");
        }
        echo "&nbsp; &nbsp; &nbsp;";
        if ($debut_image < $nb_images-1) {
            $debut_vignette = floor(($debut_image+1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image+1), "", "$img1");
           
        }
    }
} 
?>

mon code originel ne comportait pas d'images juste des liens typo :

function paginationImage($id_article, $nb_images) {


    // affiche des liens permettant d'afficher les images précédente et suivante
    if ($nb_images > 1) {
        $debut_image = $_GET["debut_image"];
        if ($debut_image > 0) {
            $debut_vignette = floor(($debut_image-1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image-1), "", "image précédente");
        }
        echo "     ";
        if ($debut_image < $nb_images-1) {
            $debut_vignette = floor(($debut_image+1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image+1), "", "image suivante");
           
        }
    }
} 
?>

puis-je voir ta fonction lienPage() , je pense que c'est elle qui gère l'affichage , fait attention avec ma résolution tes navigation sont sous le copyright

autant pour moi je l'ai pas vu

// voici la ligne de code à modifier pour mettre une image à la place 
echo " title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>"; 

echo " title='" . htmlentities($titre, ENT_QUOTES) . "'><img src='url image'></a>"; 

puis-je voir ta fonction lienPage() , je pense que c'est elle qui gère l'affichage , fait attention avec ma résolution tes navigation sont sous le copyright

autant pour moi je l'ai pas vu

// voici la ligne de code à modifier pour mettre une image à la place 
echo " title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>"; 

echo " title='" . htmlentities($titre, ENT_QUOTES) . "'><img src='url image'></a>"; 

Dogmondo,
Que veux tu dire par "fait attention avec ma résolution tes navigation sont sous le copyright "
Je travaille sur Mac es-tu sur Pc ?
Peux tu m'envoyer une capture d'écran ?

La fonction lienPage :

<?php
function lienPage($id_article, $vignette, $image, $titre, $texte) {
    // affiche un lien avec les paramètres en argument
    echo "<a href='page.php?id_article=$id_article";
   echo "&debut_vignette=$vignette&debut_image=$image'";
   echo " title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>";
}  

En modifiant

echo "title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>"; 

par

echo " title='" . htmlentities($titre, ENT_QUOTES) . "'><img src='url image'></a>"; 

[/quote]

Comment introduire le rollover ?


Merci en tout cas de tes précisions dogmongo.

Ton script peut être écrit tout simplement en JavaScript en moins de code. L'inconvénient de ton code est qu'il fait appel à PHP côté serveur à chaque clic sur une image pour l'agrandir.

Merci sadeq.

Ton script peut être écrit tout simplement en JavaScript en moins de code. L'inconvénient de ton code est qu'il fait appel à PHP côté serveur à chaque clic sur une image pour l'agrandir.

Chiche un script en JavaScript !

J'utilise un script en php pour pouvoir dans ma partie backoffice administrer le portolio : ajouter, modifier, effacer des enregistrements.

Je suis juste en recherche d'un script pour faire un rollover sur ma pagination.

Voila.

Merci.

pour ton roll over voir ici

http://css.alsacreations.com/Tutoriels- ... age-unique

Merci pour la capture d'écran dogmongo.

Je vais essayer de corriger cela.