begin process at 2012 05 29 01:28:21
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Fonctionnement d'une propriété d'un navigateur

 > 

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

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

samedi 18 avril 2009 à 22:06:30 | Agrandir une photo à partir d'une vignette sur la même page

mquisuisje
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 [ Lien ] (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
dimanche 19 avril 2009 à 08:24:31 | Re : Agrandir une photo à partir d'une vignette sur la même page

Bul3

Membre Club


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 [mon Site] [M'écrire] Bul
dimanche 19 avril 2009 à 17:53:15 | Re : Agrandir une photo à partir d'une vignette sur la même page

mquisuisje
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
dimanche 19 avril 2009 à 19:08:19 | Re : Agrandir une photo à partir d'une vignette sur la même page

kazma

Administrateur CodeS-SourceS
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>
<body>
<img id ='coucou' src ='d4g.jpg'>
<br>
<img src ='d1.jpg'onmouseover="change('d1g.jpg')">
<img src ='d2.jpg'onmouseover="change('d2g.jpg')">
<img src ='d3.jpg'onmouseover="change('d3g.jpg')">
</body>
</html>
dimanche 19 avril 2009 à 20:26:10 | Re : Agrandir une photo à partir d'une vignette sur la même page

mquisuisje

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
dimanche 19 avril 2009 à 20:46:40 | Re : Agrandir une photo à partir d'une vignette sur la même page

kazma

Administrateur CodeS-SourceS
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>
<body>
<img id ='coucou' src ='d4g.jpg' style='visibility:hidden'>
<br>
<img src ='d1.jpg'onmouseover="change('d1g.jpg')"onmouseout="change('invisible')">
<img src ='d2.jpg'onmouseover="change('d2g.jpg')"onmouseout="change('invisible')">
<img src ='d3.jpg'onmouseover="change('d3g.jpg')"onmouseout="change('invisible')">
</body>
</html>
dimanche 19 avril 2009 à 21:44:37 | Re : Agrandir une photo à partir d'une vignette sur la même page

mquisuisje
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.
dimanche 19 avril 2009 à 23:07:08 | Re : Agrandir une photo à partir d'une vignette sur la même page

kazma

Administrateur CodeS-SourceS
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

<img id ='coucou' src ='d4g.jpg' style='visibility:hidden; zIndex:2'>

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
lundi 20 avril 2009 à 10:48:19 | Re : Agrandir une photo à partir d'une vignette sur la même page

Bul3

Membre Club
<style>
    .img_01             {     background-image:url(compass.jpg); }
    .img_01:hover    {     background-image:url(Arret.png); }
</style>
<body>
    <a href="#" class="img_01">lien</a>
</body>

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
@+
lundi 20 avril 2009 à 21:44:46 | Re : Agrandir une photo à partir d'une vignette sur la même page

mquisuisje

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

Bonne soirée,

 

1 2

Cette discussion est classée dans : page, site, partir, photo, agrandir

Répondre à ce message

Sujets en rapport avec ce message

Ouverture simultanée de deux pages. [ par SilverNitrate ] Bonjour,Je voudrais savoir si il est possible, à partir d'un script, d'ouvrir une seconde page dérrière la première sachant que celle ci est l'index d Barre de chargement et XMLHTTPRequest [ par massacr ] Bonjour Je construit un site utilisant les XMLHTTPRequest. Une zone de la page est rechargée lorsque on clique sur un bouton du menu. Je voudrais affi javascript et photo [ par nico11 ] je suis débutant - un copain m'a fait un bon site de mes photographies - mais le copain n'est plus très accessible - alors comme je voudrais référence IFrame [ par SamyAir ] Bonjour,J'ai un probléme avec  mon site.......Voila j'ai créer un site web pour une pizzeria et j'ai un ptit souci avec la vente en ligne.......J'ai c IFrame [ par SamyAir ] Bonjour,J'ai un probléme avec  mon site.......Voila j'ai créer un site web pour une pizzeria et j'ai un ptit souci avec la vente en ligne.......J'ai c Rafraichissment d'une iframe à partir d'une autre iframe [ par Neoninji ] Bonjour à toutes et à tous,J'ai une page contenant 2 iframes.J site en Frontpage [ par marcod59 ] Bonjour à tous,Je ne connais rien à javascript, mais je fais un peu de VB. Dond j'ai quelques bases en programmation.Je voudrais faire un site avec Fr Découpage d'une image [ par ecoll_manu ] bonjour à tousvoilà ce n'est pas aisé ce que je souhaite faire, mais je ne vois pas d'autre solution pour le faire.Je vous explique ce que je désirera Page web blanche... parfois [ par vh35720 ] BonjourJ'ai créé un petit site internet de promotion de mes chambres d'hotes (à partir de Dreamweaver). Ca se passe bien sauf que certains internautes Envoi de variables [ par Leneuf8000 ] Bonjour, voilà j'ai un petit script en Javascript qui me permet de compter le nombre de visiteurs sur un site. Ce script est intégré par l'intermédia


Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Underwater
Photo Marine life 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,295 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)