Ouvrir un popup en cliquant sur une image

4 participants

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 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
=> https://i.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

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 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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 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

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 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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 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

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 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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 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

missx
Membre actif

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

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 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

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 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

missx
Membre actif

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

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 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

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 Sam 22 Jan 2011 - 13:23

Un petit up s'il vous plait...
Lunathiel

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 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

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 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 :
personnaliser  popup - Ouvrir un popup en cliquant sur une image Page_h10
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
personnaliser  popup - Ouvrir un popup en cliquant sur une image Loupe10
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

missx
Membre actif

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

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 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

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 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

missx
Membre actif

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

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 Ven 28 Jan 2011 - 13:03

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

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

- Sujets similaires

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