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;
if(hiddenVal==’clicked’){
if(checkVal==’over’){
document.getElementById(id).src=”images/up_arrow2.gif”;
}
if(checkVal==’out’){
document.getElementById(id).src=”images/up_arrow3.gif”;
}
//document.getElementById(id).src=”images/up_arrow3.gif”;
//alert(‘Link is already clicked:Onclick takes precedence’);
}
else{
if(checkVal==’over’){
//alert(‘on mouse over’);
document.getElementById(id).src=”images/up_arrow2.gif”;
}
else if(checkVal==’out’){
//alert(‘on mouse out’);
document.getElementById(id).src=”images/up_arrow1.gif”;
}
else if(checkVal==’clicked’){
//alert(‘just clicked’);
document.getElementById(id).src=”images/up_arrow3.gif”;
document.getElementById(‘check’).value=’clicked’;
}
}
}

</script>
<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″>
</a>

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];}
}
//–>
</script>

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

Advertisements

Difference between HTML & XHTML

The most important difference between two markup language is:

HTML(Hypertext markup language)  is an application of SGML(standard generalized  markup language) & allow author to omit certain tags and use attribute minimization.

XHTML(Extensible  HTML )  is an application of XML.It doesn’t  permit permission of any tags or use of attribute minimization.

however ,XHTML provides the shorthand notation for empty tags – for eg. <br/> insteda of  <br></br> – which HTML doesn’t  allow.

Whenever we are using CSS , there are three areas in which difference between HTML & XHTML affect.

1. Case Sensitivity

In HTML , <br/> is same as <BR/> or <h1></H1> is perfectly fine, but in XHTML it won’t work.

Because XML parser are case sensitive.

2. optional tags

In HTML, <html><head><body><tbody> all four are optional ones but in XHTML they are not optional ones except <tbody>.

3.properties for root element.

Hypertext Transfer Protocol — HTTP/1.1[ Error Code 4xx & 5xx ]

The 4xx class of status code is a Client side error.Whenever a Client request for any method or resource to server and if there is some error while requesting method or resource,the error will display at Client side.

1. 404 —- NOT FOUND
When server ha s not found anyhthing matching the request URI.

2. 405 —- METHOD NOT ALLOWED
The method specified in the Request-Line is not allowed for the resource identified by the Request-URI. The response MUST include an Allow header containing a list of valid methods for the requested resource.

3. 406 —- NOT ACCEPTABLE
The resource identified by the request is only capable of generating response entities which have content characteristics not acceptable according to the accept headers sent in the request.

4. 407 — PROXY AUTHENTICATION REQUIRED

5. 408 — REQUEST TIME OUT

6. 409 — CONFLICT
The request could not be completed due to a conflict with the current state of the resource.

7. 410 — GONE
The requested resource is no longer available at the server and no forwarding address is known.

8. 411 — LENGTH REQUIRED
The server refuses to accept the request without a defined Content- Length.

9. 414 — REQUEST URI TOO LONG

10. 415 — UNSUPPORTED MEDIA TYPE

SERVER SIDE ERROR CODE

1. 500 — INTERNAL SERVER ERROR

2. 501 — NOT IMPLEMENTED
The server does not support the functionality required to fulfill the request.

3. 502 — BAD GATEWAY

4. 503 — SERVICE UNAVAILABLE

5. 504 — GATEWAY TIME OUT

6. 505 — HTTP VERSION NOT SUPPORTED

—- [ Gud site to learn Java ] —-

http://j2eebrain.com/j2ee_tut_main/j2eetutdownloadmain1.htm

http://struts.javabeat.net/tutorials/index.php

http://www.onjava.com/pub/a/onjava/2005/08/03/hibernate.html

http://java.sun.com/j2ee/1.4/docs/devguide/dgsecure.html#wp25790

http://www.roseindia.net/struts/struts-projects.shtml

gud site to learn CSS

http://reference.sitepoint.com/css/css  🙂