Imagebutton JS swap dosen´t work on webkit/phonegap?

Question

I´am trying to get an simple imagebutton to work in Phonegap. I wanna swap image when clicked and forward to location after a short time.

So what i have tried:

function highl(Bildname,BildURL,Link) {
document.images[Bildname].src = BildURL;
window.setTimeout(forward,1000);

function forward() {
window.location = Link;
}
}

in HTML just links like:

<a href="javascript:highl('level01','level1h.png','test.html')"><img name="level01" src="level1.png" border="0"></a>

Works well in my Moz, but not in Webkit/phonegap (swap doesen´t work forward is well).

Can anybody help?

edit: also doesen´t work in chrome...

I am not really surprised that a mobile browser doesn't listen to changes on `src`. Even desktop browser may have difficulties with that (I remember Chrome had a memory leak, for instance) — rds, Jan 17 '13 at 10:33
Webkit doesn't support DOM attribute mutation (see [issue 8191](https://bugs.webkit.org/show_bug.cgi?id=8191)) marked **won't fix**. I don't know if there is a relation with your question — rds, Jan 17 '13 at 10:40
Maybe there are any suggestions to solve this on an other way? — JonnyB, Jan 17 '13 at 12:09
btw. i try to stay away from drawing all with canvas because of the calculation for every resolution.... — JonnyB, Jan 17 '13 at 12:26

rds · Answer 1 · 2013-01-18T19:37:49.233

Webkit doesn't support DOM attribute mutation (see issue 8191) marked won't fix. There might be a link with your issue.

As a workaround, I think you should simply remove the content of the DOM node, and create a new image node instead.

Edit: with code

You need to identify the container. Also, I set href, so that I javascrpt is disabled, the link can still be followed. If javascript is enabled, return false tells the browser not to follow the link.

<a href="test.html" onClick="return highl(this, 'level1h.png', 'test.html');">

javascript. I have inlined forward because it was very short, but you don't need to.

function highl(el, imgURL, link) {
  var img =  new Image();
  img.src = imgUrl;
  // remove current image. TODO ensure firstChild is not null?
  el.removeChild(el.firstChild);
  // place new image
  el.append(img);
  setTimeout(function() {window.location=link;}, 1000);
  return false;
}

i´m pretty new to all this stuff. so i have read alot about DOM today but can´t find an other solution. Can you give me a litle snippet to help me on the Way? — JonnyB, Jan 18 '13 at 16:16
This also dosent work for me in Webkit. Now i used jquery to swap buttons. [link](http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery) Anyway Thank you for help! — JonnyB, Feb 19 '13 at 12:05

Imagebutton JS swap dosen´t work on webkit/phonegap?

1 Answers1