<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>
Accueil 
![[TOUTES VERSIONS] Créer un générateur d'image cliquable 178](https://servimg.com/r/5811262137/178.png)
