Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
vitamin4ik
0 / 0 / 1
Регистрация: 11.04.2014
Сообщений: 52
1

Диаграмма с всплывающими блоками

11.04.2014, 13:50. Просмотров 510. Ответов 3
Метки нет (Все метки)

Здравствуйте! Специалисты у меня к вам вопрос, помогите если сможете. Решил сделать диаграмму из шестигранников вот ссылка по которой сможете найти КЛИК СЮДА =) собственно вот в чем вопрос:
1)Как сделать так, чтобы при наведении курсора, вместе с hover эфектом менялся текст Например(при наведении на белый шестиугольник с цифрой 1 текст менялся на "2")кс лову и цвет как сейчас синий оставался?)
2)Каким образом сделать так чтобы при нажатии на блок(шестиугольник) фон вокруг затемнялся а появлялся на возле того маленького шестиугольника (поверх) большой с текстом внутри?
CSS блоки для них созданы я не могу понять как связать клин по блоку и вызов другого изображения текст в нем((Если есть уроки по поводу этих эффектов или у вас есть подобный опыт прошу поделится, я в этой области только начинаю разбираться и подтягивать свои знания.Спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.04.2014, 13:50
Ответы с готовыми решениями:

Вёрстка блоками
Доброго всем времени суток! Сколько себя помню, верстал страницы таблицами....

Беда с блоками
Вся инфа на скрине. Спасибо. <div id = "menu"> <ol>Massage Paradise</ol>...

Вывод товаров блоками
Здравствуйте уважаемые форумчани. Помогите пожалуйста, нужно вывести товары,...

Непонятки с блоками сайта
Как сделать блок с авторизацией вверху, как блоки, которые слева?

пробелы между блоками
Как убрать пробелы между дивами? с маргином, падиннгом играл нефига не...

3
sashok89
74 / 74 / 11
Регистрация: 04.08.2012
Сообщений: 526
Записей в блоге: 2
11.04.2014, 15:21 2
Очень очень клево сделано. Вы сами делали? не поделитесь кодом или уроком как это сделать?
0
vitamin4ik
0 / 0 / 1
Регистрация: 11.04.2014
Сообщений: 52
11.04.2014, 17:46  [ТС] 3
скажем так я был вдохновлен)))в конечном итоге хочу получить активную диаграмму))буду надеяться что мне хватит знаний и помощь чтобы это сделать)удачи =)
Вот код html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body >
    <div class="diagramm inner">
    <a class="diagramm-center modal" href="http://test.itstore.org.ua/servises.html" rel="{size: {x: 940,y: 700}, handler:'iframe'}"></a>
    <span class="diagramm-cell" style="top: 103px; left: -36px;">
        <span class="diagramm-text">1</span>
    </span><span class="diagramm-cell" style="top: 232px; left: -36px;">
        <span class="diagramm-text">2</span>
    </span><span class="diagramm-cell" style="top: 361px; left: -36px;">
        <span class="diagramm-text">3</span>
    </span><span class="diagramm-cell" style="top: 168px; left: 76px;">
        <span class="diagramm-text">4</span>
    </span><span class="diagramm-cell" style="top: 297px; left: 76px;">
        <span class="diagramm-text">5</span>
    </span><span class="diagramm-cell" style="top: 232px; left: 188px;">
        <span class="diagramm-text">6</span>
    </span><span class="diagramm-cell" style="top: 48px; left: 286px;">
        <span class="diagramm-text">7</span>
    </span><span class="diagramm-cell" style="top: 415px; left: 287px;">
        <span class="diagramm-text">8</span>
    </span><span class="diagramm-cell" style="top: 479px; left: 399px;">
        <span class="diagramm-text">9</span>
    </span><span class="diagramm-cell" style="top: 47px; left: 501px;">
        <span class="diagramm-text">10</span>
    </span><span class="diagramm-cell" style="top: -17px; left: 613px;">
        <span class="diagramm-text">11</span>
    </span><span class="diagramm-cell" style="top: 231px; left: 603px;">
        <span class="diagramm-text">12</span>
    </span><span class="diagramm-cell" style="top: 166px; left: 715px;">
        <span class="diagramm-text">13</span>
    </span><span class="diagramm-cell" style="top: 295px; left: 715px;">
        <span class="diagramm-text">14</span>
    </span><span class="diagramm-cell" style="top: 231px; left: 827px;">
        <span class="diagramm-text">15</span>
    </span>
    </div>
</body>
CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.diagramm{
    width: 940px;
    height: 643px;
    position: relative;
    overflow: visible;
    margin: 0px auto;
}
.diagramm-center{
    position: absolute;
    width: 275px;
    height: 245px;
    top: 175px;
    left: 333px;
    background: url(/assets/templates/site1/images/diagram-center.png) center no-repeat;
    cursor:pointer;
}
.diagramm-cell{
    position: absolute;
    display:table;
    table-layout: fixed;
    width: 151px;
    height: 132px;
    background: url(/assets/templates/site1/images/diagramm-cell.png) center no-repeat;
    background-size: contain;
    z-index:2;
    cursor:pointer;
}
.diagramm-text{
    display: table-cell;
    vertical-align:middle;
    padding: 12px;
    color: #00729c;
    line-height: 17px;
    text-align: center;
}
.diagramm-cell:hover{
    background: url(/assets/templates/site1/images/diagramm-cell-blue.png) center no-repeat;
    background-size: contain;
}
.diagramm-text:hover{
    color: #ffffff;
}
Добавлено через 50 минут
нашел способ замены текста , даже 2 (для 2 способа нужен скрипт, для первого нет) Как сменить текст при наведении на сам блок пока не знаю, если кто знает не откажусь от помощи)
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
    function replaceText()
{
    var a = this, b = a.innerHTML;
    a.innerHTML = a.name;
    a.name = b;
}
 
window.onload = function()
{
    var a = document.getElementsByTagName('a'), b;
    for(i=0; i<a.length; i++) if(a[i].name)
    {
        a[i].onmouseover = replaceText;
        a[i].onmouseout = replaceText;
    }
}
 
</script>
HTML5
1
2
3
4
5
6
7
8
<span class="diagramm-cell" style="top: 103px; left: -36px;">
        <span class="diagramm-text">
            <p onmouseout="this.innerHTML='Наведись';" onmouseover="this.innerHTML='Вот и получилось';">Наведись</p>
            </span>
    </span><span class="diagramm-cell" style="top: 232px; left: -36px;">
        <span class="diagramm-text">
            <p name="работает =)">Способ 2</p>
        </span>
0
vitamin4ik
0 / 0 / 1
Регистрация: 11.04.2014
Сообщений: 52
15.07.2014, 15:15  [ТС] 4
перенес на http://itstore.org.ua
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.07.2014, 15:15

меню блоками и их цвет
как зделать меню как здесь? http://rclin.com/ чтобы текст был в отдельных...

Что-то не так с блоками
urburo35.ru блоки там где меню и где шахматы нормально выглядят только на...

Промежутки в IE между блоками
IE7 опять порадовал, какого фига он добавил эти промежутки между блоками? :) ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru