change the background image when Button Click

[ghjk]

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

[Ciary]

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

[Markus]

You can change an image's src attribute via javascript.

Something like below:

function changeSrc(el) {
 
    el.src = "image2.jpg";
 
}
 

<img src="image1.jpg" onclick="changeSrc(this)" alt="" />
 

[RamananKalirajan]

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.

function changeImage(this)
{
 
if(window.ActiveXObject)
{
    document.getElementById(this.id).style.background='transparent url(/images/another.jpg) no-repeat top left;';
}
else
{
    document.getElementById(this.id).style.backgroundColor = 'transparent';
    document.getElementById(this.id).style.backgroundImage = 'url(/images/another.jpg)';
    document.getElementById(this.id).style.backgroundRepeat = 'no-repeat';
    document.getElementById(this.id).style.backgroundPosition = 'top left';
}
 
}
 

Regards
Ramanan Kalirajan

[Dormilich]

"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.

function changeImage()
{
    // "this" refers to the element that is calling the function 
    this.style.backround = "…"; 
 
    // and so forth…
}
 
// example use (JS)
document.getElementById("…").addEventListener("click", changeImage, false);
// there are workarounds for IE's inability to follow standards => google
 
// example use (HTML)
<img src="…" alt="…" onclick="changeImage()">

[ghjk]

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.

<tr><td><img src="http://bytes.com/topic/javascript/common/images/AddNew.jpg"  width="161" height="43" /></td></tr>
                 <tr><td><img src="http://bytes.com/topic/javascript/common/images/Edit.jpg" width="161" height="43" /></td></tr>
                <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..

[acoder]

What do you mean by "load in the middle"? Can you show the code for the container or is it a frame/iframe?

[ghjk]

 
<table width="100%" border="0" cellpadding="0" cellspacing="0">
               <tr>
                   <td width="161" height="280" valign="top">
                    <?php include '../common/left.php';?>    
                </td>
<td><!-- Page contents goes here--></td>
 
 

I'm sorry.It is not loded . Every page include left.php. It has the above mentioned links.

[acoder]

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().

[deanthehat]

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:

<html>
<head>
<script language="javascript" src="ajax_code.js"></script>
</head>
<body>
<div id="image-control" >
    <input id="change-bg" type="button" value="change-bg" onClick="changeimage('get-new-image.php','image-display')" />
</div>
<div id="image-display"></div>
</body>
</html>
 

---------------------------------------------

ajax_code.js:

/*    AJAX script to call php script to deal with images
*/
 
//Create a boolean variable to check for a valid Internet Explorer instance.
var xmlhttp = false;
//Check if we are using IE.
try {
//If the Javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//If not, then use the older active x object.
try {
//If we are using Internet Explorer.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
//Else we must be using a non-IE browser.
xmlhttp = false;
}
}
//If we are using a non-IE browser, create a javascript instance of the object.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
 
function changeimage(serverPage, objID) {
    var obj = document.getElementById(objID);
    xmlhttp.open("GET", serverPage);
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var result = xmlhttp.responseText;
        obj.style.backgroundImage = result;        
    }
    }
    xmlhttp.send(null);
    }
 

get-new-image.php:

<?php
##include code to get file name and put in variable $image_name
 
$new_image = "url(".$image_name.")";
echo $new_image;
?>