javascript - change backgroung colour of div when button is pressed -
i designing ui & here not able format properly.
2 things not able :--
- left-1, left-2, left-3 .. text comming @ bottom of button image. want them come @ right of image ?
- whwen ever press button on left possible change background colour of in image & text (i.e left-1 & left-2) placed ?
how can acive this.
code :--
<!doctype html> <html style="height: 100%;"> <head> <style> body, html { width:100%; height:100%; margin:0; padding:0; position:relative; } .input { display: inline-block; padding: 0 2px; } .input input { display: block; } .imgtxt { margin: 0; font-family:arial; color:#dddfed; font-size:15px; } #images { background-color:#888686; white-space:nowrap; } div.scrollable { width: 100%; margin: 0; padding: 0; overflow: auto; padding-left: 4px; padding-top: 20px; box-sizing:border-box; } div.scrollablemenu { width: 100%; margin: 0; padding: 0; overflow: auto; padding-left: 4px; padding-top: 20px; box-sizing:border-box; } #menu { background-color:#292b3b; position:absolute; top:124px; bottom:20px; left:0; width:200px; } #center { background-color:#eeeeee; position:absolute; top:124px; left:200px; right:0px; bottom:20px; } #fotter { background-color:#cc99ff; text-align:center; position:absolute; left:0; bottom:0; width:100%; } </style> </head> <body > <body> <div id="images" class="scrollable"> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" title="room one" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-1</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-2</p> <hr style="border-color:#dddfed; background-color:#00ff00;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-3</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-4</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" title="room one" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-5</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-6</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-7</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-8</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-9</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" title="room one" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-10</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-11</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-12</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-13</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-14</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" title="room one" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-15</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-16</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-17</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-18</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> <div class="input"> <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" /> <p class="imgtxt">keypad-19</p> <hr style="border-color:#dddfed; background-color:#dddfed;align="left";width="80px"; size="4px";"> </div> </div> <div id="menu" class="scrollablemenu"> <div > <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" title="room one" alt="bulb pop up" width="80" height="48" hspace="10"/> <p class="imgtxt" style="padding-left : 16px;">left-1</p> </div > <hr/> <div > <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" hspace="10" vspace="6"/> <p class="imgtxt" style="padding-left : 16px;" >left-2</p> </div> <hr/> <div > <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" hspace="10" vspace="6"/> <p class="imgtxt" style="padding-left : 16px;" >left-3</p> </div> <hr/> <div > <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" hspace="10" vspace="6"/> <p class="imgtxt" style="padding-left : 16px;" >left-4</p> </div> <hr/> <div > <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" hspace="10" vspace="6"/> <p class="imgtxt" style="padding-left : 16px;" >left-5</p> </div> <hr/> <div > <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" hspace="10" vspace="6"/> <p class="imgtxt" style="padding-left : 16px;" >left-6</p> </div> <hr/> <div > <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcs6qbsj91xp2yoqjide4qbyagsf8deoyi0c1tutldprxwuqb34-" onclick="alert('clicked')" alt="bulb pop up" width="80" height="48" hspace="10" vspace="6"/> <p class="imgtxt" style="padding-left : 16px;" >left-7</p> </div> <hr/> </div> <div id="center">table center</div> <div id="fotter">copyright © 2014 first layout</div> </body> </body> </html> 
part 1: placing text right, can use float property of css
part 2: , changing color, can use example jquery.
code(i not using correct identifiers. giving basic idea can solve issues...)
css code part 1:
input { float:left; clear:both; } .imgtxt { float:right; } jquery code part 2:
$("button").clicked(function() { $("#your-div-to-change-color").css({'background':'#ddd'}); })
Comments
Post a Comment