Добавьте Id к фоновому изображению внутри div - PullRequest
Новая
       38

Добавьте Id к фоновому изображению внутри div

1 голос
/ 02 марта 2011

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

 <div class="thumbnail" style="background-image:url(images/bracelets/1/002.png,); width:356px; height:265px;"><a id="thumbnail-btn" href="images/bracelets/1/002a.png" rel="lightbox" title="my caption"></a></div>

Это то, что у меня есть в коде, и я хочу добавить идентификатор: 

background-image:url(images/bracelets/1/002.png,)

У меня есть несколько фоновых изображений на странице, которые я хочу затемнить одновременно. Может кто-нибудь помочь мне или сказать мне, если это возможно, чтобы добавить идентификатор к нему. Потому что это код, который я хочу использовать для постепенного увеличения. 

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");

var images = [ "thephoto1", "thephoto2", "thephoto3" ];
function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}
function fadeIn(objId,opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 10;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

Если у кого-то есть лучшее представление о том, как это сделать, я буду очень признателен!

Спасибо! S.

Ответы [ 2 ]

0 голосов
/ 02 марта 2011

Вы не можете поставить идентификатор на изображение BG.вы подтверждаете это идентификатором вещей, которые он получил.Если вы хотите, чтобы эта работа работала, она примет какой-то умный макет.Получение div'ов o сидеть друг на друге, чтобы вы могли очистить верхнюю часть, а нижнюю - постепенно затухать.И да, как сказал farligOpptreden, используйте jquery.Облегчит вам жизнь.

0 голосов
/ 02 марта 2011

Вам следует рассмотреть возможность использования jQuery для установки непрозрачности. Он позаботится обо всех проблемах кросс-браузерной совместимости для вас ... В jQuery также есть функция затухания, так что вы можете просто применить ее ко всем классифицированным DIV-файлам на странице.

Пример может быть следующим: 

<script type="text/javascript">
$(document).ready(function(){
  $("div.thumbnail").fadeIn("slow",function(){
    // do something when the items have faded in
  });
});
</script>
...