I wanted to change my image depending on input length. For example, if for Username input length of text is greater then 4 , change image. For password it could be minimum 6 (so greater then 5). But a real problem comes to email. I want javascript to check if valid form of email is typed in like: example@mail.com . I don’t know how to do any of this but I hope some of you can help me. Here is my kontakt.html page:
<!DOCTYPE HTML>
<html>
<title>Scientistic template</title>
<link rel="icon" href="Slike/favicon.ico" />
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
<meta name="author" content="Aleksandar Arsic" />
<meta name="description" content="Template Srpske IT edukacije" />
<meta name="keywords" content="Template,Srpska IT edukacija" />
<meta charset="UTF-8" />
<script type="text/javascript">
var textBox = document.getElementById("name");
var textLength = textBox.value.length;
</script>
</head>
<body>
<div id="header">
<img src="Slike/erlenmajer.png">
<p>Science<span>.org</span></p>
<ul id="nav">
<li><a href ="pocetna.html">Home</a></li>
<li><a href ="projekti.html">Projects</a></li>
<li><a href ="#">About us</a></li>
<li><a href ="#">Contact</a></li>
</ul>
</div>
<div id="contact">
<table>
<tr>
<td style="text-align:right !important;padding-right:20pt;"><p>Name:</p></td>
<td><input type="text" id="name"/><img src="Slike/checkmark-false.png" id="IME" style="vertical-align:middle;margin-left:10px;" width="24px" height="24px"></td>
</tr>
<tr>
<td style="text-align:right !important;padding-right:20pt;"><p>Title:</p></td>
<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
</tr>
<tr>
<td style="text-align:right !important;padding-right:20pt;"><p>Email:</p></td>
<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
</tr>
<tr>
<td style="text-align:right !important;padding-right:20pt;"><p>Message:</p></td>
<td><input type="text" /><img src="Slike/checkmark-false.png" style="vertical-align:middle;margin-left:10px;"></td>
</tr>
</table>
</div>
<div id="footer">
<table id="foot">
<tr>
<td>
<p>Social</p><br>
<a href="#"><img src="Slike/facebook.png" id="fb" title="Facebook" onmouseover="this.src='Slike/facebook-hover.png'" onmouseout="this.src='Slike/facebook.png'" /></a>
<a href="#"><img src="Slike/twitter.png" onmouseover="this.src='Slike/twitter-hover.png'" onmouseout="this.src='Slike/twitter.png'"/></a>
<a href="#"><img src="Slike/youtube.png" onmouseover="this.src='Slike/youtube-hover.png'" onmouseout="this.src='Slike/youtube.png'"/></a>
<a href="#"><img src="Slike/google+.png" onmouseover="this.src='Slike/google+-hover.png'" onmouseout="this.src='Slike/google+.png'"/></a>
<a href="#"><img src="Slike/linkedIn.png" onmouseover="this.src='Slike/linkedIn-hover.png'" onmouseout="this.src='Slike/linkedIn.png'"/></a>
<a href="#"><img src="Slike/mail.png" onmouseover="this.src='Slike/mail-hover.png'" onmouseout="this.src='Slike/mail.png'"/></a>
</td>
<td>
<p>Partneri</p><br>
<a href="#">Partner 1</a><br>
<a href="#">Partner 2</a><br>
<a href="#">Partner 3</a><br>
<a href="#">Partner 4</a><br>
<a href="#">Partner 5</a><br>
</td>
<td>
<p>Copyright © www.srpskaitedukacija.org</p>
</td>
</tr>
</table>
</div>
</body>
</html>
And CSS:
/*Stilizovanje stranice*/
* {
padding:0;
margin:0;
}
@font-face {
font-family:Header;
src: url('Fonts/THEOREM.ttf');
}
body {
background-color:#dfdfdf;
}
#header {
position:relative;
line-height:200pt;
width:100%;
height:200pt;
background-color:#1a1a1a;
clear:both;
}
#header img {
margin-left:50pt;
vertical-align:middle;
}
#header p {
display:inline-block;
font-family:Header;
margin-left:10pt;
font-size:20pt;
color:#fff;
}
#header p span {
color:#84a3e8;
}
#nav {
margin-right:100pt;
float:right;
display:inline;
}
#nav li {
list-style-type:none;
display:inline-block;
padding-right:10pt;
padding-left:10pt;
}
#nav li a {
color:#fff;
font-family:Header;
font-size;:15pt;
text-decoration:none;
}
#nav li a:hover {
color:#84a3e8;
}
#container {
margin-top:50pt;
width:1000px;
margin-left:auto;
margin-right:auto;
margin-bottom:50pt;
}
#container td {
text-align:center;
}
#container td p {
font-family:Header;
font-size:14pt;
color:#000;
}
#footer {
width:100%;
height:200pt;
background-color:#fff;
border-top:1px solid #b4b4b4;
}
#foot {
width:1000px;
margin-left:auto;
margin-right:auto;
}
#foot td {
height:200pt;
text-align:center;
vertical-align:middle;
}
#foot p {
font-family:Header;
font-size:12pt;
color:#000;
}
#foot a {
text-decoration:none;
font-family:Header;
color:#84a3e8;
font-size:12pt;
}
#foot a:hover {
color:#333333;
}
#news {
width:100%;
height:500pt;
background-color:#e9e9e9;
border-top:1px solid #424141;
border-bottom:1px solid #c4c4c4;
}
#news table {
width:80%;
height:500pt;
margin-left:auto;
margin-right:auto;
}
#news table td {
font-family:Header;
font-size:12pt;
}
#text {
text-align:left !important;
text-indent:50px;
}
.container {
width:500px;
height:400px;
background-color:#fff;
border-bottom:15px solid #9c9c9c;
border-left:1px solid #9c9c9c;
border-top:1px solid #9c9c9c;
border-right:1px solid #9c9c9c;
}
#img1 {
opacity:0.7;
background-image: url('Slike/stock1.jpg');
background-repeat:no-repeat;
}
#img1:hover,#img2:hover {
opacity:1;
}
#img2 {
opacity:0.7;
background-image: url('Slike/stock2.jpg');
background-repeat:no-repeat;
}
#projects {
width:100%;
height:400pt;
background-color:#e0e6f4;
border-top:1px solid #424141;
}
#projects table {
height:400pt;
width:1000px;
margin-left:auto;
margin-right:auto;
}
#projects table td {
padding:10pt;
}
.projekat {
background-color:#fff;
width:100%;
height:100px;
border-left:10px solid #cdd4e6;
border-top:1px solid #cdd4e6;
border-right:1px solid #cdd4e6;
border-bottom:1px solid #cdd4e6;
text-align:center;
}
.projekat a{
font-family:Header;
font-size:10pt;
margin-top:5px;
text-decoration:none;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
width:90%;
height:60px;
margin-top:10px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-color:#7f91c0;
}
progress[value]::-moz-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar {
background-color:#7f91c0;
}
#contact {
width:100%;
height:400pt;
background-color:#5f0504;
border-top:1px solid #424141;
border-bottom:1px solid #340302;
}
#contact table {
height:400pt;
margin-left:32%;
}
#contact table td {
text-align:center;
}
#contact table td p {
color:#fff;
font-family:Header;
font-size:12pt;
}
input {
font-family:Helvetica;
font-size:10pt;
color:#fff;
width:300px;
height:40px;
background-color:#1d1d1d;
border:1px solid #6e0a0a;
}
input:focus {
box-shadow: 0px 0px 15px #9c100e;
outline: none
}
#contact table td +td{white-space:nowrap}
For message field input it would be okay just not to less then 10 characters. If someone know how this can be achieved I would be really thankful.