In this tutorial i am gonna show you how a javascript function can be hooked to a HTML element with its predefined class or id attribute. We are going to use class attribute here because we may want to have multiple elements of the same kind where in we want the javascript functions to be hooked. We can have same class names for multiple html elements but there should be unique ID for each HTML element.
<div>
<a href="#" class="overlay">Show a hidden div</a>
</div>
<div>
<a href="http://blog.realin.co.in" >Visit my blog</a>
</div>
<div style="display:none;background-color:yellow;" id="mydiv">I am the hidden div</div>function hookFunc(){ var d=document.getElementById("mydiv"); var anchortags=document.getElementsByTagName("a"); for(i=0;i<=anchortags.length;i++) { var currentTag=anchortags[i]; if(currentTag.className=="overlay") { currentTag.onmouseover=function() { d.style.display="block"; } currentTag.onmouseout=function() { d.style.display="none"; } } } }
Explanation: I have two anchor tags in my HTML, one with the classname overlay and another without a class attribute or even with any class name we had not effected the code. The function getElementsByTagName(“a”) returns the array of all the anchor tags present in the document. We pick the anchor tag whose classname is overlay and then we hook the javascript function to that div.
You can see the working example below:
Hope you like it, if you have any feedback, questions leave a comment.
Cheers !!
Realin !
Hullo Sachin,
thanx for the good work of making us know these things.
I however wanted to know how i can define or call a javascript function from a css class or id.
I basically want to display a javascript carousel image rotator and i have the function but don`t know how i can call it using a css class that i can later reference in an html tag.
Thanx in advance..
Hey Semakula Abdul,
Thanks for dropping in .. I was unable to understand what you want to do in the above query, but still I will try to answer.
1) The above example only searches for a particular class and hooks an anonymous function to that very element, you can call your function from inside that function.
2) Simply calling a javascript function is also achievable in the following way.
<a href=”" onclick=”my_javascript_function();” rel=”nofollow”> Click here to move the carousel </a>
Let me know if that helped you or it would be great if you can clarify your question
Cheers!!
Thanx guys,
I think i wasn`t clear what i wanted.. here now.
i have a
var … ;…
Book_Image_Sources=new Array(…);
function carousel() {…}
I want to (i hope it`s possible) call the script above in a css class or id like
#carouse
{
[B]… somehow call the script above[/B]
}
then in my html code
i hope am clearer now. i know its something simple but just can`t make out how.
Thanx
Well nothing is impossible, probably there is a way to do it if you can hack background:url(javascript:alert()) thing … Give it a shot..
Actually I am using a WYSIWYG editor (tinyMCE) and apparently it comments out the javascript and displays the js code in the frontend.
so am trying to find a work around this and am hoping the above approach will do it.
Thanx
good stuff! i have a question though, what if i want to give a script im using a class, how would i do so?
for ex: im running a random image script, the images are called in the JS file, so i cant give them a specific class using css can i?
the JS code thats in the body of the html simply just calls the function, …this has been bugging me…can you help?
I am a Student! and we have a subject Programming the web” this tutorial as well as the whole category “Javascript” “PHP” is very handy
Glad that the posts are helping you guys.