Проблема с получением кнопки, которая является частью фона для работы

0

У меня возникла проблема с созданием следующей концепции. Я хочу, чтобы определенная часть изображения веб-сайта отображалась для ссылки на другую страницу на сайте, и я хочу, чтобы весь образ растянулся до ширины зрителя. У меня есть оба, но когда изображение растягивается, оно сбрасывает отображение. Есть ли способ автоматически компенсировать это?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
            * { margin: 0; padding: 0; }

        #bg { position: relative; top: 0; left: 0; }
        .bgwidth { width: 100%; }
        .bgheight { height: 100%; }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(function() {   

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

            if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                $bg
                    .removeClass()
                    .addClass('bgheight');
            } else {
                $bg
                    .removeClass()
                    .addClass('bgwidth');
            }

        }

        theWindow.resize(function() {
            resizeBg();
        }).trigger("resize");

    });

</script>
</head>

<body>
    <img src="background.png" id="bg" usemap = #bgmap alt="">
<map name=bgmap>
<area shape=Rect Coords=410,200,595,390 Href="http://www.example.com"> 
</map> 

</body>
</html>
Теги:

1 ответ

0

у вас есть некоторые ошибки в коде

<body>
    <img src="background.png" id="bg" usemap="#bgmap" alt="">
<map name="bgmap">
<area shape="Rect" Coords="410,200,595,390" href="http://www.example.com"> 
</map> 

</body>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню