Проблема с изменением фонового изображения с использованием Javascript - PullRequest
Новая
       23

Проблема с изменением фонового изображения с использованием Javascript

0 голосов
/ 13 июля 2011

Я пытаюсь изменить фоновое изображение ссылки при нажатии на нее через Javascript. У меня пять вкладок, и когда пользователь нажимает на вкладку, я хочу, чтобы фоновое изображение этой вкладки сменилось на простое белое изображение. Где, так как остальные четыре вкладки должны быть заменены серым изображением.

Итак, мой CSS выглядит следующим образом: 

.listingindex li a {
    background:url(../images/tabe-nomal.jpg) left top no-repeat;
    color:#333333;
    display: inline-block;
    text-decoration:none;
    width:229px;
    padding:14px 0px 14px 10px;
}

.listingindex li a:hover {
    background:url(../images/tabe-over.jpg) left top no-repeat;
}

и мой код выглядит так: 

<div class="listingindex">
                    <?php           
                    $catId = get_cat_id('featured');                
                    $childOf = 'child_of='.$catId;  
                    $subCats = get_categories($childOf);                

                    // Slice array so only 5 categories can be displayed.
                    $subCats = array_slice($subCats, 0, 5);

                    foreach ($subCats as $value) {
                        $subCatsStr .= $value->cat_ID.'|';                      
                    }                                               

                    foreach ($subCats as $subCat) {                         
                        ?>
                        <ul>
                            <li><a id="tab_<?=$subCat->cat_ID?>" href="javascript:toggle(<?=$subCat->cat_ID?>,'<?=$subCatsStr?>')"><?=$subCat->name?></a></li>
                        </ul>          

                        <ul id="thumbnails_<?=$subCat->cat_ID?>" class="listingarea">                           
                            <?php $query = new WP_Query('category_name='.$subCat->name.'&posts_per_page=9');
                                while( $query->have_posts() ) : $query->the_post();?>
                                <li>                                                                                                            
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">                                      
                                        <?
                                        $id = $post->ID;                                        
                                        $filename = $_SERVER["DOCUMENT_ROOT"].'/xxxxxxx/xxxxxx/xxxxx/xxxxxx/images/thumbnails/image_'.$id.'.jpg';                                                                                                                                                                                                                           
                                        if (file_exists($filename)) {
                                            ?><img src="<?php echo $templateDir; ?>/images/thumbnails/image_<?=$id;?>.jpg" alt="Image_<?=$id;?>" /><?                                           
                                        }else{                                          
                                            ?><img src="<?php echo $templateDir; ?>/images/thumbnails/no_image.jpg" alt="No Image" /><?
                                        }?>                                         
                                    </a>
                                </li>
                            <?php endwhile; ?>                                                                                                             
                        </ul>                                                                                   
                    <?}?>                 
                </div>

Наконец, мой JS выглядит так: 

function toggle(catID, subCatsStr) {
        document.getElementById('thumbnails_'+catID).style.display = "block";
        document.getElementById('tab_'+catID).style.backgroundImage = "url(/images/tabe-over.jpg)";                     

        subCatsArr = subCatsStr.split('|');
        for (i = 0; i <= subCatsArr.length - 2; i++){
            if (subCatsArr[i] != catID){
                document.getElementById('thumbnails_'+subCatsArr[i]).style.display = "none";                
                document.getElementById('tab_'+catID).style.backgroundImage = "url(images/tabe-nomal.jpg) left top no-repeat";
            }           
        }           
    }

В данный момент этот код просто удаляет серое изображение (tabe-nomal.jpg) при нажатии на вкладку.

Любая помощь приветствуется.

Привет ...

Ответы [ 2 ]

0 голосов
/ 15 июля 2011

В конце концов, чтобы решить проблему, мне пришлось указать полное имя пути:

document.getElementById ('tab _' + catID) .style.backgroundImage = "url (http://www.xxxxxx.ie/xxxxxxx/wp-content/themes/xxxxxxx/images/tabe-over.jpg)";

Не знаю почему, но это решило проблему. Это тема Wordpress, так что, возможно, это как-то связано с этим.

0 голосов
/ 13 июля 2011

Похоже, ваши URL-адреса backgroundImage могут быть неправильными - попробуйте использовать тот же путь (../images/ ..), что и в исходном правиле CSS *

...