image

In this Blog, we learn how to make an HTML image Code Generator.

with live output and Codepen available and also source code here.

How to Use Image Code Generator Live Tool?

  • Enter Image Width
  • Enter Image Height
  • Enter Image Margin
  • Enter Image Alt Text
  • Enter Image Border Color
  • Enter Image Border Width
  • Enter Image Border Color
  • Enter Image Border Style
  • Enter Image Destination URL
  • Enter Image IMG Link Target

You can see all the above details. You can use it in the Image Code Generator Live Tool.

Image Code Generator Live Tool

Note:- To make a live change in the HTML generator, you have to click on the refresh button once.

Image Code Generator
Image
IMG Width:
IMG Height:
IMG Margin:
IMG Alt Text:
Border
Border Color:
Border Width:
Border Style:
Link (optional)
Destination URL:
IMG Link Target:
Refresh

Image Location

(Replace the above URL with the URL of your image)

Copy The Code

Here is the code that was generated:

How to make HTML Image Code Generator?

We will use JavaScript for how to create an HTML image code generator.

Follow Few Steps:-

Step1:- Create index.html File.



<!DOCTYPE html>
<html lang="en">
<head>
  <!------code by myprograming.com------>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 
<title>HTML Image Code Generator</title>
   <link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body>
 
<div class="main">
<article class="content"> 
<h1 align="center"> HTML Image Code Generator</h1>
 
 
<form name="imageCodeGenerator" id="imageCodeGenerator">
<table class="imageCodeGenerator">
<tr><td class="toolBar" rowspan="2">
<table>
<tr>
<th colspan="2">Image</th>
</tr>
<tr>
<td>IMG Width:</td>
<td><input name="ImageWidth" value="300" type="text" size="3" maxlength="3" onkeyup="javascript:generateCode();">
<select name="ImageWidthMetric" id="ImageWidthMetric" onchange="javascript:generateCode();" style="max-width:70px;">
<optgroup label="Absolute">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Relative">
<option value="em"> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
<option value="%"> Percent</option>
</select>
</td>
</tr>
<tr>
<td>IMG Height:</td>
<td><input name="ImageHeight" value="225" type="text" size="3" maxlength="3" onkeyup="javascript:generateCode();">
<select name="ImageHeightMetric" id="ImageHeightMetric" onchange="javascript:generateCode();" style="max-width:70px;">
<optgroup label="Absolute">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative">
<option value="em"> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
<option value="%"> Percent</option>
</select>
</td>
</tr>
<tr>
<td>IMG Margin:</td>
<td><input name="Margin" value="10" type="text" size="3" maxlength="3" onkeyup="javascript:generateCode();">
<select name="MarginMetric" id="MarginMetric" onchange="javascript:generateCode();" style="max-width:70px;">
<optgroup label="Absolute">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative">
<option value="em"> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup> 
</select>
</td>
</tr>
<tr>
<td>IMG Alt Text:</td>
<td><textarea name="AltText" maxlength="500" onkeyup="javascript:generateCode();" style="width:120px;height:40px;" title="Recommended field. This text is displayed if the image cannot be displayed. Text should be descriptive of the image.">Butterfly</textarea>
</td>
</tr>
<tr>
<th colspan="2">Border</th>
</tr>
<tr>
<td>Border Color:</td>
<td class="colorbor">
<input name="BorderColor" id="BorderColor" value="#000000" type="color" size="6" maxlength="10"  > 
</td>
</tr>
<tr>
<td>Border Width:</td>
<td><input name="BorderWidth" value="6" type="text" size="3" maxlength="2" onkeyup="javascript:generateCode();">
<select name="BorderWidthMetric" id="BorderWidthMetric" onchange="javascript:generateCode();">
<optgroup label="Absolute">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative">
<option value="em"> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Border Style:</td>
<td>
<select name="BorderStyle" id="BorderStyle" onchange="javascript:generateCode();">
<option value="solid"> Solid</option>
<option value="dashed"> Dashed</option>
<option value="dotted"> Dotted</option>
<option value="double"> Double</option>
<option value="groove"> Groove</option>
<option value="ridge"> Ridge</option>
<option value="inset"> Inset</option>
<option value="outset"> Outset</option>
</select>
</td>
</tr>
<tr title="Copy the URL from the destination page, then paste it here. You could use this for linking to another web page, or a larger version of the same image.">
<th colspan="2">Link (optional)</th>
</tr>
<tr title="Copy the URL from the destination page, then paste it here. You can use this to link to photos.">
<td>Destination URL:</td>
<td>
  <input name="LinkUrl" value="" placeholder="http://" type="text" size="15" maxlength="2000" onkeyup="javascript:generateCode();"></td>
</tr>
<tr>
<td>IMG Link Target:</td>
<td>
<select name="LinkTarget" id="LinkTarget" onchange="javascript:generateCode();">
<option value="_self"> _self</option>
<option value="_top"> _top</option>
<option value="_blank"> _blank</option>
<option value="_parent"> _parent</option>
</select>
</td>
</tr>
</table>
</td>
<td class="preview">
<div id="displayResult">
</div>
  <div class="refresh">
    <span onclick="javascript:generateCode();"><script type="text/JavaScript">cp.writeDiv()</script>Refresh</span>
  </div>
<h2>Image Location</h2>
<p><input name="ImageSrc" value="https://www.myprograming.com/wp-content/uploads/2021/05/03.jpg" type="text" size="15" maxlength="2000" onkeyup="javascript:generateCode();" onclick="this.focus();this.select()" title="Copy the URL from the image you want to use, then paste that URL here." style="width:50%;">
  
<p>(Replace the above URL with the URL of your image)</p>
</td>
</tr>
<tr>
</tr>
<tr>
<td class="code" style="background:#606060;" colspan="2">
<h2>Copy The Code</h2>
<p>Here is the code that was generated:</p>
<textarea name="generatedCode" id="generatedCode" onclick="this.focus();this.select()"></textarea>
</td>
</tr>
</table>
</form>
 


</article>
 
 
</div>
 
    <script src="demo.js"></script>
</body>
</html>

Step2:- Create style.css File.

.imageCodeGenerator {
width:100%;
border-collapse:collapse;
background:#32ff15;
color:#000;
font-weight: bold;
}
.imageCodeGenerator td {
border:1px solid #000;
vertical-align:top;
padding:10px;
}
.imageCodeGenerator td.toolBar {
font-size:11px;
width:300px;
height:auto;
  overflow: hidden;
padding:0px;
margin:0px;
}
.imageCodeGenerator td.toolBar table {
border-collapse:collapse;
width:100%;
}
.imageCodeGenerator td.toolBar th {
background-color:yellowgreen;
color:#fff;
padding-left:3px;
}
.imageCodeGenerator td.toolBar td {
font-size:14px;
padding:3px;
border:none;
}
.imageCodeGenerator td.toolBar textarea {
width:100%; 
font-size:1em;
}
.imageCodeGenerator td.preview {
background:#f7f7f7;
}
.imageCodeGenerator div#displayResult {
max-width:400px;min-height:200px;max-height:400px;overflow:auto;margin-bottom:10px;padding:10px;
}
.imageCodeGenerator textarea#generatedCode {
width:100%;min-height:200px;
}
.imageCodeGenerator input {
border:1px solid #000;
border-radius: 5px;
padding: 10px;
width: 100%;
}
.imageCodeGenerator input[size="3"] {
width:50px;
}
.toolBar
table
tr
th{
  font-size: 25px;
  font-weight: bold;
  color: #fff!important;
  background: blue!important;
}

.colorbor
input{
  height: 50px;
  padding: 0;
  width: 50px;
}
.refresh
span{
  background: red;
  color: #fff;
  padding: 10px;
}
table
tr
td
select{
  height: 40px;
  border-radius: 5px;
  border: 1px solid #000;
}
table
tr
td textarea{
  border-radius: 5px;
  border: 1px solid #000;
}
.code{
  position: fixed;
  bottom: 0;color: #fff;
  right: 0;
}

Step3:- Create demo.js File.

function generateCode(form){

imagesrc = document.imageCodeGenerator.ImageSrc.value;
imagewidth = document.imageCodeGenerator.ImageWidth.value;
imageheight = document.imageCodeGenerator.ImageHeight.value;
imagewidthmetric = document.imageCodeGenerator.ImageWidthMetric.value;
imageheightmetric = document.imageCodeGenerator.ImageHeightMetric.value;
margin = document.imageCodeGenerator.Margin.value;
marginmetric = document.imageCodeGenerator.MarginMetric.value;
alttext = document.imageCodeGenerator.AltText.value;
borderwidth = document.imageCodeGenerator.BorderWidth.value;
borderwidthmetric = document.imageCodeGenerator.BorderWidthMetric.value;
bordercolor = document.imageCodeGenerator.BorderColor.value;
borderstyle = document.imageCodeGenerator.BorderStyle.value;
linkurl = document.imageCodeGenerator.LinkUrl.value;
linktarget = document.imageCodeGenerator.LinkTarget.value;

output = '<!-- Codes by myprograming.com -->\n\n' +

'<!-- CSS Code -->\n' +
'<style type="text/css" scoped>\n' +
'img.GeneratedImage {\n' +
  ((imagewidth) ? 'width:' + imagewidth + imagewidthmetric + ';'  : '') + 
  ((imageheight) ? 'height:' + imageheight + imageheightmetric + ';' : '') + 
  ((margin) ? 'margin:' + margin + marginmetric + ';' : '') +
  ((borderwidth) ? 'border-width:' + borderwidth + borderwidthmetric + ';' : '') +
  ((bordercolor) ? 'border-color:' + bordercolor + ';' : '') +
  ((borderstyle) ? 'border-style:' + borderstyle + ';' : '') +
'\n}\n' +
'</style>\n\n' +

'<!-- HTML Code -->\n' +
((linkurl) ? '<a href="' + linkurl + '" target="' + linktarget + '">' : '') +
((imagesrc) ? '<img src="' + imagesrc + '" alt="' + alttext + '" class="GeneratedImage">' : '') +
((linkurl) ? '</a>' : '') +
'\n';

document.imageCodeGenerator.generatedCode.value = output;
document.getElementById('displayResult').innerHTML = output;
document.getElementById('BorderColor').style.borderColor = bordercolor;

return output;
}

Note:- Also add style.css and demo.js link in index.html File.


, ,

Related Posts

CSS Code Beautifier
CSS GENERATOR

Streamline Your Code with an Online CSS Code Beautifier

Khushal
CSS Minify Tool
CSS GENERATOR

Online CSS Minify Tool and Compressor

Khushal

Leave a Reply

Your email address will not be published. Required fields are marked *