1

I want to change the contents of a div using a button click and in another click I want to bring back the old contenns to div I am using a image for button...

My div code is below

<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row" >
<img src="images/A.Png" />
<img src="images/B.Png" />     
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />   
<img src="images/I.Png" />
<img src="images/J.Png" />  
<img src="images/K.Png" />   
<img src="images/L.Png" />                    
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />                       
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />              
<img src="images/W.Png" />                              
<img src="images/X.Png" />
<img src="images/Y.Png" /> 
<img src="images/Z.Png" />
</div>
</div>
<img  style="position:absolute; left: 272.5px; top: 647px; width: 171px; height: 122.5px;" src="images/Btn_Lower.png"  id="image1" />

Please help me to solve this issue

SARAVANA KUMAR
  • 474
  • 2
  • 6
  • 15

1 Answers1

4

I don't want to confuse you by solving your problem, instead I would like to give you a short and simple example.

You can't achieve it by only using HTML you need javascript. So here is a way.

1) When you say content, it is referred as innerHTML in javascript.

2) I think you know about onclick, it is called click event. Similar to that you have a lots of different events in javascript for keypress, doubleclick, etc.,

3) Hope you know ID, called as unique selector. Other selector like class and you can HTML5 data-attributes.

4) To select an element, in JS you can use different methods like,

document.getElementById         // select element based on Unique ID
document.getElementsByClassName // select element based on class
document.getElementsByTagName   // select element based on Tag name

If you're insterested to learn more about javascript refers Mozilla Developers Network

Here is the shot example I would like to present to you.

HTML: 

<div id="divd">First</div>
<button onclick='changeMe()'>Click It</button>

JS:

function changeMe() {
    var div = document.getElementById('divd').innerHTML;
    if (div === 'First') {
        document.getElementById('divd').innerHTML = "Second";
    } else {
        document.getElementById('divd').innerHTML = "First";
    }
}

Demo

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • I understand the concept sir how can i pass all the div content exactly in my code... I tried to put but shows error can you please shed light on this – SARAVANA KUMAR Aug 03 '13 at 08:36
  • @Saravanakumar Can you explain what you want with your HTML? – Praveen Aug 03 '13 at 08:52
  • This **[Mycode](http://jsfiddle.net/shyamsundar055/RD9BT/)** is my code I tried on your guideline but not worked for me please edit and find out errors – SARAVANA KUMAR Aug 03 '13 at 09:11