SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question className Not Changing back ground image?

    Ok. I have an onclick that does things and changes the className of my 'logo' div. All of the background images for div id 'logo' are styled by external CSS. A button I setup with addEvent alerts the className of 'logo' correctly but the 'logo' background doesn't change?

    index.css
    Code:
    #logo { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
    background-image:url(../sources/articles.jpg); background-position:center center; 
    background-repeat:no-repeat;
    border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d;}
    
    .logo { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
    background-image:url(../sources/articles.jpg); background-position:center center; 
    background-repeat:no-repeat;
    border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d;}
    //maybe redundant but neccessary to call again?
    
    .silver { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841; 
    background-image:url(../sources/silver.jpg); background-position:center center; 
    background-repeat:no-repeat;
    border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d; }
    
    .silvergold { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841; 
    background-image:url(../sources/silvergold.jpg); background-position:center center; 
    background-repeat:no-repeat;
    border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d; }
    
    .silverstones { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
    background-image:url(../sources/silverstones.jpg); background-position:center center; 
    background-repeat:no-repeat;
    border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d; }
    index.js
    Code:
    var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
    for(i=0;i<sidebarli.length;i++){   
    if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
    sidebarli[i].onclick=function(){   
    EvalSound1();
    var p=this.id;
    logo.className=p; //not changing background image? Was a week ago?
    alert(p+': Is sending your request.');
    products.push(p);
    getproduct(p);
    document.getElementById('logo').className=p;
    f1.className='product';
    document.getElementById('blank').src='scripts/product.js';
    hidewelcome(); //runs but logo background doesn't change?
    };
    }
    else{
    //do something else
    }}
    
    var placeorder=document.getElementById('placeorder'); 
    //utilizing existing button to alert change in className
    addEvent(placeorder,'click',function( ){ 
    alert(logo.className); //alerts correct change but logo background doesn't change
    },false);
    Wierd but true. I must have altered the CSS a hundred times but not the logo classNames.

    index.html
    HTML Code:
    <div id="logo" class="logo">
    Almost forgot the html starts with class=logo. Any help greatly appreciated!
    Last edited by Heinz Stapff; Oct 11, 2011 at 14:08. Reason: Almost forgot the html


Bookmarks

Posting Permissions

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