Recently, was playing around basic javascript Dom functionality elements. The main task was to trigger some functionality via onclick event of JS, and change the view of anchor and img tags inside the DOM component.
For instance we have HTML looking like this:
<a href="javascript:void(0)" onclick="enable_foo()" id="dist_link" title='Enable'><img src="ruler.png" id="ruler_img"/></a>
For this case a basic JS script would look like:
function enable_foo(){ var link_text = document.getElementById('dist_link'); var my_title = link_text.getAttribute('title'); if(my_title == 'Enable'){ link_text.firstChild.data = 'Disable'; link_text.setAttribute('title','Disable'); document.getElementById('ruler_img').src = "ruller_enabled.png"; } else if(my_title == 'Disable'){ link_text.firstChild.data = 'Enable'; link_text.setAttribute('title','Enable'); document.getElementById('ruler_img').src = "ruller.png"; }
For avoiding the changes of the image, you can always fire up the title of anchor tag by removing the call for ‘ruler_img’ (with img tag inside anchor in HTML as well) tag and using:
link_text.firstChild.data = 'Enable'; //or link_text.firstChild.data = 'Disable';


English


Russian