setAttribute and removeAttribute fail??

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

haiwen - 04 Mar 2004 21:56 GMT

Hello, everyone

I have a html button
id=butPause onmouseover=onmouseover='this.style.backgroundImage="url(./Pause_glow.jpg)"
style=" BACKGROUND-IMAGE: url(./Pause_noglow.jpg" onclick="playPause()" onmouseout='this.style.backgroundImage="url(./Pause_noglow.jpg)"'

it works well untill I wish to change its background, onmouseover and onmouse action after it is clicked

function playPause(

var butPause=window.document.getElementById("butPause")
butPause.style.backgroundImage="url(./Play.jpg)";// This works well

butPause.setAttribute('onmouseover','this.style.backgroundImage="url(./Play_glow.jpg)"')
butPause.setAttribute("onmouseout",'this.style.backgroundImage="url(./Play_noglow.jpg)"')

// butPause.removeAttribute('onmouseover')
// alert('butPause onmouseover='+butPause.getAttribute('onmouseover'))

The button's background does change after click, but the onmouseover and onmouseout do nothing

Could anyone help? I do appreciate your help.

Haiwen

Reply to this Message

bruce barker - 05 Mar 2004 01:18 GMT

don't set the attributes, set the methods instead.

function playPause()
{
if (this.butPause = window.document.getElementById("butPause"))
{
butPause.style.backgroundImage="url(./Play.jpg)";// This works
well.
butPause.onmouseover = new Function
('this.style.backgroundImage="url(./Play_glow.jpg)"');
butPause.onmouseout = new
Function('this.style.backgroundImage="url(./Play_noglow.jpg)"');
}
}

you might want to cache the images for faster rollovers:

var imgPlay = new Image(); imgPlay.src = "./Play.jpg";
var imgPlayGlow = new Image(); imgPlayGlow.src = "./Play_glow.jpg";
var imgPlayNoGlow = new Image(); imgPlayGlow.src = "./Play_noglow.jpg";

function playPause()
{
if (this.butPause = window.document.getElementById("butPause"))
{
butPause.src = imgPlay.src;
butPause.onmouseover = new Function ('this.src =
imgPlayGlow.src');
butPause.onmouseout = new Function('this.src=imgPlayNoGlow
.src');
}
}

-- bruce (sqlwork.com)

> Hello, everyone:
>
> I have a html button:
> id=butPause onmouseover=onmouseover='this.style.backgroundImage="url(./Pause_glow.jpg)"'
> style=" BACKGROUND-IMAGE: url(./Pause_noglow.jpg" onclick="playPause()"

onmouseout='this.style.backgroundImage="url(./Pause_noglow.jpg)"'

> it works well untill I wish to change its background, onmouseover and onmouse action after it is clicked.
>
> function playPause()
> {
> var butPause=window.document.getElementById("butPause");
> butPause.style.backgroundImage="url(./Play.jpg)";// This works well.

butPause.setAttribute('onmouseover','this.style.backgroundImage="url(./Play_
glow.jpg)"');

butPause.setAttribute("onmouseout",'this.style.backgroundImage="url(./Play_n
oglow.jpg)"');

> // butPause.removeAttribute('onmouseover');
> // alert('butPause onmouseover='+butPause.getAttribute('onmouseover'));
[quoted text clipped - 6 lines]
>
> Haiwen

Reply to this Message

setAttribute and removeAttribute fail??

Free Magazines