image alt message reading and changing by using JavaScript

We can read or change the alternate message kown as alt of any image by using image object. Here is an example.

document.getElementById('i1').alt='alt message here'

We can set the alt message and title message of an image by using user entered data.

Demo of changing alt message by user

Here is the source code of this.

<html>
<head>
<title>plus2net.com demo and button</title>
<script language='JavaScript' type='text/JavaScript'>
<!--
function change_title(){ 
document.getElementById('i1').alt=document.getElementById("t1").value;
document.getElementById('i1').title=document.getElementById("t1").value;

document.getElementById("d1").innerHTML= document.getElementById("t1").value;
}
//-->
</script>
</head>
<body>
<img src=images/help.jpg id='i1' alt='Default alt text' width=50, hight=50>
<br><br>

<input type=text id='t1' size=50 ><input type=button onclick='change_title()'; value='Change Alt'><br>
 <br><br> <br><br>
Here is the text as you enter.<br><br>

<div id="d1"></div>
<br><br>

Return to <a href=image-alt.php>tutorial on image alt tag</a>

</body>
</html>

We will modify the above demo to change the alt text as the user type in the text box.

Demo updating alt mesage as user type

Here is the source code

<html>
<head>
<title>plus2net.com Demo of Adding or alt tag</title>
<script language='JavaScript' type='text/JavaScript'>

<!--
function change_title(keyEvent){ 
//alert(keyEvent); 
keyEvent = (keyEvent) ? keyEvent: window.event; 
input = (keyEvent.target) ? keyEvent.target : 
keyEvent.srcElement; 
if(keyEvent.type=="keyup"){ 
if(input.value){ 
//document.getElementById('i1').alt=document.getElementById("t1").value;
document.getElementById('i1').title=document.getElementById("t1").value;

document.title=document.getElementById("d1").innerHTML= document.getElementById("t1").value;
}
 } 
}
//-->
</script>
</head>
<body>
<img src=help.jpg id='i1' alt='This is help' width=50, hight=50>
<br><br>

<input type=text id='t1' size=50 onkeyup='change_title(event)';><br><br>
 <br><br><br><br>
Here is the text as you enter.<br><br>
<div id="d1"></div>

</body>
</html>

Managing Height of Image
Image Object

Subscribe to our YouTube Channel here

JavaScript image alt

Subscribe