By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,516 Members | 1,168 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,516 IT Pros & Developers. It's quick & easy.

change the background image when Button Click

100+
P: 250
change the background image when Button Click
======================================
I' developing site with php and postgres. It has menus list in the left side. and all are images(jpg)
EX:Add User, Edit User, Remove user(all arebuttons)
I have another set of images with different color. Those will display only after the mouse click. How can I do this? How can change the image(button) when clicked? Please help me
Jun 4 '09 #1
Share this Question
Share on Google+
9 Replies


Ciary
Expert 100+
P: 247
correct me if i'm wrong but seems to me like all you want to do is change the image onclick.

i dont think php is the best option since you'll have to reload the page to change it.

you can do it using javascript, changing image source on mousedown, on mouseup and on mouseout. although even this might be a bit overpowered.

i think your best shot is CSS. there you can change style when a link is 'active' (meaning you're clicking on it) or 'visited'(meaning you've clicked it)
i think this is only possible using an <a> tag, but if you enter an event, you can then change things as with standard javascript or submit a form.

hope that helps
Jun 4 '09 #2

Markus
Expert 5K+
P: 6,050
You can change an image's src attribute via javascript.

Something like below:

Expand|Select|Wrap|Line Numbers
  1. function changeSrc(el) {
  2.  
  3.     el.src = "image2.jpg";
  4.  
  5. }
  6.  
Expand|Select|Wrap|Line Numbers
  1. <img src="image1.jpg" onclick="changeSrc(this)" alt="" />
  2.  
Jun 4 '09 #3

RamananKalirajan
100+
P: 607
Are you having the Images as <img> or have u set the images as the background of an div/span/li. If you have set the image as background this would do the jon what you are looking.
Expand|Select|Wrap|Line Numbers
  1. function changeImage(this)
  2. {
  3.  
  4. if(window.ActiveXObject)
  5. {
  6.     document.getElementById(this.id).style.background='transparent url(/images/another.jpg) no-repeat top left;';
  7. }
  8. else
  9. {
  10.     document.getElementById(this.id).style.backgroundColor = 'transparent';
  11.     document.getElementById(this.id).style.backgroundImage = 'url(/images/another.jpg)';
  12.     document.getElementById(this.id).style.backgroundRepeat = 'no-repeat';
  13.     document.getElementById(this.id).style.backgroundPosition = 'top left';
  14. }
  15.  
  16. }
  17.  
Regards
Ramanan Kalirajan
Jun 4 '09 #4

Dormilich
Expert Mod 5K+
P: 8,639
"this" is a reserved keyword and should not be used as variable name. if the function is applied to the element, you can simplify it quite a bit.
Expand|Select|Wrap|Line Numbers
  1. function changeImage()
  2. {
  3.     // "this" refers to the element that is calling the function 
  4.     this.style.backround = "…"; 
  5.  
  6.     // and so forth…
  7. }
  8.  
  9. // example use (JS)
  10. document.getElementById("…").addEventListener("click", changeImage, false);
  11. // there are workarounds for IE's inability to follow standards => google
  12.  
  13. // example use (HTML)
  14. <img src="…" alt="…" onclick="changeImage()">
Jun 4 '09 #5

100+
P: 250
Thank u all. Markus said is working. But my requirements is little bit different.
I'll explain again. I have a web site with 3 links in left (Add User, Edit User, Remove user). Those three are jpg images.
Expand|Select|Wrap|Line Numbers
  1. <tr><td><img src="http://bytes.com/topic/javascript/common/images/AddNew.jpg"  width="161" height="43" /></td></tr>
  2.                  <tr><td><img src="http://bytes.com/topic/javascript/common/images/Edit.jpg" width="161" height="43" /></td></tr>
  3.                 <tr><td><img src="http://bytes.com/topic/javascript/common/images/Remove.jpg" width="161" height="43" /></td></tr>
  4.  
When I click Add button I want to load add.php page to the middle. and also the add button image should be changed.(I have same image with deffreent color). When user click edit button edit.php should load and button color(image) should change. (I use two images because of user should know which page he is in)How can I do thaat? Please help me..
Jun 9 '09 #6

acoder
Expert Mod 15k+
P: 16,027
What do you mean by "load in the middle"? Can you show the code for the container or is it a frame/iframe?
Jun 9 '09 #7

100+
P: 250
Expand|Select|Wrap|Line Numbers
  1.  
  2. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  3.                <tr>
  4.                    <td width="161" height="280" valign="top">
  5.                     <?php include '../common/left.php';?>    
  6.                 </td>
  7. <td><!-- Page contents goes here--></td>
  8.  
  9.  
I'm sorry.It is not loded . Every page include left.php. It has the above mentioned links.
Jun 9 '09 #8

acoder
Expert Mod 15k+
P: 16,027
You shouldn't be using tables for layout. Whatever the case, though, you will need to use Ajax to load the pages and need to give an id to the container element (a td in this case, but should probably be a div) so you can reference it easily using document.getElementById().
Jun 9 '09 #9

P: 1
For everyone wondering what this guy was looking to do - he was wanting buttons with an up state and a down state. He just didnt explain it very well.
This is a very old thread but i googled "ajax change background image" to find out the best way to use an ajax call to a php script which would return an image file location. This file location would be used to change the background of a div. I have already achieved it but wanted to make it as efficient as possible.

This is how i managed it:

mainfile.html:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="javascript" src="ajax_code.js"></script>
  4. </head>
  5. <body>
  6. <div id="image-control" >
  7.     <input id="change-bg" type="button" value="change-bg" onClick="changeimage('get-new-image.php','image-display')" />
  8. </div>
  9. <div id="image-display"></div>
  10. </body>
  11. </html>
  12.  
---------------------------------------------

ajax_code.js:

Expand|Select|Wrap|Line Numbers
  1. /*    AJAX script to call php script to deal with images
  2. */
  3.  
  4. //Create a boolean variable to check for a valid Internet Explorer instance.
  5. var xmlhttp = false;
  6. //Check if we are using IE.
  7. try {
  8. //If the Javascript version is greater than 5.
  9. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  10. } catch (e) {
  11. //If not, then use the older active x object.
  12. try {
  13. //If we are using Internet Explorer.
  14. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  15. } catch (E) {
  16. //Else we must be using a non-IE browser.
  17. xmlhttp = false;
  18. }
  19. }
  20. //If we are using a non-IE browser, create a javascript instance of the object.
  21. if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  22. xmlhttp = new XMLHttpRequest();
  23. }
  24.  
  25. function changeimage(serverPage, objID) {
  26.     var obj = document.getElementById(objID);
  27.     xmlhttp.open("GET", serverPage);
  28.     xmlhttp.onreadystatechange = function() {
  29.     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  30.     var result = xmlhttp.responseText;
  31.         obj.style.backgroundImage = result;        
  32.     }
  33.     }
  34.     xmlhttp.send(null);
  35.     }
  36.  
get-new-image.php:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. ##include code to get file name and put in variable $image_name
  3.  
  4. $new_image = "url(".$image_name.")";
  5. echo $new_image;
  6. ?>
Dec 13 '11 #10

Post your reply

Sign in to post your reply or Sign up for a free account.