В верхней части фонового изображения кликабельно - PullRequest
Новая
       31

В верхней части фонового изображения кликабельно

2 голосов
/ 14 марта 2012

Код, окружающий фоновое изображение:

Код: 

<body class="<?php echo OsBrowser::getCssClass(); ?>">
<div id="back">
<a title="Crystal Saga" href="http://cs.r2games.com"></a>
</div>
    <!-- Top -->
    <a name="top" id="top"></a>
    <div class="topbg"></div>

    <!-- Wrapper // -->
    <div class="wrapper">
        <!-- Header // -->
        <div class="header">

Этот код создает фоновое изображение:

Код: 

<div id="back">
<a title="Crystal Saga" href="http://cs.r2games.com"></a>
</div>

Вот мой css:

Код: 

#back {
height: 900px;
position: absolute;
text-indent: -9999px;
width: 100%;
z-index: 0;
}

#back a:link {
background: url('img/gameinfo_bg.jpg') scroll center top;
display: block;
height: 100%;
width: 100%;
}

Теперь мой вопрос: как мне сделать так, чтобы он действовал как фоновое изображение на mmorpg.com, где верхраздел фонового изображения кликабелен?

ОБНОВЛЕНИЕ:

Я решил проблему.По сути, мне пришлось немного изменить код.Тема, которую я использую для своего сайта, использует класс заголовка, который в основном перемещает область контента ниже основного и подменю.Класс области заголовка препятствовал тому, чтобы верхняя область фонового изображения не была кликабельной, даже если я правильно сделал код.Поэтому мне нужно было удалить код из div, чтобы был только div, и отображалось фоновое изображение, но не было ссылки, а затем я скопировал div и код и вставил его прямо под кодом класса заголовка.Я не совсем уверен, почему это сработало, но, поместив div и код под кодом класса заголовка, область заголовка больше не доминировала над ссылкой, что делало верхнюю область кликабельной.Оставив код div рядом с кодом, можно было отобразить все фоновое изображение, но мне пришлось переместить код ниже класса заголовка, чтобы работала сама область изображения.

Код: 

<body class="<?php echo OsBrowser::getCssClass(); ?>">
<div id="back">
<!--<a title="Crystal Saga" href="http://cs.r2games.com"></a>-->
</div>
    <!-- Top -->
    <a name="top" id="top"></a>
    <div class="topbg"></div>

    <!-- Wrapper // -->
    <div class="wrapper">
        <!-- Header // -->
        <div class="header">
        <div id="back2">
        <a title="Crystal Saga" href="http://cs.r2games.com"></a>
        </div>

Код: 

#back {
background: url('img/gameinfo_bg.jpg') scroll center top;
height: 900px;
position: absolute;
text-indent: -9999px;
width: 100%;
z-index: 0;
}

#back a:link {
/*background: url('img/gameinfo_bg.jpg') scroll center top;*/
display: block;
height: 160%;
width: 100%;
}

#back2 {
}

#back2 a:link {
/*background: url('img/gameinfo_bg.jpg') scroll center top;*/
display: block;
height: 160px;
width: 100%;
}

Ответы [ 2 ]

2 голосов
/ 14 марта 2012

Если я получаю вашу проблему, исправьте это, что вы хотите ... Вы можете увидеть скрипку, чтобы получить концепцию.

Скрипка: http://jsfiddle.net/tHuqV/

Демонстрация: http://jsfiddle.net/tHuqV/embedded/result/

Примечание: в скрипке я указал ширину: 100%;для тега, но мы можем сделать его фиксированным размером в соответствии с необходимостью и установить центр позиции, задав css - margin: 0 auto;

0 голосов
/ 14 марта 2012

Напишите метод onclick для тега: 

<div id="back">
    <a title="Crystal Saga" href="http://cs.r2games.com" onclick="doThis()"></a>
</div>

Это то, что есть на сайте mmorpg.com.

...