HTML Image Code Generator


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.






  


 
 
HTML Image Code Generator
    


 

HTML 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:

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 = '\n\n' +

'\n' +
'\n\n' +

'\n' +
((linkurl) ? '' : '') +
((imagesrc) ? '' + alttext + '' : '') +
((linkurl) ? '' : '') +
'\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.


Leave a Comment