473,226 Members | 1,528 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 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 25761
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,658 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

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

Similar topics

by: Nathan Given | last post by:
Hello All, I am trying to randomly change the background image of my home page but I can't seem to figure it out. Here is a snippet of my css .... BODY {background:transparent...
by: Mike | last post by:
I want to change the background image of the html page within code based on the users selection. I'm trying to use this in the page onload even response.write("<body background=' & dataitem>") ...
by: Ken Varn | last post by:
I have an HtmlButton control in which I assigned a background image using the background-image Style attribute. The background image displays find under Windows 2000, but does not get displayed...
by: aarondouglas28 | last post by:
Hey all, I'm hoping someone can help me with a problem I'm having. I have a page that has a javascript based slide show of images on it. The user can press a play button and the page will cycle...
by: iceburn17 | last post by:
Hi, Can anyone can tell me how to change a table row background color when I click a button? most of the tutorial I found add the event on the TR onclick event, but that not I want. It is...
by: Israel Richner | last post by:
I know I can use <a></aand modify it's :hover and :visited appearance in my .css file. I'd like to know if I can do the same for a asp:button control. I'd like to do some processing of data in...
by: can2564 | last post by:
Hello, I have an image as a background in the style sheet. The image is big and I would like to make it smaller. Can I do that in the style sheet? I really don't have room to crop. This is...
by: vartana | last post by:
I will be getting the background url dynamically using ajax and html. I have set an id=boxFooter_002 to my div and have ...
by: bettyboo | last post by:
Hi I'm new to the forum and also a VERY new user of Access to develop databases. I'm building a DB for a driving instructor acquaintance, and he wants a button on the pupil data entry form which...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

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.