Sujets similaires

Sujet: Re: Chatbox sur le côté (messages) Lun 03 Jan 2011, 17:25

Bonjour! Est-il possible de faire en sorte que l'image change également lors de la passage de la souris?

Explication: Le bouton normal s'appelle "Ouvrir" et reste ainsi. Puis, lorsque la souris passe par-dessus "Ouvrir", le bouton change en "Cliquez-moi" sans que la fenêtre de la chatbox s'ouvre. Enfin, lorsque l'on clique sur ce bouton, il se change en "Fermer" et la chatbox s'ouvre.

Es-ce que ce serait possible?

Merci d'avance!

Sujet: Re: Chatbox sur le côté (messages) Jeu 06 Jan 2011, 09:28

Le code marche très bien, bravo, j'ai juste un petit souci. Je clique sur la chatbox, elle s'affiche normalement, mais impossible de la refermer. Je clique mais elle ne se referme pas.

Voici ce que j'ai mis :

Code:: 
<table style="position: fixed; bottom: 50px; left: -10px;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;">
<img src="http://img4.hostingpics.net/pics/367172Sanstitre2.png" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='http://img4.hostingpics.net/pics/367172Sanstitre2.png')?'block':'none';
this.src=(this.src=='http://img4.hostingpics.net/pics/367172Sanstitre2.png')?'http://img4.hostingpics.net/pics/367172Sanstitre2.png':'http://img4.hostingpics.net/pics/367172Sanstitre2.png';"/></td></tr></table>
<br clear="all" />

Bonjour,

Merci pour ce tuto, ça marche parfaitement Smile

Bonsoir JujuEnLove

Regardez bien votre code,a l'emplacement ou il fallait mettre l'image pour fermé vous avez placé une image pour ouvrir.

Merci pour ce tutoriel, depuis le temps que je voulais faire ça.

Hello ~
Alors voilà j'ai déjà personnalisé ma chatbox (normale) et je voudrais transférer ses paramètres, possible ?

Mon code CSS pour ma ChatBox :

Code:: #chatbox_members ul li,
body.chatbox {
background-image:url('http://img836.imageshack.us/img836/8844/cbimage.png');
opacity: 0.7;}

Oui, c'est tout à fait possible Wink

Cependant, si tu rencontres un soucis, n'hésites pas à aller le poster dans l'Aide CSS & HTML Wink

Bonsoir !

Précédemment j'ai essayé d'installer la chatbox sur le côté mais je suis incapable d'y arriver.
Et finalement, étant donné que cela est plus pratique autant qu'esthétique, je voulais tenter à nouveau.

Cependant je n'ai plus les balises <-- BEGIN switch_legend --> et <-- END switch_legend --> puisque j'ai remplacé mon « qui est en ligne »... Rapport ? Je ne sais pas.

Donc je ne sais pas où placer le code pour la chat box sur le côté !
Mais voici le code de mon index_body

Spoiler:

Code:: {JAVAscript}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

</table>



<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="100%" valign="top" align="center" class="row1">
<label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label>
<label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label>
{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br />
<label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>

</td>
</tr>
</table>
</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">

<span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>


<br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>

</span>
</td>
<td width="50%" align="right">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>


<br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>


</span>
</td>
</tr>
</table>


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="100%" valign="top" align="center" class="row1">
<span class="genmed">{L_USERNAME}:</span>
<input class="post" type="text" size="10" name="username"/>
<span class="genmed">{L_PASSWORD}:</span>
<input class="post" type="password" size="10" name="password"/>
{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br />
<span class="gensmall">{L_AUTO_LOGIN}</span>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
</td>
</tr>
</table>
</form>



<center><table cellspacing="2" cellpadding="2" width="600" border="0" class="statistiques">
<tr>
<td width="15%"></td>
<td width="70%">
<br><br><center>
<span class="groupes"> <a href="http://neko-zoku.forumsactifs.com/g13-humain"><font color="#814FA8" size="2"><b>Humain</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
<span class="groupes"><a href="http://neko-zoku.forumsactifs.com/g16-scientifique"><font color="#042905" size="2"><b>Scientifique</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><br><br>
<span class="groupes"><a href="http://neko-zoku.forumsactifs.com/g12-hybride-docile"><font color="#42082E" size="2"><b>Hybride docile</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"></span>
<span class="groupes"><a href="http://neko-zoku.forumsactifs.com/g15-hybride-rebelle"><font color="#030E2E" size="1"><b>Hybride rebelle</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"></span><br><br>
<span class="gensmall">{TOTAL_POSTS}. {TOTAL_USERS}<br />
{NEWEST_USER}<br><br>
{TOTAL_USERS_ONLINE}<br>
{LOGGED_IN_USER_LIST}</center></span><br>
<td width="5%"></td>
</tr>
</table></center>

<table border="0" cellspacing="3" cellpadding="0" width="700" align="center" style="text-align: justify">
{L_CONNECTED_MEMBERS}</table><br>

{CHATBOX_BOTTOM}
<br clear="all" />
{AUTO_DST}

Bonsoir Lestat64

Voila votre template modifié

Spoiler:

Code:: {JAVAscript}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

</table>



<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="100%" valign="top" align="center" class="row1">
<label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label>
<label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label>
{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br />
<label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>

</td>
</tr>
</table>
</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">

<span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>


<br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>

</span>
</td>
<td width="50%" align="right">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>


<br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>


</span>
</td>
</tr>
</table>


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="100%" valign="top" align="center" class="row1">
<span class="genmed">{L_USERNAME}:</span>
<input class="post" type="text" size="10" name="username"/>
<span class="genmed">{L_PASSWORD}:</span>
<input class="post" type="password" size="10" name="password"/>
{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br />
<span class="gensmall">{L_AUTO_LOGIN}</span>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
</td>
</tr>
</table>
</form>



<center><table cellspacing="2" cellpadding="2" width="600" border="0" class="statistiques">
<tr>
<td width="15%"></td>
<td width="70%">
<br><br><center>
<span class="groupes"> <a href="http://neko-zoku.forumsactifs.com/g13-humain"><font color="#814FA8" size="2"><b>Humain</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
<span class="groupes"><a href="http://neko-zoku.forumsactifs.com/g16-scientifique"><font color="#042905" size="2"><b>Scientifique</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><br><br>
<span class="groupes"><a href="http://neko-zoku.forumsactifs.com/g12-hybride-docile"><font color="#42082E" size="2"><b>Hybride docile</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"></span>
<span class="groupes"><a href="http://neko-zoku.forumsactifs.com/g15-hybride-rebelle"><font color="#030E2E" size="1"><b>Hybride rebelle</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"></span><br><br>
<span class="gensmall">{TOTAL_POSTS}. {TOTAL_USERS}<br />
{NEWEST_USER}<br><br>
{TOTAL_USERS_ONLINE}<br>
{LOGGED_IN_USER_LIST}</center></span><br>
<td width="5%"></td>
</tr>
</table></center>



<table style="position: fixed; bottom: 50px; left: -10px;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;">
<img src="http://hariboow.free.fr/upload/images/1004161201.png" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='http://hariboow.free.fr/upload/images/1004161201.png')?'block':'none';
this.src=(this.src=='http://hariboow.free.fr/upload/images/1004161201.png')?'http://hariboow.free.fr/upload/images/1004161202.png':'http://hariboow.free.fr/upload/images/1004161201.png';"/></td></tr></table>
<br clear="all" />



<table border="0" cellspacing="3" cellpadding="0" width="700" align="center" style="text-align: justify">
{L_CONNECTED_MEMBERS}</table><br>

{CHATBOX_BOTTOM}
<br clear="all" />
{AUTO_DST}

Je tiens à sincèrement vous remercier !
C'est parfait, la chatbox fonctionne à la perfection.

Sujet: Re: Chatbox sur le côté (messages) Jeu 03 Mar 2011, 09:54

Super tuto ! merci beaucoup Very Happy

Chatbox sur le côté (messages)

Chatbox sur le côté (messages)

Sujets similaires

Sujets similaires

Partenaires Or