How to change images on click event?

Hello Every one,
i have three small images while clicking on each one the image of background should be changed. I have used javascript Dom along div, for the first two images it works but i don't know how to get right the third one.
Could anyone help?

Expand|Select|Wrap|Line Numbers

 <style type="text/css">

    #div1 {

    width:100px;

    height:100px;

    background-image:url(../photo/cake.jpg);

    }

</style>
 
<script language="javascript" type="text/javascript">

function changeDivImage(){

        var imgPath = new String();

        imgPath = document.getElementById("div1").style.backgroundImage;

        if(imgPath == "url(../photo/cake.jpg)" || imgPath == ""){

            document.getElementById("div1").style.backgroundImage = "url(../photo/cake.jpg)";

            }else{    

            document.getElementById("div1").style.backgroundImage = "url(../photo/cake1.jpg)";
 
        }

}

    </script>

</head>
 
<body>

    <div id="div1">

    </div>

<input type="button" value="Change Image" onClick="changeDivImage()" />

Feb 27 '11 #1

Subscribe Post Reply

✓ answered by dgreenhouse

Oops!

Sorry about that...

Remove the semicolons ";" after each image class definition.
i.e.

Expand|Select|Wrap|Line Numbers

 
  .image1 {background-image:url(../photo/cake1.jpg)};

  .image2 {background-image:url(../photo/cake2.jpg)};

  .image3 {background-image:url(../photo/cake3.jpg)};
 
// should be...
 
  .image1 {background-image:url(../photo/cake1.jpg);}

  .image2 {background-image:url(../photo/cake2.jpg);}

  .image3 {background-image:url(../photo/cake3.jpg);}
 
// Good practice dictates including the semicolons after each selector as in:

// .image3 {background-image:url(../photo/cake3.jpg);}

4272

dgreenhouse

250

Expert 100+

An easier way would be to change the class name of the div and to have css existent that applies the background.

I think I've got this correct...

i.e.

Expand|Select|Wrap|Line Numbers

 
<style type="text/css">

    #div1 {

    width:100px;

    height:100px;

    }

  .image1 {background-image:url(../photo/cake1.jpg)};

  .image2 {background-image:url(../photo/cake2.jpg)};

  .image3 {background-image:url(../photo/cake3.jpg)};

</style>
 
<script language="javascript" type="text/javascript">

  function changeDivImage(){

    var elm = document.getElementById("div1");

    var new_class_name = "";
 
    switch (elm.className) {

      case "image1":

        new_class_name = "image2";

        break;

      case "image2":  

        new_class_name = "image3";

        break;

      default:

        new_class_name = "image1";   

    }
 
    elm.className = new_class_name;

  }

</script>

</head>
 
<body>

    <div id="div1" class="image1">

    </div>

<input type="button" value="Change Image" onClick="changeDivImage()" />

Feb 28 '11 #2

Mary Meer

i can get only the default img the other two does not show up

Feb 28 '11 #3

dgreenhouse

250

Expert 100+

Oops!

Sorry about that...

Remove the semicolons ";" after each image class definition.
i.e.

Expand|Select|Wrap|Line Numbers

 
  .image1 {background-image:url(../photo/cake1.jpg)};

  .image2 {background-image:url(../photo/cake2.jpg)};

  .image3 {background-image:url(../photo/cake3.jpg)};
 
// should be...
 
  .image1 {background-image:url(../photo/cake1.jpg);}

  .image2 {background-image:url(../photo/cake2.jpg);}

  .image3 {background-image:url(../photo/cake3.jpg);}
 
// Good practice dictates including the semicolons after each selector as in:

// .image3 {background-image:url(../photo/cake3.jpg);}

Feb 28 '11 #4

Mary Meer

that is gr8,but if i click on first img several times then it goes on and on till last img,it should show only one img by one click and then stop.
i have all tags closed still the same problem

thanks for help

Mar 1 '11 #5

dgreenhouse

250

Expert 100+

I'd have to imagine that something is wrong in your code - it works fine for me.

Mar 1 '11 #6

Mary Meer

that is a headache, i did copy all code and see nothing wrong.

i will go through once again

Mar 1 '11 #7

by: Pete | last post by:

I have some funky form/event behavior. Access 97. Split frontend/backend, using Access security. I have the same behavior (or lack of behavior) for the pag_Click() event of two separate pages...

Microsoft Access / VBA

Click event on an ImageButton column

by: J McD | last post by:

Hi I have a DataGrid with an ImageButton column. When I click on an imagebutton I get a postback but it doesn't run the OnImgBtnClick method. I can actually comment out the line where I add this...

ASP.NET

ImageButton control fails to capture click event when alternate textis displayed

by: Benjamin Gavin | last post by:

Hi all, I recently stumbled upon a bug in the ASP.NET framework handling of ImageButton based postbacks. The issues derives from the fact that IE and Mozilla handle the case of a missing image...

ASP.NET

Code for Button Click Event

by: Sarah | last post by:

I have code that I want to run so that if the result is true, it changes the current button's ".DialogResult" property to "DialogResult.OK". Problem is, when I run this code on the ".Click" event...

Visual Basic .NET

how to "see" click event from a usercontrol

by: JohnR | last post by:

In it's simplest form, assume that I have created a usercontrol, WSToolBarButton that contains a button. I would like to eventually create copies of WSToolBarButton dynamically at run time based...

Visual Basic .NET

Problem catching click event

by: Kjell Kristiansson | last post by:

I have not been able to figure out how to catch the click event from a button that is added dynamically to a table. In priciple the process is as follows: When I first create the page I analyse...

Visual Basic .NET

Open File Dialog and Picturebox Click Event

by: Mattbooty | last post by:

Hello, Not sure if anyone else has seen this bug, but I have a form where the entire form is covered with a picturebox. The picturebox has a mouseup event. I also have an open file dialog for...

Visual Basic .NET

TextChanged vs. [Button] Click Event

by: Robert W. | last post by:

I'm new to ASP.net programming so excuse my ignorance if the following question seems overly simplistic. I've created a simple Login form with 3 primary WebControls: - A TextBox for the Username...

ASP.NET

how to change images based on action.Even clicking changed images should do respective actions?

by: vj | last post by:

how to change images based on action. Even clicking changed images should do respective actions. and while displaying only one image at a time sholud get displayed. I am using three images for a...

Javascript

firing button click event before page load event.....????

by: GauravGupta | last post by:

i want to know that is it posible to call button click event before page load event on post back.... please help me....

ASP.NET

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to change images on click event?

✓ answered by dgreenhouse

Similar topics