...

View Full Version : changing bg image onmouseover



shlagish
03-23-2004, 04:15 AM
Why will this work:

document.getElementById('Main').style.background='#0F0';

and not this:

document.getElementById('Main').style.background='#0F0 url("http://www.mozilla.org/images/mlogo.gif") no-repeat fixed center center';

??

This is part of a funcition which I call onmouseover


HTML
<li><a href="oct25.html" onmouseover="desc('François Bourassa Trio')" onmouseout="desc('Jazz & Justice Home')">October 25th</a></li>

JS
function desc(newText)
{

document.getElementById('jsInfo').innerHTML=newText;
document.getElementById('Main').style.background='#0F0
url("http://www.mozilla.org/images/mlogo.gif") no-repeat fixed center center';

}

Vladdy
03-23-2004, 04:58 AM
Why don't you use CSS and :hover pseudo-class ???
or define two classes and set them onmouseover (when you are doing changing unrelated element) instead of going through individual properties

glenngv
03-23-2004, 04:58 AM
Does it throw any error?

Try:

document.getElementById('Main').style.background='#0F0 url("http://www.mozilla.org/images/mlogo.gif") no-repeat fixed center';

If still no joy, try removing the double quotes in the url

shlagish
03-25-2004, 02:03 AM
Why don't you use CSS and :hover pseudo-class ???
or define two classes and set them onmouseover (when you are doing changing unrelated element) instead of going through individual properties

If I use hover, the background the element being hovered will change, not the background of another div ('main').
I could change the class of 'main' to make the change, but then, each link will bring up a different picture in 'main', so that won't work.

btw, this is a simplified version of my code, but it still doesn't work, the real code will have the image name as an argument to the function.... well, here it is, lol:



function desc(newText,newBG)
{

document.getElementById('jsInfo').innerHTML=newText;
document.getElementById('Main').style.background='#FFF url("/images/'+newBG+'.jpg") no-repeat fixed top center';

}

I was just using :
http://www.mozilla.org/images/mlogo.gif
so that you could test it and still get the image (even if it's not on your harddrive)...


Glen:
nope, no errors (in the javascript console of firebird)..

as for this:
document.getElementById('Main').style.background='#0F0 url("http://www.mozilla.org/images/mlogo.gif") no-repeat fixed center';

What's the diference with mine?
And for the removing quotes thing, I thought you needed the quotes there... I'll try it anyways.

Thanks for the replies

shlagish
03-25-2004, 02:05 AM
I tried removing the quotes, still no change.

glenngv
03-25-2004, 02:37 AM
Try alerting the background after you set it to check if the setting took effect.

whammy
03-25-2004, 02:41 AM
It's apparent that glenngv knows how to debug!!! :p

If ASP is good for nothing else(but it is a pretty good server-side scripting platform still, if sloppy), it has taught me the same things about debugging. Always make sure that what you THINK you have as variables or objects really are what you think they are. :)

That's usually the problem and will lead you to the solution - at least in my experience.

shlagish
03-25-2004, 02:45 AM
Interesting, the change actually took place, I just can't see it on the screen...
when I add:
alert(getElementById('Main').style.background);
to the functionl, it alerts this:

transparent url("file:///etc until the file/images/oct25.jpg") no-repeat fixed center top

So why isn't it showing?

here is the script:


function desc(newText,newBG)
{

document.getElementById('jsInfo').innerHTML=newText;
document.getElementById('Main').style.background='url("images/'+newBG+'.jpg") no-repeat fixed top center';
alert(document.getElementById('Main').style.background);

}

shlagish
03-25-2004, 02:48 AM
by the way, you're right about alerting, I should really think of that myself. STUPID ME!
Is there anyway I can tweak my alarm clock to yell "DON'T FORGET TO ALERT TO DEBUG" instead of doing that useless beep sound?
At least I could learn as I awake :)

whammy
03-25-2004, 02:52 AM
P.S. I don't know if you have the time or inclination, but I nominated you as co-moderator of the ASP forum, Glenn.

whammy
03-25-2004, 02:54 AM
P.S. This is a local file? I'd give it a relative path regarding your webpage and see what happens then...

shlagish
03-25-2004, 03:00 AM
WOW, now it works, I took out some stuff to see what would happen and it works:



function desc(newText,newBG)
{

document.getElementById('jsInfo').innerHTML=newText;
document.getElementById('Main').style.background='url("images/'+newBG+'.jpg")';

}

that works :)
So by eliminating thigs, I've come down ti this, which works:


function desc(newText,newBG)
{

document.getElementById('jsInfo').innerHTML=newText;
document.getElementById('Main').style.background='#963 url("images/'+newBG+'.jpg") no-repeat fixed center top';

}

I don't really see what the diference is, but it's working... except for one image... it doesn't work in one case..
ex:
<li><a href="nov29.html" onmouseover="desc('Jefferson Grant Quintet','nov29th')" onmouseout="desc('Jazz & Justice Home','bg')">November 29th</a></li>

onmouseover works fine.
onmouseout will take nov29th.jpg out, but will not put bg.jpg in...
why? unknown...

shlagish
03-25-2004, 03:02 AM
whammy, is what a local file?
my website?
yes

I'd give it a relative path regarding your webpage and see what happens then...
I don't understand this

shlagish
03-25-2004, 03:06 AM
oh, never mind my problem, the image did appear, but since it was at the top of the page and the div doesn't span that high, I couldn't see it.
Which bring me to another question. Why does center top bring the image to the center and top of the screen instead of the center and top of the div??

shlagish
03-25-2004, 03:30 AM
ok, I figured it out.
Having fiexed in there was causing the problem.
I took it out and it's now exactly what I wanted.
Thanks for all the replies.
My questions have been answered... except for this one:
http://www.codingforums.com/showthread.php?threadid=34805

glenngv
03-25-2004, 03:48 AM
Originally posted by whammy
P.S. I don't know if you have the time or inclination, but I nominated you as co-moderator of the ASP forum, Glenn.

That's flattering :o Thanks for the nomination. :)
I have the time as long as I have less workload at work which I have at the moment.

whammy
03-25-2004, 03:52 AM
I don't usually have the time to frequent this forum at work (lately) because we're short staffed... and I'm lucky when I get home - if my band is playing a gig then obviously I'm neglecting the forum. That's why I figured I'd nominate another sane and very smart person to help me out!

It's up to you bud... but I think the majority would go with me on this... :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum