Searched the forum several hours but couldn’t find a solution:
The problem is, that after programmatically changing the image of an image-button-widget it appears to lose its ‘clicked-image’ feature.
I tried the following code. Changing the image works great, but then it doesn’t change on click anymore.
Any suggestions?
// Called when new pictures were seleted and passes the file-handles (imageData and imageClickedData) to this function
function onImagesSelected(imageData, imageClickedData) {
// changes the button image with the selected image
$('[id$=imageButton1]').css('-webkit-border-image', 'url(' + imageData + ') 1 1 1 1 stretch stretch');
//this upper line works fine, but after this operation, the button that used to have
// a 'clicked'-image does not change anymore on clicking it. The following line showed no change either
$('[id$=imageButton1].m1-clicked').css('-webkit-border-image', 'url(' + imageClickedData + ') 1 1 1 1 stretch stretch');
// also NO SUCCESS with this line
$('#m1-myfile-imageButton1.m1-clicked').css('-webkit-border-image', 'url(' + imageClickedData + ') 1 1 1 1 stretch stretch');
}
/* the CSS file (myfile.css) shows these lines for the button I'm trying to change images for (unclicked and clicked)
#m1-myfile-imageButton1.m1-clicked{
-webkit-border-image: url(images/clicked.png) 1 1 1 1 stretch stretch;
}
#m1-myfile-imageButton1{
-webkit-border-image: url(images/unclicked.png) 1 1 1 1 stretch stretch;
border-width: 1px 1px 1px 1px;
height: 102px;
left: 1px;
line-height: 100px;
top: 1px;
width: 102px;
}
*/