Ouvrir un popup en cliquant sur une image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Sam 25 Déc 2010 - 11:36

Tout est dans le titre^^

Bien le bonjour à tous et joyeux noël

Voila, pour noël justement, j'aimerais créer un petit quelque chose pour mes membres

j'ai pourtant fait des recherches mais les codes que j'ai pu trouver sur internet sont soit très mal expliqué soit ne fonctionnent pas

J'aimerais que lorsque l'on clique sur cette image
=> http://i69.servimg.com/u/f69/14/59/60/98/mini-c13.png
un petit popup s'ouvre montrant une nouvelle image (le contenu du cadeau) et du texte...

Comment puis-je faire?

Un grand merci


Dernière édition par Lunathiel le Ven 28 Jan 2011 - 13:03, édité 1 fois

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Neptunia le Sam 25 Déc 2010 - 11:43

Bonjour !

Je pense que ce sujet pourrait vous interesser.
Le script est conçu pour donner l'effet d'un zoom mais rien n'interdit de prendre une autre image pour la version grand format.
Par contre avec cette méthode, je pense que pour le texte, le plus simple serait de l'incruster directement à l'image.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Sam 25 Déc 2010 - 12:18

Oui mais ici il s'agit d'agrandir une image au passage de la souris, moi je cherche a faire cela dans une popup en cliquant sur l'image
Comme ci on voulait ouvrir le cadeau

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Neptunia le Sam 25 Déc 2010 - 13:51

Mais justement c'est ce que fait ce script, il ouvre une popup !

Ah oui, je vois, le site ne fonctionne plus.
Téléchargez le zip et ouvrez le fichier html dans votre navigateur, vous comprendrez.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Jeu 6 Jan 2011 - 12:58

Je n'y arrive vraiment pas... Suis-je obliger de passer par mes templates? Cela est-il possible a faire en code html?

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Neptunia le Jeu 6 Jan 2011 - 14:23

Vous pouvez aussi passer par le champ description du forum.
Ou par ajout d'une balise méta dans Général/Promotion du forum/Moteurs de recherche.
Ou dans le message de la page d'accueil si la fonctionnalité ne sera utilisée qu'à cet endroit.

Mais passer par le template reste la solution la plus "propre" lorsque nous sommes en PunBB ou phpBB2

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par missx le Jeu 6 Jan 2011 - 15:49

salut
tu commence par faire une page html ( sans le haut et le bas du forum) qui contient ton texte et tout ce que tu veut voir dans ta popup.
a l'endroit ou tu veut mettre ton image qui ouvre la popup tu met ce code :
Code:
<a href="#" onclick="window.open('http://ADRESSE DE LA PAGE HTML','cadeaux','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=275, height=350');return(false)"><img src="http://i69.servimg.com/u/f69/14/59/60/98/mini-c13.png" border="0" width="60" height="56"></a>
tu modifie http://ADRESSE DE LA PAGE HTML et width=275, height=350 qui est la dimension de la popup.

A+

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Dim 9 Jan 2011 - 12:22

J'ai essayé mais ça ne fonctionne pas =/ ça me redirige sur la bannière de mon forum et c'est tout

Encore un peu d'aide s'il vous plait

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par missx le Dim 9 Jan 2011 - 15:37

tu as créé ta page html ?
en créant ta page , tu as bien coché ' utiliser le haut et le bas du forum' = non
si tu n'y arrive pas, passe le code que tu veut mettre dans la popup ainsi que l'adresse du forum.

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Mar 11 Jan 2011 - 23:30

Voici ce que j'aimerais avoir dans ma pop up

Code:
    <center><div style="width: 75%; border: 3px solid; border-color:#053250; background-color: #1E619B; -moz-border-radius: 10px;">[table cellspacing="1"]
    [tr][td valign="top"] <div style=" width: 71px; height: 76px; border: 2px solid; border-color:#053250; -moz-border-radius: 10px; background-image:url('http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg');"></div>  [/td][td] Cher (Chère) { USERNAME}

    [size=18][b][color=orange]Vous recevez votre paye hebdomadaire de X Galions.[/color][/b][/size]

    [right]La banque d'Al'winak... Mr le maire...[/right]

    [size=7]Il est inutile de donner réponse à ce message.[/size]

    [/td][/tr]
    [/table]</div></center>

Et voici le lien de mon forum => http://www.thoawin.com/

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Sam 22 Jan 2011 - 13:23

Un petit up s'il vous plait...

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Forami le Sam 22 Jan 2011 - 20:25

Bonjour
Mais je cmprends simplement de faire un image cliquable

http://forum.forumactif.free.fr/generateurs/generateur_image_cliquable.html

Forami
*****

Masculin
Messages : 587
Inscrit(e) le : 16/08/2008

http://forum-histo.forums-actifs.com
Forami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par missx le Dim 23 Jan 2011 - 9:41

@Lunathiel a écrit:Voici ce que j'aimerais avoir dans ma pop up

Code:
    <center><div style="width: 75%; border: 3px solid; border-color:#053250; background-color: #1E619B; -moz-border-radius: 10px;">[table cellspacing="1"]
    [tr][td valign="top"] <div style=" width: 71px; height: 76px; border: 2px solid; border-color:#053250; -moz-border-radius: 10px; background-image:url('http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg');"></div>  [/td][td] Cher (Chère) { USERNAME}

    [size=18][b][color=orange]Vous recevez votre paye hebdomadaire de X Galions.[/color][/b][/size]

    [right]La banque d'Al'winak... Mr le maire...[/right]

    [size=7]Il est inutile de donner réponse à ce message.[/size]

    [/td][/tr]
    [/table]</div></center>

Et voici le lien de mon forum => http://www.thoawin.com/

déjà le mélange de bbcode html ne peut pas fonctionner dans une page html :
j'ai corrigé ton code et rajouter un javascript pour que USERNAME fonctionne dans la page html
tu crée une page HTML
tu coche non à " utiliser le haut et le bas du forum" et non à " utiliser en page d'accueil" tu te met en +html en cliquant sur -html si ce n'est déjà fait.
tu doit avoir ceci :

dans ta page, tu colle ceci :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Avertissement</title>
</head>

<body>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<center><div style="width: 75%; border: 3px solid rgb(5, 50, 80); background-color: rgb(30, 97, 155); -moz-border-radius: 10px 10px 10px 10px;"><table cellspacing="1">    <tbody><tr><td align="left" valign="top"> <div style="width: 71px; height: 76px; border: 2px solid rgb(5, 50, 80); -moz-border-radius: 10px 10px 10px 10px; background-image: url(http://i19.servimg.com/u/f19/14/59/60/98/bourse11.jpg);"></div>  </td><td align="left"> Cher (Chère) <span class="USERNAME"></span><br><br>    <span style="font-size: 18px; line-height: normal;"><strong><font color="orange">Vous recevez votre paye hebdomadaire de X Galions.</font></strong><br />
</span><br><br><div align="right">La banque d'Al'winak... Mr le maire...</div><br><br>    <span style="font-size: 7px; line-height: normal;">Il est inutile de donner réponse à ce message.</span><br><br>    </td></tr>    </tbody></table></div></center>
</body>
</html>
et tu valide
tu peut changer le titre de la popup au début du code
<title>Avertissement</title>
quand c'est validé, tu clique en face de ta page sur la petite loupe

et tu copie l'adresse dans la barre d'adresse.

Tu te rends maintenant là ou tu veut mettre ton image cliquable et tu met ce code
Code:
<a href="#" onclick="window.open('http://ADRESSE DE LA PAGE HTML','cadeaux','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=500, height=260');return(false)"><img src="http://i69.servimg.com/u/f69/14/59/60/98/mini-c13.png" border="0" width="60" height="56"></a>
voilà si tu as un problème , n'hésite pas !!
A+

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Ven 28 Jan 2011 - 10:41

Que dois-je mettre comme lien à la place de href='#'
???

Et est-il possible de changer la couleur de fond de la pop up???

Un grand merci cela fonctionne enfin =)

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par missx le Ven 28 Jan 2011 - 11:08

@Lunathiel a écrit:Que dois-je mettre comme lien à la place de href='#'
???
tu ne met rien c'est le code comme ça , ça renvoi à l'entête

Et est-il possible de changer la couleur de fond de la pop up???
tu met un css dans la page html qui contient la popup
comme ceci , juste après
Code:
</title>
Code:
<style type="text/css">
body {
   background-color: #999;
}
</style>
tu met la couleur de ton choix


Un grand merci cela fonctionne enfin =)
de rien !
a+ Very Happy

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ouvrir un popup en cliquant sur une image

Message par Lunathiel le Ven 28 Jan 2011 - 13:03

Superbe!!!! Un grand merci je met en résolu!!!! thumright

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum