Some nice-simple JavaScript effects !!

[careerbridge]

Hi friends,

This thread is for those who interested in making their site more interesting with some simple JavaScript codes and for those who wish to share their nice ideas with other x10 members. So, if you have some nice codes, please post here....

Ok, here is a very simple code for image hover effect !! ( I am a beginner in JavaScript and correct me if I am wrong)

JavaScript

<script type="text/javascript">
function sChange(mID){
    mItem=document.getElementById(mID);
    mItem.width=mItem.width*1.10;
    mItem.height=mItem.height*1.10;
}
function sRestore(mID){
    mItem=document.getElementById(mID);
    mItem.width=mItem.width*0.91;
    mItem.height=mItem.height*0.91;
}
</script>

HTML

  <img src="browse.png" id="img1" onmouseover="sChange('img1')" 
onmouseout="sRestore('img1')" />

Details : Here we got an image (id="img1"). On the mouseover and mouseout events we are calling two JavaScript functions sChange() and sRestore(). We are giving the image id as the parameters for the function. And inside the function we are using document.getElementById() function to get the image object. Now we change change any properties of the object (here the height and width)


Want to see this code in action ?? go here....http://h1.ripway.com/careerbridge/hover.html

Or go to my home page to see a practical example (at the bottom of the page)... http://careerbridge.edu.ms/

 

[zx666]

Hi friends,

This thread is for those who interested in making their site more interesting with some simple JavaScript codes and for those who wish to share their nice ideas with other x10 members. So, if you have some nice codes, please post here....

Ok, here is a very simple code for image hover effect !! ( I am a beginner in JavaScript and correct me if I am wrong)

JavaScript

<script type="text/javascript">
function sChange(mID){
    mItem=document.getElementById(mID);
    mItem.width=mItem.width*1.10;
    mItem.height=mItem.height*1.10;
}
function sRestore(mID){
    mItem=document.getElementById(mID);
    mItem.width=mItem.width*0.91;
    mItem.height=mItem.height*0.91;
}
</script>

HTML

  <img src="browse.png" id="img1" onmouseover="sChange('img1')" 
onmouseout="sRestore('img1')" />

Details : Here we got an image (id="img1"). On the mouseover and mouseout events we are calling two JavaScript functions sChange() and sRestore(). We are giving the image id as the parameters for the function. And inside the function we are using document.getElementById() function to get the image object. Now we change change any properties of the object (here the height and width)


Want to see this code in action ?? go here....http://h1.ripway.com/careerbridge/hover.html

Or go to my home page to see a practical example (at the bottom of the page)... http://careerbridge.edu.ms/

Nice, thx that will help me