Почему эта подсказка не работает в IE?Ошибка: объект ожидается? - PullRequest
Новая
       31

Почему эта подсказка не работает в IE?Ошибка: объект ожидается?

0 голосов
/ 16 февраля 2012

Можете ли вы показать мне, где я не прав с этим кодом: 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tooltip</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function() {

        xOffset = 140;
        yOffset = 50;

    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        var mainImage = $(this).find("img").attr("src");
        mainImageWidth = $(this).find("img").width();

        $("body").append("<p id='preview-img'><img src='"+ mainImage +"' alt='Loading...' />"+ c +"</p>");                               
        $("#preview-img")
            .css("top",(e.pageY) + "px")
            .css("left",(e.pageX + (mainImageWidth + yOffset)) + "px")
            .fadeIn("normal");              
    },
    function(){
        this.title = this.t;    
        $("#preview-img").fadeOut("fast");
        $("#preview-img").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview-img")
            .css("top",(e.pageY) + "px")
            .css("left",(e.pageX + (mainImageWidth + yOffset)) + "px");
    });     

});
</script>
<style>
#preview-img {
    position: absolute;
    border: 5px solid #6d6d6d;
    background: #eaeaea;
    padding: 8px;
    display: none;
    color: #6d6d6d;
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
a.preview img {
    display:none
}
</style>

</head>

<body>
<ul>
    <li>
        <a href="#" class="preview" title="Test 1">Test 1
            <img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 1">
        </a>
    </li>
    <li>
        <a href="#" class="preview" title="Test 2">Test 2
            <img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 2">
        </a>
    </li>
    <li>
        <a href="#" class="preview" title="Test 3">Test 3
            <img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 3">
        </a>
    </li>
    <li>
        <a href="#" class="preview" title="Test 4">Test 4
            <img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 4">
        </a>
    </li>

</ul>

</body>
</html>

Это работает в FF, Chrome, Opera, но в IE 8 я получаю ошибку: ожидаемый объект. Из того, что я прочитал здесь и в Интернете, эта ошибка происходит, когда определены два одинаковых идентификатора. Но я не вижу идентификаторов:))

1 Ответ

0 голосов
/ 16 февраля 2012

Определение var mainImageWidth; снаружи, похоже, исправляет ошибку. Я проверял это в IE 8.

jsFiddle

...