Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    changing bg image onmouseover

    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
    Code:
    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';
    
    }
    Shawn

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Vladdy; 03-23-2004 at 05:00 AM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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
    Shawn

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried removing the quotes, still no change.
    Shawn

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try alerting the background after you set it to check if the setting took effect.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's apparent that glenngv knows how to debug!!!

    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.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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);
    
    }
    Shawn

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Shawn

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    P.S. This is a local file? I'd give it a relative path regarding your webpage and see what happens then...
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #12
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    WOW, now it works, I took out some stuff to see what would happen and it works:

    Code:
    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:
    Code:
    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...
    Shawn

  • #13
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Shawn

  • #14
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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??
    Shawn

  • #15
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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/showthre...threadid=34805
    Shawn


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •