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

[txi]

Здравствуйте! Специалисты у меня к вам вопрос, помогите если сможете. Решил сделать диаграмму из шестигранников вот ссылка по которой сможете найти СЮДА =) собственно вот в чем вопрос:
1)Как сделать так, чтобы при наведении курсора, вместе с hover эфектом менялся текст Например(при наведении на белый шестиугольник с цифрой 1 текст менялся на "2")кс лову и цвет как сейчас синий оставался?)
2)Каким образом сделать так чтобы при нажатии на блок(шестиугольник) фон вокруг затемнялся а появлялся на возле того маленького шестиугольника (поверх) большой с текстом внутри?
CSS блоки для них созданы я не могу понять как связать клин по блоку и вызов другого изображения текст в нем((Если есть уроки по поводу этих эффектов или у вас есть подобный опыт прошу поделится, я в этой области только начинаю разбираться и подтягивать свои знания.Спасибо!

[Лубышев]

Без JS не обойтись.
Одно из решений: подключаете JQuery

1)Как сделать так, чтобы при наведении курсора, вместе с hover эфектом менялся текст Например(при наведении на белый шестиугольник с цифрой 1 текст менялся на "2"

$(".diagramm-cell").mouseover(function(){$(this).find("span").html("2");})
$(".diagramm-cell").mouseout(function(){$(this).find("span").html("1");})

[Лубышев]

2)Каким образом сделать так чтобы при нажатии на блок(шестиугольник) фон вокруг затемнялся а появлялся на возле того маленького шестиугольника (поверх) большой с текстом внутри?

1. затемнение фона.
Сделать блок с черный с прозрачностью типа такого:
<div class="black"></div>

.black{left:0px; top:0px; position:fixed; z-index:55; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none;}

по клику на элемент:

$(".diagramm-cell").click(funcyion(){})

позазать этот блок изменяя его видимость

$(".black").css("display","block");

2. появление блока рядом с элементом, на который ткнули
надо узнать где изначальный элемент находился

$(".diagramm-cell").click(function(){
position=$(this).position;
})

задаем координаты появляющемуся блоку

$(".window").css("left",position.left+"px");
$(".window").css("top",position.top+"px");
$(".window").css("display".block);

если в этот блок что то надо написать:

$(".window").html("текст");

[Naive]

Сообщение от Лубышев

1. затемнение фона.
Сделать блок с черный с прозрачностью типа такого:
<div class="black"></div>

.black{left:0px; top:0px; position:fixed; z-index:55; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none;}

по клику на элемент:

$(".diagramm-cell").click(funcyion(){})

позазать этот блок изменяя его видимость

$(".black").css("display","block");

2. появление блока рядом с элементом, на который ткнули
надо узнать где изначальный элемент находился

$(".diagramm-cell").click(function(){
position=$(this).position;
})

задаем координаты появляющемуся блоку

$(".window").css("left",position.left+"px");
$(".window").css("top",position.top+"px");
$(".window").css("display".block);

если в этот блок что то надо написать:

$(".window").html("текст");

Спорим на 1 килорубль, что сделаю без JS, на чистом CSS?)))
не, реально деньги пригодились бы...

[txi]

Спасибо за ответ!
я бы очень хотел увидеть как реализовать это на CSS)))

[Лубышев]

Не спорим. я уже видел. но твой вариант содержит некоторые ограничения) о котором я тебе говорил

[Naive]

Сообщение от Лубышев

Не спорим. я уже видел. но твой вариант содержит некоторые ограничения) о котором я тебе говорил

жадина, пожалел копейку нищему задроту