Derniers sujets*
» [PHPBB2] Couleur spécifique aux membres d'un rang dans les messages
par Roza Aujourd'hui à 11:07
» [TOUTES VERSIONS] Afficher une belle infobulle au survol des boutons J aime
par clost Sam 17 Avr 2021 - 12:03
» [MODERNBB] Supprimer l'effet scroll sur la barre de navigation
par Milouze14 Lun 12 Avr 2021 - 7:56
» [MODERNBB]Retirer les crochets des groupes dans le Qeel
par Serah Sam 10 Avr 2021 - 22:48
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par Stefano36 Mer 31 Mar 2021 - 21:57
» [PHPBB2] Afficher le nombre de message privé non lus sur la toolbar etc
par Constellation Mer 31 Mar 2021 - 1:59
» [PHPBB2] Remplacer le mot Invité
par Constellation Mer 31 Mar 2021 - 1:37
» [TOUTES VERSIONS] Héberger du css dans une page html comme sur la feuille de style
par Constellation Mer 31 Mar 2021 - 1:31
» [TOUTES VERSIONS] Sauvegarder le contenu de l'éditeur
par Constellation Mer 31 Mar 2021 - 1:30
» [TOUTES VERSIONS]Message de confirmation de fermeture de la page pour les membres distraits
par Constellation Mer 31 Mar 2021 - 1:24
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
par Constellation Mer 31 Mar 2021 - 1:14
» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
par Constellation Mar 30 Mar 2021 - 22:53
» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum (Version Française)
par Constellation Mar 30 Mar 2021 - 22:50
» [TOUTES VERSIONS] Afficher les likes seulement sur les messages des autres membres et plus encore
par Milouze14 Mar 30 Mar 2021 - 6:14
» [TOUTES VERSIONS] Modifier la couleur des pseudos mentionner dans l'éditeur
par Constellation Dim 28 Mar 2021 - 19:34
» [TOUTES VERSIONS] Une page html connexion/deconnexion...
par Constellation Dim 28 Mar 2021 - 19:31
» [TOUTES VERSIONS] Modifier les menus défilant de l'éditeur
par Milouze14 Lun 22 Mar 2021 - 7:30
» [TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris
par photoclic Dim 21 Mar 2021 - 19:24
» [TOUTES VERSIONS]Mise en place automatique décorations
par clost Dim 21 Fév 2021 - 11:37
» [AWESOMEBB] Outils de modération rapide
par Milouze14 Jeu 11 Fév 2021 - 6:04
par Roza Aujourd'hui à 11:07
» [TOUTES VERSIONS] Afficher une belle infobulle au survol des boutons J aime
par clost Sam 17 Avr 2021 - 12:03
» [MODERNBB] Supprimer l'effet scroll sur la barre de navigation
par Milouze14 Lun 12 Avr 2021 - 7:56
» [MODERNBB]Retirer les crochets des groupes dans le Qeel
par Serah Sam 10 Avr 2021 - 22:48
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par Stefano36 Mer 31 Mar 2021 - 21:57
» [PHPBB2] Afficher le nombre de message privé non lus sur la toolbar etc
par Constellation Mer 31 Mar 2021 - 1:59
» [PHPBB2] Remplacer le mot Invité
par Constellation Mer 31 Mar 2021 - 1:37
» [TOUTES VERSIONS] Héberger du css dans une page html comme sur la feuille de style
par Constellation Mer 31 Mar 2021 - 1:31
» [TOUTES VERSIONS] Sauvegarder le contenu de l'éditeur
par Constellation Mer 31 Mar 2021 - 1:30
» [TOUTES VERSIONS]Message de confirmation de fermeture de la page pour les membres distraits
par Constellation Mer 31 Mar 2021 - 1:24
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
par Constellation Mer 31 Mar 2021 - 1:14
» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
par Constellation Mar 30 Mar 2021 - 22:53
» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum (Version Française)
par Constellation Mar 30 Mar 2021 - 22:50
» [TOUTES VERSIONS] Afficher les likes seulement sur les messages des autres membres et plus encore
par Milouze14 Mar 30 Mar 2021 - 6:14
» [TOUTES VERSIONS] Modifier la couleur des pseudos mentionner dans l'éditeur
par Constellation Dim 28 Mar 2021 - 19:34
» [TOUTES VERSIONS] Une page html connexion/deconnexion...
par Constellation Dim 28 Mar 2021 - 19:31
» [TOUTES VERSIONS] Modifier les menus défilant de l'éditeur
par Milouze14 Lun 22 Mar 2021 - 7:30
» [TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris
par photoclic Dim 21 Mar 2021 - 19:24
» [TOUTES VERSIONS]Mise en place automatique décorations
par clost Dim 21 Fév 2021 - 11:37
» [AWESOMEBB] Outils de modération rapide
par Milouze14 Jeu 11 Fév 2021 - 6:04
Les statistiques du forum
[TOUTES VERSIONS] Créer un générateur d'image cliquable
Page 1 sur 1 • Partagez
Bonjour à toutes et tous, en premier lieu merci à philippe pour les corrections et sa patience
comme sur ce forum, vous avez un générateur d'images cliquables avec infobulle.
Si vous désirez avoir l'identique sur votre fofo, un petit merci sera suffisant
.
L'aperçu imagé pour l'astuce:
Modules/HTML & JAVASCRIPT/Gestion des pages HTML/Création en mode avancé (HTML)
Titre * : Générateur d'image cliquable
Voulez-vous utiliser le haut et le bas de page de votre forum ? Cocher Oui
Utiliser cette page en tant que page d'accueil ? Cocher Non
Déposez ceci:
Pensez a cliquer sur le bouton
Ensuite on va déposer un bouton qui sera placé après le bouton RSS sur la toolbar:
Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposez ceci:
Pensez a cliquer sur le bouton Valider
Le lien de l'image modifiable ici (la dimension de l'image doit être 24px x 24px ):
Le lien de la page web a renseigner ici:
Voila, c'est tout pour le moment
.
Un soucis direction l'entraide
https://www.milouze14.com/f14-entraide-forumactif
comme sur ce forum, vous avez un générateur d'images cliquables avec infobulle.
Si vous désirez avoir l'identique sur votre fofo, un petit merci sera suffisant

L'aperçu imagé pour l'astuce:
Modules/HTML & JAVASCRIPT/Gestion des pages HTML/Création en mode avancé (HTML)
Titre * : Générateur d'image cliquable
Voulez-vous utiliser le haut et le bas de page de votre forum ? Cocher Oui
Utiliser cette page en tant que page d'accueil ? Cocher Non
Déposez ceci:
- Code:
<script language="JavaScript">
function generer(form) {
form.graphcode.value += "<a href=\"";
form.graphcode.value += form.input1.value + "\"";
if (form.liste1.value != "") form.graphcode.value += " target=\"" + form.liste1.value + "\"";
form.graphcode.value += "><img src=\"" + form.input2.value + "\"/";
if (form.input3.value != "") form.graphcode.value += " alt=\"" + form.input3.value + "\"" + " title=\"" + form.input3.value + "\"";
form.graphcode.value += "></a>\n";
}
</script>
<script>
$(function(){
$('input[value="Créer"]').hide();
$('select[name="liste1"]').focus(function(){
$('input[value="Créer"]').fadeIn();
});
$('input[value="Effacer"]').focus(function(){
$('input[value="Créer"]').fadeOut();
$('tr#M14_input2,tr#M14_input3,table#M14_input4').removeClass('M14_opacity').addClass('M14_none_opacity');
});
$('input[name="input1"]').focus(function(){
$('tr#M14_input2').addClass('M14_opacity');
});
$('input[name="input2"]').focus(function(){
$('tr#M14_input3').addClass('M14_opacity');
});
$('input[name="input3"]').focus(function(){
$('table#M14_input4').addClass('M14_opacity');
});
$('input[value="Créer"]').focus(function(){
$('textarea[name="graphcode"]').addClass('M14_borderTextarea');
});
$('input[value="Effacer"]').focus(function(){
$('textarea[name="graphcode"]').removeClass('M14_borderTextarea');
});
$('tr#M14_apercuHTML').click(function(){
$('#M14_textareaHTML').toggleClass('M14_opacity');
});
});
</script>
<style>
form[graphcode=""]
{
font-size:12px !important;
background-color:grey;
color:white!important;
}
form[graphcode=""] a
{
color:white!important;
}
textarea.M14_rendu
{
width: 503px;
height:60px;
overflow: hidden;
resize: none;
-khtml-user-select : none;
-webkit-user-select : none;
-moz-user-select : -moz-none;
-ms-user-select : none;
user-select : none;
}
.M14_borderTextarea{border: 4px dashed orange !important;}
.M14_opacity
{
-moz-opacity:1 !important;
-khtml-opacity:1 !important;
-ms-filter:"alpha(opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
opacity:1 !important;
}
tr#M14_input2,tr#M14_input3,table#M14_input4 ,.M14_none_opacity,#M14_textareaHTML
{
-moz-opacity:0 ;
-khtml-opacity:0 ;
-ms-filter:"alpha(opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
opacity:0 ;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
input[name="input1"],input[name="input2"] ,input[name="input3"],
select[name="liste1"]
{border: 2px dotted orange;cursor:pointer;}
fieldset
{
margin-bottom: 15px;
padding: 15px;
width: 50%;
margin-left: auto;
margin-right: auto;
font-variant: Arial;
border: none !important;
}
input[type=button] {
margin-bottom: 15px;
padding: 10px;
width: 10%;
border:1px dotted white;
font-variant: Arial;
margin-left: auto;
margin-right: auto;
}
input[type=reset] {
margin-bottom: 15px;
padding: 10px;
width: 10%;
border:1px dotted white;
font-variant: Arial;
margin-left: auto;
margin-right: auto;
}
textarea[name="graphcode"]
{
background: #fff;
border:color:#69c;
border:4px dotted;
color: #111;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
margin: 5px;
outline: 0;
padding: 3px;
resize: none;
}
span.M14_texte
{
font-weight:bold;
cursor:pointer;
}
select{padding:0px;}
option[value="_blank"],option[value="_parent"]{color:green;}
a#anchor
{
position: relative;
top: -30px;
}
</style>
<body>
<a id="anchor"></a>
<center class="color-primary">
<form id="M14_Form"graphcode="">
<div align="center"class="color-primary">
<strong>GÉNÉRATEUR DE LIEN SUR IMAGE par <a href="/u1432" title="Modérateur et graphiste sur les forums Milouze14&Compagnie">MARIOK</a></strong>
</div><br />
<center>
Ce générateur vous permet de créer un lien sur une image pour mettre sur vos forums.<br />
Il est impératif de renseigner tous les champs, sous peine de voir votre code html tronqué.
</center>
<hr />
<center>Préparez votre image</center><br />
<table style="width:100%;">
<tbody>
<tr>
<td width="40%"align="right"valign="middle">
<span class="M14_texte">Le lien concerné:</span>
</td>
<td width="60%"align="center">
<input size="40" value="" name="input1" placeholder="https://lien du site" title="Champ obligatoire"/>
</td>
</tr>
<tr id="M14_input2">
<td width="40%"align="right"valign="middle">
<span class="M14_texte">Url de votre Image :</span>
</td>
<td width="60%"align="center">
<input size="40" value="" name="input2" placeholder="https://lien de votre image"title="Champ obligatoire"/>
</td>
</tr>
<tr id="M14_input3">
<td width="40%"align="right"valign="middle"><span class="M14_texte">Infobulle :</span> </td>
<td width="60%"align="center"><input size="40" value="" name="input3" placeholder="Infobulle de votre lien"title="Champ obligatoire" /> </td>
</tr>
<tr id="M14_apercuHTML">
<td width="40%"align="right"valign="middle">
<span class="M14_texte"title="Cliquez ici pour voir le code html">Le rendu visuel:</span>
</td>
<td width="60%"align="center">
<a href="https://www.milouze14.com/" target="_blank">
<img src="https://2img.net/u/3413/73/38/67/avatars/1-65.gif" alt="L'avatar de Milouze" title="L'avatar de Milouze" /></a>
</td>
</tr>
<tr id="M14_textareaHTML">
<td width="40%"align="right"valign="middle">Le code html:</td>
<td width="60%"align="center">
<textarea class="M14_rendu">
<a href="https://www.milouze14.com/" target="_blank">
<img src="https://2img.net/u/3413/73/38/67/avatars/1-65.gif" alt="L'avatar de Milouze" title="L'avatar de Milouze"/></a>
</textarea>
</td>
</tr>
</tbody>
</table>
<hr />
<center>Préparez votre redirection </center>
<table id="M14_input4"style="width:100%;">
<tbody>
<tr title="Champ obligatoire">
<td width="40%"align="right"valign="middle">Ouverture du lien:</td>
<td width="60%"align="center">
<select size="1" name="liste1">
<option selected="selected">Redirection désirez</option>
<option value="_blank">BLANK</option>
<option value="_parent">PARENT</option>
</select>
</td>
</tr>
<tr>
<td width="40%"align="center"valign="middle"></td>
<td width="60%"align="center">
<span>BLANK</span>: Ouverture de la page dans une nouvelle fenêtre<br />
<span>PARENT</span>: Ouverture de la page dans la même page <br />
</td>
</tr>
</tbody>
</table><br />
<center>
<input title="Créer le code html"onclick="generer(this.form)" value="Créer" name="button" type="button" />
<input title="Effacer les données renseignées"value="Effacer" name="reset" type="reset" />
</center>
<fieldset>Résultat</fieldset>
<center>
<textarea name="graphcode" rows="6" cols="70"placeholder="Votre code html sera affiché ici"></textarea>
</center>
<table style="width: 100%;">
<tbody>
<tr>
</tr>
</tbody>
</table>
<center>
<input title="Cliquez ici pour sélectionner le code html"type="button" value="Selectionner" onclick="javascript:this.form.graphcode.focus();this.form.graphcode.select();" />
</center>
</form>
</center>
</body>
Pensez a cliquer sur le bouton

Ensuite on va déposer un bouton qui sera placé après le bouton RSS sur la toolbar:
Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposez ceci:
- Code:
$(function(){
$(function(){
var image="https://i58.servimg.com/u/f58/11/26/21/37/image11.png";
var link="LE LIEN DE LA PAGE WEB";
var ancre="#anchor";
$('#fa_rss').after('<a href="'+link+''+ancre+'"target="_blank"title="Générateur d\'images cliquables"><img src="'+image+'"/></a>');
})});
Pensez a cliquer sur le bouton Valider
Le lien de l'image modifiable ici (la dimension de l'image doit être 24px x 24px ):
- Code:
var image="https://i58.servimg.com/u/f58/11/26/21/37/image11.png";
Le lien de la page web a renseigner ici:
- Code:
var link="LE LIEN DE LA PAGE WEB";
Voila, c'est tout pour le moment

Un soucis direction l'entraide

https://www.milouze14.com/f14-entraide-forumactif
- InvitéInvité
Merci beaucoup !
Sujets similaires internes ( 0 )
Aucun sujet
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum