rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Fenêtre flottante onclicket mouseover

Posté par chocolat2006, le mercredi 7 novembre 2007 à 21:30:32
Bonjour,

J'ai vraiment beau essayer, je suis vraiment pas une lumière mais je veux y croire et y arriver. Voilà, je cherche:


1 sur http://www.kreavie.ca/compagnie/index.html il y a des lire plus :ici je veux mettre une fenêtre flottante genre onclick (pour chaque lire plus), je sais vous aller me dire que c'est du Java script, ok j'ai compris le concept, mais pourriez-vous SVP soit me l'expliquer comme à une enfant de 2 ans ou me donner des liens qui m'explique bien les choses.

2 sur mon site je vais avoir des photos de créations et produite et ici j'aimerai lorsque je pointe la souris dessus qu'une fenêtre genre mouseover montre la photo plus grande et ici pareil, pas moyen d'y arriver.

Cela fait 1 semaine que je cherche , essaie toutes les possibilités mais rien, alors comme je sais que vous êtes tous super doués et que vous connaissez super bien ce domaine, je viens vers vous.

Je vous remercie humblement de m'aider et de me sortir de ce cauchemard.

Merci merci
Chocolat
Configuration: Windows XP
Firefox 2.0.0.8
Répondre à chocolat2006  Signaler ce message aux modérateurs Aller au dernier message
61 réponses 12

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mercredi 7 novembre 2007 à 21:42:39
salut l'enfant de deux ans !

en premier il faut mettre le code Javascript d'une fonction qui va ouvrir la popup, elle prend comme argument le nom du fichier qu'elle va afficher (à mon avis c'set le plus simple).
le plus simple est de le mettre dans une balise '<script>' à l'intérieur de '<head>'. 
<script type="text/javascript">
function displayPopup(fichier)
{
window.open(fichier,"","width=640,height=4801­,left=200,top=200,toolbar=no,location=no,directories=no,stat­us=no,menubar=no,scrollbars=yes ,resizable=no");
}
</script>

ensuite tu appelles cette fonction depuis ton lien en indiquant le fichier à afficher et tu ajoutes le même fichier en cible du lien comme ça même si JS est désactivé, le visiteur peut lire l'info. le 'return false;' c'est pour désactivé le lien. 
<a href="monfichier.html" onclick="displayPopup('monfichier.html'); return false;">lire plus </a>

bon faut encore le tester, je l'ai tapé directement !

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le mercredi 7 novembre 2007 à 21:52:20
merci, mais ça c'est pour les photo ou pour la fenêtre flottante contenant un texte?? car je ne sais pas.
Faut que pour mon fichier je crée une autre fenêtre, car j'ai déjà essayé ça:

"Salut chocolat,


Pour t'expliquer en français le contenu de la page dont tu as fourni le lien...

Tu dois télécharger le fichier JavaScript et le placer dans le même répertoire que ta page. Sur cette page tu t'assures que dans le header, le code en gras soit présent :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Floating Window</title>
<script src="Drag.js"></script>
</head>


Ensuite dans le corps (<body>) de ta page HTML, il faut que tu définisses un bloc qui ressemble à ceci (ce qui est en gras est l'appel au Drag):

<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a; display:none;">
<div style="padding-bottom:8px; width:400px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">
<div style="position:absolute; top:2px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Drag me!</div>
</div>
</div>


C'est donc le deuxième bloc DIV (celui imbriqué au premier qui porte l'id "window") qui contient l'appel à la fonction Drag. Il est essentiel de le placer dans le premier bloc que tu vas reprendre tel quel. Et normalement ça devrait aller." et NON cela n'a pas été.

et j'ai aussi essayé ceci:

"salut

Bon une autre solution qui marche pas mal

dans le <head></head> te ta page tu y mets



<SCRIPT LANGUAGE="JavaScript">
<!--
function PopupImage(img) {
titre="Agrandissement";
w=open("",'image','width=700,height=500

,toolbar=no,scrollbars=no,res izable=no');
w.document.write("<HTML><HEAD><TITLE>­"+titre+"</TITLE& gt;</HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+15,document.images[­0].height+60); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>");
w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt='delice de pierre'>");
w.document.write("</TD></TR></TABLE>&­quot;);
w.document.write("</BODY></HTML>");
w.document.close();
}
//-->
</SCRIPT>


en gras ce que tu peu modifier pour l affichage

dans la partie où tu as l image (vignette/logo) tu y mets ceci

<p align="center"><A href="javascript:PopupImage('nom_de_l_image_grand_forma­t.jpg')"><IMG src="nom_de_l_image_vignette.jpg" alt="Cliquer pour agrandir" border="0" class="image"></A></p>
<p align="center"> </p>



la aussi tu mets le nom des deux images 1 la grande 2 la petite


tout code dois être sur la même page (le mien) pas de page en plus , juste une insertion du script et du code." et VRAIMENT RIEN, bah si un truc vraiment étrange.
C'est pour cela que je dis enfant de deux ans.Mais j'essaie TOUT DE SUITE.

et je garde espoir afin de rester amie avec la création de site web.

Merci Dalida
   
Répondre à chocolat2006

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le mercredi 7 novembre 2007 à 21:57:31
euh...qu'entends par là :"ensuite tu appelles cette fonction depuis ton lien en indiquant le fichier à afficher et tu ajoutes le même fichier en cible du lien comme ça même si JS est désactivé, le visiteur peut lire l'info. le 'return false;' c'est pour désactivé le lien
   
Répondre à chocolat2006

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mercredi 7 novembre 2007 à 22:03:33
le plus simple (à mon avis) pour afficher une popup c'est de faire un fichier html simplifié à côté qui contient les infos à afficher.
pour que la fonction ouvre le fichier il faut lui indiquer lequel c'est.

j'ai fait un exemple pour une autre question.
le premier fichier permet d'en afficher un deuxième.
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mercredi 7 novembre 2007 à 22:00:16
moi c'était pour afficher la suite du texte.
pour les images ta deuxième proposition me semble pas mal.

tu en es où, tu as essayé quoi, qu'est-ce que ça donne ?

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le mercredi 7 novembre 2007 à 22:19:21
rrr, ça ne marche pas, bah la première solution, il voit juste le lien et c'est tout. Mais le plus drôle, c'est que j'aimerais que la fenêtre flottante soit à l'intérieur de ma fenêtre principale pour ne pas faire paniquer les gens
honnêtement je dois trouver la solution car cela une semaine que je plante là-dessus et pour l'affaire des photos, un peu comme sur istockphotos.com

attends je regarde comment ils ont pour les photos

mais les pop-ups internes sont tout aussi importants
   
Répondre à chocolat2006

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mercredi 7 novembre 2007 à 23:01:11
pour le "lire plus"
que penses-tu de cette façon ?
pure CSS !!!

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le jeudi 8 novembre 2007 à 19:08:10
WOW, là tu m'impressionnes vraiment et c'est vraiment mieux que ce que j'espérais, comment je peux faire ça??

Franchement Dalida, mille merci car tu m'as redonné la joie
   
Répondre à chocolat2006

9


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le jeudi 8 novembre 2007 à 19:56:40
Tu es un amour et génial, j'ai regardé comment t'as fait et j'ai réussi, c'est trop cool. Maintenant sais-tu si en pointant sur une petite photo par le même procédé je peux la faire apparaitre plus grande?? ce serait réellement parfait.


merci, merci, merci Dalida
   
Répondre à chocolat2006

10


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le vendredi 9 novembre 2007 à 00:37:37
salut,

ben didon !
quel débordement de joie !!!

je n'ai fait que t'aider et nous sommes tous là pour ça !
mais ça fait grandement plaisir de te lire !!!

pour la photo, dis nous ce que tu veux obtenir et on essaiera de t'aider.
mais à une condition : que ce que l'on te donne te permette de progresser !

je suis persuadé qu'il faut simplement faire la même chose.
en te guidant un peu, tu vas le faire toute seule…
partante ?

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

11


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le vendredi 9 novembre 2007 à 02:06:33
Avant de voir que j'avais reçu une réponse, j'ai effectué (du moins préparé) tous mes "lire plus" et "read more" en attendant mes textes, maintenant il me faut connaitre comment faire pour lorsque tu pointe la souris (genre mouseover) sur une petite photo, elle apparait plus grande genre comme istockphoto.com . dans le fond comme ce que tu m'as appris à faire mais pour les photos, ce qui me fera gagner beaucoup d'espace sur mon hébergeur.

Merci beaucoup pour tes explications et pour te rassurer, OUI cela me permet de progresser beaucoup, c'est le troisième site web que je fais mais celui-ci est pour moi plus complexe.

Chocolat.
   
Répondre à chocolat2006

12


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le vendredi 9 novembre 2007 à 09:21:03
salut,

désolé si je suis lourd avec mon laïus sur l'apprentissage mais c'est du travail de pro et il ne faut pas que le forum devienne un prestataire gratuit pour les studios de webdesign. que tu viennes te former ici personnellement pour mieux faire ton boulot c'est important mais il ne faut pas que nous soyons juste là pour boucler les projets des pros qui manquent de technique !

pour un affichage genre mouseover avec css le principe est simple.
un conteneur qui sera la zone réactive, on va prendre '<a>' par exemple.
un élément contenu par le précédent qui sera masqué par défaut et affiché au survol du conteneur.
pour ne pas que l'élément contenu ne fasse pas bouger la mise en forme en apparaissant il faut lui appliquer {position:absolute;}.

après ça peux se compliquer selon le positionnement que tu cherches.

pour celui que tu veux, je n'ai pas trouvé le même mais regarde celui-là et les autres dans les demos.

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

13


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le vendredi 9 novembre 2007 à 16:50:44
Salut,

Non tu n'es pas lourd, c'est juste que tu ne veux pas faire prospérer la concurrence et je comprends mais ne t'inquiètes pas je ne fais pas de webdesign en général, mais du chocolat et autre. Mais c'est moi qui fait mon site car je sais ce que je veux!!!

J'ai vu le lien mais c'est pas ça que je cherche, je cherche plutôt un truc comme ça

http://www.istockphoto.com/file_search.php?action=Browse&Cac­he=21919082&page=48

car mes photos vont se trouver sur mon panier d'achat et j'aimerai que les clients puissent avoir un effet de plus gros

j'ai aussi trouvé ça mais je suis pas forte en anglais

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm#

et pour finir, je crois comprendre que le mieux ce serait de le rentrer dans mon fichier css

On va y arriver et en plus je dois finir ce site web pour lundi...houlala...car mes clients veulent voir mes produits.

Merci Dalida
   
Répondre à chocolat2006

14


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le vendredi 9 novembre 2007 à 16:59:52
j'ai oublier c'est pour aller ici

http://www.kreavie.ca/produits/stylos.ca
   
Répondre à chocolat2006

15


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le vendredi 9 novembre 2007 à 18:09:50
le problème c'est que ton lien ne fonctionne pas !
The search query you entered did not find any matching results.
voila ce qu'il me répond, tu es peut être loguée quand tu accèdes à la page.

et pour le tien :
Not Found
The requested URL /produits/stylos.ca was not found on this server.

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

16


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le vendredi 9 novembre 2007 à 20:47:37
beh non c'est sûr je me suis tompée hihihi

http://www.kreavie.ca/produits/stylos.html

cela fonctionne
   
Répondre à chocolat2006

17


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le vendredi 9 novembre 2007 à 21:43:04
et au clic tu veux une image de quelle taille ?
donne moi l'url d'une grande image stp !

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

18


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le vendredi 9 novembre 2007 à 22:14:29
voici Dalida

http://www.kreavie.ca/images/stylos/SOSO.2.jpg

et la taille 250x333 est-ce trop gros??

au cas où, est-ce que je peux changer la taille toute seule après car j'ai aussi un autre modèle de photo:

http://www.kreavie.ca/images/Lampions/large/Ensemble-GLBV.gi­f

mais pour celles-là la photo de la page web n'est pas la même comme tu vas le voir (mais je pense que j'ai juste à préciser dans le code la bonne photo à agrandir, non??)

http://www.kreavie.ca/produits_lampions_Fr.htm

merci, merci

j'ai hâte d'avoir ta réponse
   
Répondre à chocolat2006

19


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le vendredi 9 novembre 2007 à 23:21:24
re,

voila m'dame la présidente !
-:oD 

<style type="text/css">
table#AutoNumber5 tr td a
{
outline:1px solid #000;
}
table#AutoNumber5 tr td a span
{
position:absolute;
display:none;
background-color:#000;
padding:2px;
border:2px solid #c0c0c0;
}
table#AutoNumber5 tr td a:hover span
{
display:block;
}
</style>

~~~~~~~~~~~~~~~~~~~~~~~~~~ 
<td height="102" width="76">
	<a onclick="return false;" href="http://www.kreavie.ca/images/Lampions/large/Ensem­ble-GLBV.gif">
		<span>
			<img src="http://www.kreavie.ca/images/Lampions/large/Ensemb­le-GLBV.gif" border="2" height="250" width="333">
		</span>
		<img src="http://www.kreavie.ca/images/Lampions/GLBV.gif&quo­t; border="2" height="96" width="72">
	</a>
</td>



tu peux modifier l'apparence et dans une moindre mesure la position.

pour les prochains sites il faudrait que tu laisses tomber les tableaux !!!
-;o)

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

20


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le vendredi 9 novembre 2007 à 23:46:02
Dalida tu m'épates trop vraiment bon alors, ça

<style type="text/css">
table#AutoNumber5 tr td a
{
outline:1px solid #000;
}
table#AutoNumber5 tr td a span
{
position:absolute;
display:none;
background-color:#000;
padding:2px;
border:2px solid #c0c0c0;
}
table#AutoNumber5 tr td a:hover span
{
display:block;
}
</style>


je le mets une seule fois?! c,est ça??

et ça a chaque photo?? en changeant le href bien sur! :)
<td height="102" width="76">
<a onclick="return false;" href="http://www.kreavie.ca/images/Lampions/large/Ensem­ble-GLBV.gif">

<span>
<img src="http://www.kreavie.ca/images/Lampions/large/Ensemb­le-GLBV.gif"
border="2" height="250" width="333">
</span>
<img src="http://www.kreavie.ca/images/Lampions/GLBV.gif&quo­t;
border="2" height="96" width="72">
</a>
</td>

Est-ce qu'on faire un type css. pour mes pages de produits où il y aura des photos??
Et pourquoi c'est pas bien les tableaux et as-tu d'autres propositions pour que cela fasse panier d'achat car je connais que ce style là

merci
   
Répondre à chocolat2006

21


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le samedi 10 novembre 2007 à 00:21:25
pourquoi c'est pas bien les tableaux
normalement il ne faudrait utiliser les tableaux que pour présenter des données comme des statistiques par exemple mais jamais pour faire de la mise en page.
en passant à CSS tu sortirais toutes les balises de style qui trainent dans ton code, c'est plus lisible, ça évite les redondances (et donc tu y gagnes en poids, même si c'est peu) et c'est beaucoup plus facile à coder et à maintenir.

regarde cet article pour voir comment faire autrement.
tu peux aussi lire les autres tutoriaux, ils sont tous indipensables !


pour ta mise en page il faut en effet changer les trois url pour chaque image et une seule fois la balise de style.
dans l'idéal il faudrait aussi renseigner l'attribut 'alt' de chaque '<img />' avec une petite description. 
<img src="http://www.kreavie.ca/images/Lampions/large/Ensemb­le-GLBV.gif" 
alt="lampion tartemplume"  height="250" width="333">


Est-ce qu'on faire un type css. pour mes pages de produits où il y aura des photos?
tu peux faire une ou plusieurs feuille de style pour chaque document.
et tu peux définir des règles de style pour chaque balise html.

as-tu d'autres propositions pour que cela fasse panier d'achat
le plus simple est d'aller prendre des idées à droite et à gauche sur les sites marchands qui te plaisent (sans pour autant piquer le design en entier !).

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

22


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le samedi 10 novembre 2007 à 00:22:17
j'ai po réussi, :(
j'ai essayé ici

http://www.kreavie.ca/produits/cadre-stylos.html

mais le résultat donnait que tout était décalé et horrible

pourtant j'ai fait comme toi, j'ai juste changé la couleur du cadre.

Est-ce que je dois via photoshop redimensionner et sauver en GIF??

Je crois que oui ce qui est donc une question idiote.
   
Répondre à chocolat2006

23


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le samedi 10 novembre 2007 à 00:33:13
mais le résultat donnait que tout était décalé et horrible
chez moi rien ne se passe.

pourtant j'ai fait comme toi
ce ne dois pas être la bonne version dans le code que j'ai vu il n'y a rien qui y ressemble.

Est-ce que je dois via photoshop redimensionner et sauver en GIF??
qui, que, quoi ???
et tu devrais utiliser 'PNG' si il n'y a pas de transparence, le format est meilleur.

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

24


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le samedi 10 novembre 2007 à 00:52:37
bon pour les tableaux, dès que j'ai le temps je les changerais

mais là je ne comprends pas

est-ce qu'on ressayer ici??

http://www.kreavie.ca/produits/cadre-stylos.html

car je ne travaille plus sur celui avec le fond noir, il a été fait avec Frontpage , alors que le nouveau juste avec Dreamweaver

pour ta mise en page il faut en effet changer les trois url pour chaque image et une seule fois la balise de style.
dans l'idéal il faudrait aussi renseigner l'attribut 'alt' de chaque '<img />' avec une petite description.

<img src="http://www.kreavie.ca/images/Lampions/large/Ensemb­le-GLBV.gif"
alt="lampion tartemplume" height="250" width="333">
la balise de style??

tu peux faire une ou plusieurs feuille de style pour chaque document.
et tu peux définir des règles de style pour chaque balise html.

j'en suis pas encore arriver à ce niveau mais je vais y arriver un jour

Est-ce que je dois via photoshop redimensionner et sauver en GIF??
qui, que, quoi ???
et tu devrais utiliser 'PNG' si il n'y a pas de transparence, le format est meilleur.

ma question étais: dois-je remdimensionner mes grosses photo en 250x333 sur photoshop (et en genre 2011x quelque chose d'aussi gros) et tu me dis de le sauver en 'PNG', c'est bien ça??

Je veux être sûr car avec le manque de sommeil, on commence à moins bien comprendre mais j'ai jusqu'à lundi matin pour le finir

Je vais y arriver...avec en grosse partie grâce à toi
   
Répondre à chocolat2006

25


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
chocolat2006, le samedi 10 novembre 2007 à 01:41:34
no je n'y arrive pas
je fais tout pareil que toi et ce que j'obtiens est décalé....aurais-je d'autres possibilités a part celle-ci et celle du lien qui dirige vers une autre page??
et le code css que tu as donné hier, on ne peux pas l'adapter pour des photos??
mais je ne veux pas de pop-up, j'aime vraiment l'idée de ce que tu as trouvé, mais je n'y arrive pas pourtant, j'ai copier/coller, changer ce qui devait être changé.

j'aurai pas la graine de la webdesigner