471,321 Members | 2,150 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,321 software developers and data experts.

change the background image when Button Click

250 100+
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
9 25233
247 Expert 100+
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
6,050 Expert 4TB
You can change an image's src attribute via javascript.

Something like below:

Expand|Select|Wrap|Line Numbers
  1. function changeSrc(el) {
  3.     el.src = "image2.jpg";
  5. }
Expand|Select|Wrap|Line Numbers
  1. <img src="image1.jpg" onclick="changeSrc(this)" alt="" />
Jun 4 '09 #3
608 512MB
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. {
  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. }
  16. }
Ramanan Kalirajan
Jun 4 '09 #4
8,656 Expert Mod 8TB
"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 = "…"; 
  6.     // and so forth…
  7. }
  9. // example use (JS)
  10. document.getElementById("…").addEventListener("click", changeImage, false);
  11. // there are workarounds for IE's inability to follow standards => google
  13. // example use (HTML)
  14. <img src="…" alt="…" onclick="changeImage()">
Jun 4 '09 #5
250 100+
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>
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
16,027 Expert Mod 8TB
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
250 100+
Expand|Select|Wrap|Line Numbers
  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>
I'm sorry.It is not loded . Every page include left.php. It has the above mentioned links.
Jun 9 '09 #8
16,027 Expert Mod 8TB
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
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:


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>


Expand|Select|Wrap|Line Numbers
  1. /*    AJAX script to call php script to deal with images
  2. */
  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. }
  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.     }

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. ##include code to get file name and put in variable $image_name
  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.

Similar topics

1 post views Thread by Mike | last post: by
reply views Thread by aarondouglas28 | last post: by
4 posts views Thread by Israel Richner | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.