mariok
Membre regretté

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: [TOUTES VERSIONS] Créer un générateur d'image cliquable Lun 8 Mai 2017 - 9:49 | |
| Bonjour à toutes et tous, en premier lieu merci à philippe pour les corrections et sa patience pour ce générateur d'images cliquables avec infobulle. 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 OuiUtiliser 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 javascriptMettre 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 ValiderLe 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"; | |
|
clost
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Lun 8 Mai 2017 - 18:06 | |
| slt testé ici avant de voir ce tuto, trés efficace, merci | |
|
msfeettoes
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Ven 26 Mai 2017 - 7:27 | |
| | |
|
dymo
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Mer 31 Mai 2017 - 23:11 | |
| Merci pour cette info, je n'avais pas repéré cette fonctionnalité en haut du forum! (ça pourrait servir pour afficher le lien des publications en mode widget)
| |
|
Quad Daniel
Animateur blagueur

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Ven 2 Juin 2017 - 14:14 | |
| | |
|
Ptite_Perle
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Sam 17 Juin 2017 - 20:51 | |
| | |
|
Chocolatine
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Mer 21 Juin 2017 - 19:43 | |
| | |
|
dragon594
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Mer 26 Juil 2017 - 21:36 | |
| Merci pour cette petite astuce mon ami Mariok.  | |
|
kristhyane
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Lun 18 Déc 2017 - 11:01 | |
| | |
|
chrisnvidia
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Sam 10 Mar 2018 - 22:14 | |
| | |
|
Senpai
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Mar 17 Avr 2018 - 7:44 | |
| | |
|
Invité Invité

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Ven 21 Sep 2018 - 17:45 | |
| |
|
soleda
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Lun 24 Sep 2018 - 8:30 | |
| | |
|
1bernard1
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Dim 24 Fév 2019 - 1:02 | |
| | |
|
soleda
Milouzien

![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable Lun 25 Fév 2019 - 14:46 | |
| | |
|
Contenu sponsorisé
![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | Sujet: Re: [TOUTES VERSIONS] Créer un générateur d'image cliquable ![[TOUTES VERSIONS] Créer un générateur d'image cliquable Empty](https://2img.net/i/empty.gif) | |
| |
|