Member Avatar for himmat.m4

I want to change image at click event in jsp.
suppose I have img1 and img2, whenever I click on img1 thn display img2 and again click on img2 then display img1.
so tell me how to do that.

code is

<%-- 
    Document   : imgChange
    Created on : 26 Aug, 2010, 3:17:46 PM
    Author     : node4
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <SCRIPT LANGUAGE="JavaScript">
            <!--
            var flag = true;

            if(document.images)
                {
                    var img1 = new Image();
                    img1.src = "images/nice.jpg";

                    var img2 = new Image();
                    img2.src = "images/bus.jpg";
                }
            function image1()
            {               
                if (flag==true)
                    {
                        document["imgChange"].src = img1.src;
                        flag=false;
                        
                    }
                    else
                        {
                            document["imgChange"].src = img2.src;
                            flag=true;
                            alert("flage is "+flag)
                        }


               /* if(document.images)
                    {
                     document["imgChange"].src = img1.src;
                     var im;
                     im = document["imgChange"].src
                     //alert("hi")
                      if(im == "http://localhost:8084/OnlineTravel/images/nice.jpg")
                          {
                            document["imgChange"].src = img1.src;
                          }else
                              {
                                  document["imgChange"].src = img2.src;
                              }
                    }*/
            }
            function image2()
            {
              
            }
           
            //-->
        </SCRIPT>
    </head>
    <body>
        <h1>Hello World!</h1>
        <a href="imgChange.jsp" onclick="image1()"><img src="images/bus.jpg" id="ck" alt="" width="40" height="40" name="imgChange"></a>
        
    </body>
</html>

Thank's in advance.

By Himmat

Edited by peter_budo because: Keep It Clear - Do wrap your programming code blocks within [code] ... [/code] tags
  • 2 Contributors
  • 1 Reply
  • 255 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by javaAddict
Member Avatar for javaAddict

I would have done this:

<img src="images/bus.jpg" id="ck" alt="" width="40" height="40" name="imgChange" onclick="changeImage();">
function changeImage() {
  if (document.getElementById("ck").src=='images/bus.jpg') {
    document.getElementById("ck").src = 'images/nice.jpg';
  } else if (document.getElementById("ck").src=='images/nice.jpg') {
    document.getElementById("ck").src = 'images/bus.jpg';
  }
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.