Image onmouseout , onmouseover and onclick

Requirement:- A web page should contain an image say top arrow image.
When user visit to a page , top arrow image should be in disable form (say in grey color) , when user hover over the image , it should get activated and turns to other color (say in green) and when user clicks on that image , it should turns to other color (say blue).

images:- top_arrow_disable.jpg , top_arrow_active.jpg and top_arrow_visited.jpg

1st Solution:-

<script type=”text/javascript”>
function checkHidden(id,checkVal){
var hiddenVal = document.getElementById(‘check’).value;
//alert(‘Link is already clicked:Onclick takes precedence’);
//alert(‘on mouse over’);
else if(checkVal==’out’){
//alert(‘on mouse out’);
else if(checkVal==’clicked’){
//alert(‘just clicked’);

<a  href=”#top” onclick=”checkHidden(‘a1′,’clicked’);” onMouseOver=”checkHidden(‘a1′,’over’);” onMouseOut=”checkHidden(‘a1′,’out’);”>
<img id=”a1″ src=”images/up_arrow1.gif” name=”anandf” width=”16″ height=”16″ border=”0″>

2nd solution:-

 <script type=”text/JavaScript”>
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<a href=”#top” onMouseOut=”MM_swapImage(‘Top’,”,’../images/up_arrow3.gif’,1)” onMouseOver=”MM_swapImage(‘Image1′,”,’../images/up_arrow2.gif’,1)”><img src=”../images/up_arrow1.gif” name=”Image1″ width=”16″ height=”16″ border=”0″></a>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: