JavaScript image alt

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. 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. 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>

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    More on JavaScript Image Object
    Image SlideShow Script using navigational buttons
    Image Loading to cache while page load by Image object
    Reloading the image without refreshing the page
    Image Rotator Script for automatic Slideshow
    Image Move across by button click
    Image Move continuously across screen
    Image offSetLeft and offSetTop to get position of the image from left and top
    Image Position : Positioning an image by assigning value to style.top and style.left
    Image width: Managing width of the image
    Image height: managing height of the image
    Image align: Image align left or right
    Image border: adding and removing border from Image
    Image alt: updating or reading alt message of image

    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer