Agrandir une photo à partir d'une vignette sur la même page

Signaler
Messages postés
10
Date d'inscription
mardi 2 mars 2004
Statut
Membre
Dernière intervention
20 mai 2009
-
Messages postés
6
Date d'inscription
vendredi 15 mai 2009
Statut
Membre
Dernière intervention
5 juin 2009
-
Bonjour et bravo à l'aide qu'apporte ce site..

C'est la 1ère fois que je pose une question sur ce site mais je le parcours de temps en temps. Mon amie aimerait pour son site pouvoir agrandir une photo à partir d'une galerie de vignettes située en bas de page sans que cela ouvre une fenetre popup mais plutôt se superpose au contenu de la dite page. Pour être plus précis elle aimerait faire comme dans ce site http://www.compagnie-turbul.fr/ (aller à visite rapide, puis sur la page "les saintes glaces" et cliquer sur l'image). Comme on peut le voir, en bas on voit de petits vignettes et lorsqu'on passe dessus celles-ci s'agrandissent en se superposant au contenu. En naviguant de part et d'autre sur le net j'ai compris qu'un code javascript était ce qui était le mieux (voir un code dans un fichier .js pour eviter de l'avoir dans sa page html) mais voilà je ne connais pas ce language. Si quelqu'un pouvait m'aider. Pour insérer ce code dans la page html je pense que cela ne me posera pas de problème.
Merci de votre aide
denis

13 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
Bonjour,

"de nos jours", ça ce fait en pur css

tes images:hover { taille, position ....  quand on survole }
si on modifie la taille
ou alors
éléments qui contiennent l'image a par exemple:hover { background-image:url(nouvelle image quand on survole); }
si on change l'image
ou....

ne pas oublier le bon doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
voire
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

Cordialement
Messages postés
10
Date d'inscription
mardi 2 mars 2004
Statut
Membre
Dernière intervention
20 mai 2009

Bonjour,

Merci de cette réponse rapide mais je n'y arrive toujours pas. Je dois dire que je débute et pour information j'utilise dreamweaver pour faire le site. Dans les comportements, je ne vois pas bien lequel choisir car si je selectionne atteindre un URL, l'image agrandie va s'ouvrir dans une nouvelle page (ce que je trouve normal).Ce que j'aimerais c'est qu'elle s'ouvre dans la zone texte de la même page (je pense qu'il faut lui indiquer la position de cette zone?) en se superposant au texte sans que cela soit un popup et ne déforme la structure de la page. Je rappelle que mes vignettes ont été seulement placées dans la zone où il y a du texte, elles ne font pas partie de l'arrière plan.
Peut-être qu'un code complet (exemple) me permettrai d'y voir plus clair et de comprendre mieux le cheminement des actions.

Merci
Messages postés
1769
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 octobre 2020
105
bonjour
il n'y a pas d'effet mais tu peut toujour essayer avec ca

<html>
<head>
<script type="text/javascript">
 function change(imageaaffiche){
document.getElementById('coucou').src=imageaaffiche
}
</script>
</head>

</html>
Messages postés
10
Date d'inscription
mardi 2 mars 2004
Statut
Membre
Dernière intervention
20 mai 2009

bonsoir,

merci pour ce script kazma. L'image change bien mais le problème est qu'elle ne passe pas en avant plan du texte (pas de superpositon comme dans le site auquel j'ai fait référence dans mon premier message). Une idée?
De plus j'aimerais que lorsque la souris ne passe plus devant la vignette que la photo agrandie disparaisse.

Merci
Messages postés
1769
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 octobre 2020
105
essai comme ca

<html>
<head>
<script type="text/javascript">
 function change(imageaaffiche){
if(imageaaffiche=='invisible'){
document.getElementById('coucou').style.visibility='hidden'
}
else{
document.getElementById('coucou').style.visibility='visible'
document.getElementById('coucou').src=imageaaffiche
}
}
</script>
</head>

</html>
Messages postés
10
Date d'inscription
mardi 2 mars 2004
Statut
Membre
Dernière intervention
20 mai 2009

Impeccable pour l'apparition et disparition mais toujours ce foutu problème au niveau de mettre en avant plan l'image agrandie. Quand je survolle la vignette en bas de page, l'image agrandie (placée en milieu de page) ne va pas se superposer sur le texte mais va s'intercaler au milieu du texte et de plus quand elle disparait elle laisse la place qu'elle a occupé vide.
Existe-t-il une commande pour superposer une image sur du texte?
Encore merci pour cette aide.
Messages postés
1769
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 octobre 2020
105
pour la sperposition il y a le zIndex l'image doit avoir un zIndex supérieure au texte le script que j'ai mis ne supprime pas l'image il joue sur la visibilite donc quand la souris n'est plus sur l'image elle devient invisible et en toute logique laisse aparetre le texte qui se trouve en dessous.

pour l'image

et pour le texte zIndex:1

ou alors tu cree la balise img apres la balise de texte car la logique css veut que un bloc cree apres un autre soit au dessus de celui ci
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
<style>
    .img_01             {     background-image:url(compass.jpg); }
    .img_01:hover    {     background-image:url(Arret.png); }
</style>

    [# lien]

exemple, en remplaçant par une image plus grande
adpter pour l'afficher ailleurs, ou [ne] jouer [qu']avec la taille
          tu devrais pouvoir y arriver
@+
Messages postés
10
Date d'inscription
mardi 2 mars 2004
Statut
Membre
Dernière intervention
20 mai 2009

Merci beaucoup à vous deux : je viens de réussir à obtenir ce que je voulais !


Bonne soirée,


 
Messages postés
3
Date d'inscription
vendredi 1 mai 2009
Statut
Membre
Dernière intervention
2 mai 2009

bonjour,

<script type="text/javascript">
 function change(imageaaffiche){
document.getElementById('photo').src=imageaaffiche
}
</script>
<?php


$sql "SELECT filepath,filename,numero,nom FROM photo WHERE nom '".mysql_real_escape_string($_GET['nom'])."' AND numero = '1'";
$req = mysql_query($sql) or die('Erreur SQL !
'.$sql.'
'.mysql_error());
$data = mysql_fetch_array($req);


$sql2 "SELECT filepath,filename,numero,nom FROM photo WHERE nom '".mysql_real_escape_string($_GET['nom'])."'";
$req2 = mysql_query($sql2) or die('Erreur SQL !
'.$sql2.'
'.mysql_error());




echo '';
echo '
';
while ($data2 = mysql_fetch_array($req2)){
echo '';
}
?>

les photos s'affiche, mais le onmouseover ne fonctionne pas, losque je pass la souris sur la photo l'image ne change pas.

Merci de votre aide.

je suis vraiment un debutant
Messages postés
10
Date d'inscription
mardi 2 mars 2004
Statut
Membre
Dernière intervention
20 mai 2009

Bonsoir,

Grâce à kazma, j'ai réussi à faire cette action. Voici les codes que j'ai mis dans head.
<style><![CDATA[permet de positionner l'image et à l'aide de z-index de mettre l'image en avant plan du texte. coucou c'est juste le nom de l'image cela aurait pu être autre chose.


<style type="text/css">
]]><!--
#texte {
z-index: 1;
}
#coucou {
z-index: 2;
left: 448px;
top: 305px;
position: absolute;
height: auto;
}
--></style>

Ensuite dans body j'ai mis id="texte" au niveau du texte juste aprés

, j'ai mis:



'd4g.jpg' n'existe pas c'est juste pour mettre le cadre de l'image.

Et pour finir l'action de la souris, pour chaque image:


J'espère que j'ai été clair car moi aussi je débute mais comme je l'ai mentionné c'est grâce à l'aide de kazma et ausside bul3 (qui propose aussi une autre solution si tu va voir dans ma demande sur ce sujet) que j'ai réussi.

Voilà
Messages postés
10
Date d'inscription
mardi 2 mars 2004
Statut
Membre
Dernière intervention
20 mai 2009

Bonsoir,

Grâce à kazma, j'ai réussi à faire cette action. Voici les codes que j'ai mis dans head.
<style> permet de positionner l'image et à l'aide de z-index de mettre l'image en avant plan du texte. coucou c'est juste le nom de l'image cela aurait pu être autre chose.

<script type="text/javascript">
function change(imageaaffiche){
if(imageaaffiche=='invisible'){
document.getElementById('coucou').style.visibility='hidden'
}
else{
document.getElementById('coucou').style.visibility='visible'
document.getElementById('coucou').src=imageaaffiche
}
}
</script>
<style type="text/css">
<!--
#texte {
z-index: 1;
}
#coucou {
z-index: 2;
left: 448px;
top: 305px;
position: absolute;
height: auto;
}
-->
</style>

Ensuite dans body j'ai mis id="texte" au niveau du texte juste aprés
</td>, j'ai mis:


J'espère que j'ai été clair car moi aussi je débute mais comme je l'ai mentionné c'est grâce à l'aide de kazma et ausside bul3 (qui propose aussi une autre solution si tu va voir dans ma demande sur ce sujet) que j'ai réussi.

Voilà
Messages postés
6
Date d'inscription
vendredi 15 mai 2009
Statut
Membre
Dernière intervention
5 juin 2009

Salut,

J'ai utilisé ce script mais j'ai un problème car dans mes photos, j'en ai 2 qui sont vertical et donc, s'étirent quand elles sont affichées.

Avez-vous une solution pour donner la dimension voulues au photos qui s'affichent en plus grand ?

Merci de votre aide