Ouvrir un popup en cliquant sur une image

[Lunathiel]

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

[Neptunia]

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.

[Lunathiel]

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

[Neptunia]

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.

[Lunathiel]

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

[Neptunia]

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

[missx]

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+

[Lunathiel]

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

[missx]

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.

[Lunathiel]

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]

Un petit up s'il vous plait...

[Forami]

Bonjour
Mais je cmprends simplement de faire un image cliquable

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

[missx]

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+

[Lunathiel]

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

[missx]

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+

[Lunathiel]

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