begin process at 2012 05 30 09:07:05
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Zoom sur image au passage dur curseur et affichage dans une même fenêtre

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

Zoom sur image au passage dur curseur et affichage dans une même fenêtre

samedi 26 août 2006 à 22:51:06 | Zoom sur image au passage dur curseur et affichage dans une même fenêtre

amewole

Membre Club
Voici mon problème :
Je dois mettre en place un système d'affichage d'un ensemble de photos (vignettes) rangé dans un tableau html et qui s'affiche une à une grand chaque fois que la souris passe sur chaque photo.
Disons que c'est ce qui est fait sur le site dont l'adresse est la suivante.

http://www.immoscript.net/demo_v2/index.php?root=5&II=117&click=1
dimanche 27 août 2006 à 16:32:50 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

tonytruand

bonjour,

 

on peut s'inspirer de ceci

 

<html>
<head>
<title></title>
<SCRIPT language=Javascript>
 <!--
 function changeImageInfo(imageURL,title)
  {
  document.big_image.src = imageURL;
  document.image_form.image_title.value = title;
  }
 //-->
 </SCRIPT>
</head>

<body bgcolor="#FFFFFF" text="#000033">

                  <TABLE border=0 align="center" cellPadding=0 cellSpacing=1>
                    <TR>
                     <TD align=middle colSpan=5>
                        <FORM style="MARGIN: 0px" name=image_form>
                                                    <INPUT name=image_title class="BOX4"
                  style="BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 298px; BACKGROUND-COLOR: transparent; BORDER-RIGHT-WIDTH: 0px"
                  value="vue La Grave / St Pierre">
                        </FORM>
                      </TD>
                    </TR>
                    <TR>
                      <TD colSpan=5> <IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=400 alt=""
                  src="capitole1.jpg"
                  width=400 border=0 name=big_image> </TD>
                    </TR>
                    <TR>
                                            <TD width=60 align="right"><A
                  onmouseover="changeImageInfo('capitole2.jpg','Cuisine');return false;"
                  onmouseout="changeImageInfo('capitole1.jpg','vue La Grave / St Pierre');return false;"
                  href="javascript://"><IMG
                  style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=39 alt="Cuisine"
                  src="capitole2.jpg"
                  width=56 border=0></A></TD>
                                            <TD width=60><A
                  onmouseover="changeImageInfo('colsa.jpg','Fenêtre balcon');return false;"
                  onmouseout="changeImageInfo('capitole1.jpg','vue La Grave / St Pierre');return false;"
                  href="javascript://"><IMG
                  style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=39 alt="Fenêtre balcon"
                  src="colsa.jpg"
                  width=56 border=0></A></TD>
                                            <TD width=60><A
                  onmouseover="changeImageInfo('eye.gif','Carrelage séjour');return false;"
                  onmouseout="changeImageInfo('capitole1.jpg','vue La Grave / St Pierre');return false;"
                  href="javascript://"><IMG
                  style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=39 alt="Carrelage séjour"
                  src="eye.gif"
                  width=56 border=0></A></TD>
                                            <TD width=60><A
                  onmouseover="changeImageInfo('banjsf2.gif','Vue sur Bazacle');return false;"
                  onmouseout="changeImageInfo('capitole1.jpg','vue La Grave / St Pierre');return false;"
                  href="javascript://"><IMG
                  style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=39 alt="Vue sur Bazacle"
                  src="banjsf2.gif"
                  width=56 border=0></A></TD>
                                            <TD width=60><A
                  onmouseover="changeImageInfo('earth.gif','Vue sur place Intérieure Saint Cyprien');return false;"
                  onmouseout="changeImageInfo('capitole1.jpg','vue La Grave / St Pierre');return false;"
                  href="javascript://"><IMG
                  style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=39 alt="Vue sur place Intérieure Saint Cyprien"
                  src="earth.gif"
                  width=56 border=0></A></TD>
                                          </TR>
                  </TABLE>
                 
                </TD>
              </TR>
                           
</table>
 
</body>
</html>

[:D][:)]
lundi 28 août 2006 à 01:19:22 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

amewole

Membre Club
Salut,
Je vais essayer le code pour voir..
Meci d'avance !!
lundi 28 août 2006 à 02:20:10 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

amewole

Membre Club
Merci monsieur tonytruand,
Je suis agréablement très surpris par votre code qui marche impec/pil/poil...
Je n'ai pas encore fait les amenagements que je compte faire(je vais intégrer cela dans du code php) mais Grand Bravo pour l'aide..
Si je comprends bien je pense qu'il est temps que je me mette sérieusement au feuille de style css n'est ce pas ?
Vos conseils sont les biens venus..

Merci.
vcl.
samedi 21 mars 2009 à 02:20:05 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

rebois
Bonjour tonytruand,

Votre code css mainteresse grandement, mais j ai pas compris comment l integrer dans un site et comment le modifier serezt-il possible que vous m expliquiez s-il vous plait

Merci par avance.
mardi 12 mai 2009 à 17:13:49 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

playdual
Bonjour. Mon premier message sur ce site qui pour l'instant m'est d'une grande aide. Je doit créer un cheminement de page html afin d'orienter les utilisateurs. Ils doivent répondre aux questions et à la fin je leur propose une liste de deux ou trois produits qui correspondent à leur critères. Je cherche à faire un lien entre le nom du produit (afficher sur la page) et une ligne de tableau. Le problème est que je souhaite afficher ces lignes de tableau sur la même page et surtout simultanément. J'ai donc penser à un zoom image. Je pensais que le code ci dessus pouvait servir en utilisant different cadre de destination. J'abuse même en vous demandant si il n'est pas possible d'afficher automatiquement les lignes de mes tableau (qui sont sous format html) c'est la première fois que je programme et je vous avoue que je suis perdue :( Merci d'avance
mercredi 13 mai 2009 à 10:14:23 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

playdual
Bon j'ai réussi en copiant le code et en ne m'étant qu'un choix et qu'une case destination et en faisant cela plusieurs fois sur la page. J'ai aussi enlever le code afin que mon image reste afficher. Mon problème est maintenant que je n'arrive pas à mettre la petite case à gauche de la case de destination. (seulement a droite ou en dessous). Sauriez vous qu'elle est la partie correspondante à ce positionnement. Merci bcp
mercredi 13 mai 2009 à 15:18:51 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

playdual
Bon je m'excuse pour les message précédent que j'ai finalement résolue. (je crois) =) Voila ce que j'ai réussi à faire: Voila je souhaite mettre deux ou trois zoom comme ça sur ma page. Le problème est que seul le dernier cadre affiché est pris en compte et sers de zoom. Je ne vois vraiment pas ce que je peux faire (partager la pages? nommer les cadres?). En tout cas merci pour ce code qui m'a grandement facilité la tache. En espérant que vous puissiez me venir en aide.
mercredi 13 mai 2009 à 15:19:51 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

playdual
ok je débute vraiment j'avais copier coller mon code. Dsl pour l'encombrement.
mercredi 13 mai 2009 à 15:23:21 | Re : Zoom sur image au passage dur curseur et affichage dans une même fenêtre

playdual
Code pas code???

<head>
<title></title>
<SCRIPT language=Javascript>
<!--
function changeImageInfo(imageURL,title)
  {
  document.big_image1.src = imageURL;
  document.image_form1.image_title1.value = title;
  }
//-->
</SCRIPT>
</head>

</div>
<p><br>
  <br>
</p>



<body bgcolor="#FFFFFF" text="#000033">

                

<div align="center"></div>
<p>  
    

</p>
<div align="center"></div>


<A
                  onmouseover="changeImageInfo('gctc_lszh_renfort_am_nexans_uc_fichiers/tableau_gctc_lszh_renfort_am_nexans_uc.jpg','GCTC LSZH renfort AM NEXANS UC');return false;"
                
                  href="javascript://"><IMG
                  style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=30 alt="GCTC LSZH renfort AM NEXANS UC"
                

                  width=320 border=></A>            
  
                  <TD width="285" align="top"><a href="gctc_lszh_renfort_am_nexans_uc_fichiers/gctc_lszh_renfort_am_nexans_uc.jpg">
<img src="gctc_lszh_renfort_am_nexans_uc_fichiers/image001.jpg" width="90" height="25" border="1" align="top" </a></TD>
  
  

<TR>
                      <TD colSpan=5> <IMG style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
                  height=100 alt=""
                  src="Tableau"
                  width=1200 border=0 name=big_image1> </TD>
                    </TR>
                    
<TR>
                                          

</body>
</SCRIPT>


Cette discussion est classée dans : image, passage, dur, affichage, zoom

Répondre à ce message

Sujets en rapport avec ce message

zoom au passage de la sourie [ par shefentekheux ] Bonjour, j'aimerais savoir si c'est possible et comment faire un effet de zoom sur certaines parties d'une image lorsqu'on passe la souris sur ces zo Zoom d'image PROPRE au passage de la souris [ par SoundBoy771 ] Bonjour à tous !Après quelques recherches infructueuses sur google, je me tourne vers vous ^^.Je chercher un bout de code qui permet de faire un zoom image change au passage de la souris [ par sonialand ] salut tout le monde,est ce que qqun pourra me dire comment je dois faire pour changer l'image au passage de la souris?merci :) Salut a tous : activer desactiver balise href [ par Strasha ] Tout est dans le titre Je dispose d'un script qui me donne un zoom sur image.Probleme a chaque fois que je clique sur l'image il m'ouvre un nouveau Faire un zoom d'image a l'endroit du curseur [ par YanDerS ] Je cherche depuis un bout de temps a faire un zoom sur une image a l'endroit du curseur avec la roulette de la sourie mon code actuellement me permet Zoom genre loupe sur image [ par Annadrill ] Bonjour, voilà, j'essaie de réaliser quelque chose de ce genre http://www.magictoolbox.com/magicmagnify/ mais je ne sais pas par ou commencer, m'y co Effet loupe popup au passage de la souris [ par tendres ] Bonjour, J'aimerai utiliser un système de zoom dans une popup au passage de la souris sur une image/photo dans n'importe quel format (portrait /paysa Zoom sur une image en ajax [ par ircland ] Bonjour,mes niveau de ajax etant nul, et de javascript moyen, je cherche une source qui me permet de zoomer sur une image onmouseover, enfait je veux Zoom "décalé" sur image [ par aloisio11 ] Bonjour à tous, Voici un lien :http://www.habitat.fr/fcp/product/browse/Structure-de-chaise-longue-(toiles-vendues-sépa Affichage image caroussel 3D [ par webide ] Bonjour,J'ais un souci d'affichage avec le script Caroussel 3D tiré du site hot ajax Sur mon pc


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

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 : 2,980 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)