Partage

Ouverture d'un lien au passage de la souris

Sujet résolu

27 octobre 2008 à 16:12:45

Bonjour,

Voila le code d'une page pour une galerie photo. Et je voudrais activer les aperçu des photos miniatures par le survole de celle ci avec la souris. J'ai posté ce message sur le forum php et on ma dit qu'il fallait que j'utilise du javascript c'est pour cela que je poste ce message ici. Est ce que quelqu'un peut m'aider ?

merci d'avance

<?php if (isset($_GET['image']))
{
        $image = $_GET['image'];
        $nomimage = preg_replace('`(.+)\..*`', '$1', $image);
}
?>

<!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" xml:lang="fr" >
        <head>
                <title>Diaporama<?php if (isset($image)) {echo ' : '.$nomimage;}?></title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <style type="text/css">
                body
                        {background-color:#000000;}
                h1, p.center
                        {text-align: center;
                        color: blue;}
                a img
                        {padding: 1px;
                        border: 1px dotted gray;}
                .liste_image
                        {width: 120px;
                        height: 67px;
                        float: left;
                        text-align: center;
                        font-size: 12px;}

                </style>
        </head>
        <body>

<?php if (isset ($image))
{
        echo '    <h1>'.$nomimage.'</h1>
                <p class="center"><img src="photos/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></p>
';
}
 
$dir = 'photos/miniatures/*.{jpg,jpeg,gif,png}';
$files = glob($dir,GLOB_BRACE);
 
foreach($files as $image)
{
        $image = preg_replace('`photos/miniatures/(.+)`','$1',$image);
        $nomimage = preg_replace('`(.+)\..*`', '$1', $image);
 
        echo '      <div class="liste_image"><a  href="?image='.$image.'" onmouseover="?image='.$image.'"><img src="photos/miniatures/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></a><br />
                        '.$nomimage.'</div>
';
}
?>

</body>
</html>

++ nico5715

vyk12

27 octobre 2008 à 18:57:56

Salut

Tu aurais tout pu mettre entre les balises <code type="php"></code> ça aurait été plus facile pour la lecture (de toutes façons ton code ne nous sert à rien, qu'on se le dise

)

Bref, un truc du genre pourrait marcher :

<img src="image.jpg" alt="[IMAGE]" onmouseover="javascript:window.location.href = this.src;" />

nico5715

27 octobre 2008 à 19:06:26

Bonjour,

Merci, je place cette ligne ou ?

vyk12

27 octobre 2008 à 19:14:51

Cette ligne n'est pas à placer, tu rajoutes juste l'attribut onchange à tes balises <img /> en y mettant bien entendu la valeur javascript:window.location.href = this.src; : la ligne que je t'ai donné n'est qu'un exemple

nico5715

27 octobre 2008 à 19:20:37

ah ok. Je mes onmouseover="javascript:window.location.href = this.src;" dans toute mes balises <img> c'est bien ça?

vyk12

27 octobre 2008 à 19:23:37

Oui

Ou alors si tu as la flemme, fait un copier/coller de ça entre tes balises <head></head> :

<script type="javascript">
<!--
    window.onload = function() {
        var images = document.getElementsByTagName('img');
        for(var i = 0; i < images.length(); i++)
            images[i].onmouseover = function() { window.location.href = this.src; }
    }
//-->
</script>

Mallowigi

27 octobre 2008 à 19:28:26

Si tu as fait du JS un peu, tu saurais qu'on peut changer le style des elements via des evenements. Moi je te conseille, plutot que d'agrandir les images au survol de la souris, de plutot loader un cadre qui contiendra l'image agrandie, de la meme maniere que Cooliris. Pour cela, tu cree une classe css "cadresurvol" qui aura comme proprietes:

.cadresurvol {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}

Ensuite dans ton code html tu crée ton cadre quelque part sur la page, tu t'en fous puisqu'il est pas display. Ex: Apres le body. Bien entendu tu lui donne un id pour etre accedé par JS, disons le meme nom que la classe. et dans ce cadre, tu mets une image (logique!)

<div id="cadresurvol" class="cadresurvol">
  <img src="liendelimageagrandie.jpg"> <!-- Ce src sera changé par php -->
</div>

Dans ton serveur maintenant, il faut que tu arrive a acceder a tes images agrandies. Ca je suppose que tu utilise une bdd, ou des liens relatifs vers un dossier image, etc, on suppose que c'est acquis. Mais par contre, dans tes miniatures, tu dois rajouter un attribut "onmouseover" qui permettra de lancer une fonction javascript lorsque la souris passe dessus (et a fortiori lancer une fonction js lorsque la souris ne passe plus dessus).

Donc dans ton fichier javascript, tu fais une fonction "agrandirImage(event, lien)" par exemple. La variable event contient des proprietes a l'evenement, et la variable lien l'url de l'image agrandie.
Dans cette fonction tu recupere d'abord ton cadre invisible, "cadresurvol" avec un getElementById. Puis la tu lui mets display a block, et les proprietes top et left selon l'evenement event par mouseCoords(event).x et .y . Cette variable contient les données enregistrees par le declenchement de l'evenement. cf ce tutoriel : http://www.siteduzero.com/tutoriel-3-4 [...] -fenetre.html

Enfin dans tes images miniatures tu mets donc onmouseover="agrandirImage(event, lien)" et la a chaque fois que tu passe la souris sur l'une d'elles un cadre contenant l'image agrandie sera a coté de ta souris.

Si tu as du mal a comprendre mon raisonnement, alors ton apprentissage du javascript n'est pas encore assez poussé, et il faudra que tu lise les tutoriels et que tu fasses les tp.

Maintenant si tu tiens a avoir une solution bateau, celle du dessus suffit. Mais en faisant ca ce sera bcp plus classe

Cordialement.

nico5715

27 octobre 2008 à 19:38:44

J'aimerai comprendre en effet. Mais même la solution du dessus ne fonction pas.

Mallowigi

27 octobre 2008 à 19:44:33

alors désolé mais je te renvoie aux tutoriels sur le JS; si tu finis les quelques TP tu y arriveras sans trop de problemes avec ce que je t'ai expliqué.

nico5715

27 octobre 2008 à 19:48:02

Voici la le lien avec

Citation : vyk12

<script type="javascript">

</script>

http://www.nicos-pix.fr/galerie/index1.php

Y a t'il un solution plus simple. Un fonction qui dit que les liens ne sont pas activé par clik mais par passage de la souris ?

vyk12

27 octobre 2008 à 20:06:22

Supprime mon bout de code, apparemment il fonctionne pas et j'ai trop la tête dans le sceau pour y réfléchir, donc ajoute les attributs manuellement

nico5715

27 octobre 2008 à 20:13:49

Voila ce que sa donne : http://www.nicos-pix.fr/galerie/index1.php

J'ai du me trompé quelque part ?

vyk12

27 octobre 2008 à 22:46:25

En effet je me suis gouré, j'ai indiqué l'adresse de la miniature au lieu de l'adresse de l'image taille réelle. Sinon, c'est bien ce que tu veux au moins ?

Si c'est ça, il te suffit de mettre ça en attribut : javascript:window.location.href = 'urldelimage.jpg'; où tu remplaces bien sûr urldelimage.jpg par la véritable adresse de l'image

nico5715

28 octobre 2008 à 8:39:07

Le problème c'est que e n'arrive pas à intégrer le JS dans mon code php.

vyk12

28 octobre 2008 à 13:37:36

Comment ça ? Qu'est-ce que tu n'arrives pas à faire ?

nico5715

28 octobre 2008 à 15:38:03

Voila ce que ça donne :http://www.nicos-pix.fr/galerie/index1.php.

Avec ce code :

<?php if (isset($_GET['image']))
{
        $image = $_GET['image'];
        $nomimage = preg_replace('`(.+)\..*`', '$1', $image);
}
?>
<!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" xml:lang="fr" >
        <head>
                <title>Diaporama<?php if (isset($image)) {echo ' : '.$nomimage;}?></title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <style type="text/css">
                body
                        {background-color:#000000;}
                h1, p.center
                        {text-align: center;
                        color: blue;}
                a img
                        {padding: 1px;
                        border: 1px dotted gray;}
                .liste_image
                        {width: 120px;
                        height: 67px;
                        float: left;
                        text-align: center;
                        font-size: 12px;}



                </style>


        </head>
       
        <body>
    

<?php if (isset ($image))
{
        echo '    <h1>'.$nomimage.'</h1>
                <p class="center"><img src="photos/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></p>
';
}
 
$dir = 'photos/miniatures/*.{jpg,jpeg,gif,png}';
$files = glob($dir,GLOB_BRACE);
 
foreach($files as $image)
{
        $image = preg_replace('`photos/miniatures/(.+)`','$1',$image);
        $nomimage = preg_replace('`(.+)\..*`', '$1', $image);
 
        echo '      <div class="liste_image"><a  href="?image='.$image.'"  ><img src="photos/miniatures/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.' onmouseover="javascript:window.location.href = 'photos/'.$image.''  /></a><br />
                        '.$nomimage.'</div>
';
}
?>
        </body>
</html>

J'obtiens une erreur :Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\wamp\www\galerie\index1.php on line 53

Je pense que c'est un erreur de syntaxe mais je ne sais pas où.

vyk12

28 octobre 2008 à 16:16:57

Tu as oublié d'échapper des apostrophes à la ligne 53. Normalement, tu devrais facilement le voir avec la coloration syntaxique ... remplace :

<?php
...
echo '      <div class="liste_image"><a  href="?image='.$image.'"  ><img src="photos/miniatures/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.' onmouseover="javascript:window.location.href = 'photos/'.$image.''  /></a><br />
                        '.$nomimage.'</div>
';
...

par :

<?php
...
echo '      <div class="liste_image"><a  href="?image='.$image.'"  ><img src="photos/miniatures/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.' onmouseover="javascript:window.location.href = \'photos/'.$image.'\'  /></a><br />
                        '.$nomimage.'</div>
';
...
?>

nico5715

28 octobre 2008 à 19:25:10

Voila ce que ça donne avec ce que tu ma dit

....
echo '      <div class="liste_image"><a  href="?image='.$image.'" onmouseover="javascript:window.location.href = \'photos/'.$image.'\'" ><img src="photos/miniatures/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></a><br />
                        '.$nomimage.'</div>
....

et voici le lien : http://www.nicos-pix.fr/galerie/index2.php.

Ça marche mais cela ne respecte pas la structure de ordinal. Lorsque la miniature s'affiche les listes des miniatures disparait et le fond devient blanc.

Voici la page d'orignal http://www.nicos-pix.fr/galerie/index.php.

Peut être qu'il n'y à pas de solution simple ?

++
nico5715
http://www.nicos-pix.fr

edit 29/10/2008 à 10:54

J'ai réussi avec ce code

echo '      <div class="liste_image"><a  href="?image='.$image.'" onmouseover="javascript:window.location.href=\'?image='.$image.'\'" ><img src="photos/miniatures/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" /></a><br />
                        '.$nomimage.'</div>

visible ici http://www.nicos-pix.fr/galerie/index3.php.

Le problème c'est que lors de l'utilsaton avec IE7 temps que la souris est sur ma miniature le JS s'exécute. Et j'ai également l'impression que toute la page charge lorsque de chaque aperçu.

++
nico5715

vyk12

29 octobre 2008 à 21:49:06

Sinon j'ai peut-être une solution qui pourrait mieux te convenir ... essaye ça :

echo '      <div class="liste_image"><a  href="?image='.$image.'"><img src="photos/miniatures/'.$image.'" alt="'.$nomimage.'" title="'.$nomimage.'" onmouseover="javascript:this.src=\'?image='.$image.'\'" /></a><br />
                        '.$nomimage.'</div>

nico5715

4 novembre 2008 à 13:36:53

Bonjour,

mon problème est résolu; je sus passé en fash pour la galerie avec un petit menu à effet accordéon.
http://www.nicos-pix.fr

Merci beaucoup.