Забавная кнопка

@outoftime · Регистрация: 25.07.2009

Студворк — интернет-сервис помощи студентам

Делая галерею появилась идея создать кнопку переключения изображений следующего вида: в состоянии неактивности имеет вид nextButton.png при наведении на page меняется на nextPage.png, аналогочно при наведении на image.

Рисунки - это не проблема, а вот как реагировать на события наведения на определённые области я понять не могу, за меня код можно не писать, самому интересно, главное идею подать, а то я уже голову сломал как это сделать..

@Nazz · 09.05.2010, 15:25

можно порпробывать поексперементировать с картами изображений, или же просто порезать кнопку, и зделать скрипт который реагирует на наведение мишы...

@outoftime · 09.05.2010, 15:42 **[ТС]**

писать за меня не надо, но подсказать где ошибка можно, верно? мне что-то дивы поперли, сделал так:

HTML5
1
2
3
4
                <div id="button">
                    <div class="page" onMouseMove="BGChange('page')" onMouseOut="BGChange()">&nbsp;</div>
                    <div class="image" onMouseOver="BGChange('page')" onMouseOut="BGChange()">&nbsp;</div>
                </div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
            #button {
                width:200px;
                height:100px;
                z-index:0;
                background-image:url(../images/nextButton.png);
            }
            
            .page, 
            .image {
                z-index:1;
                display:block;
                float:right;
                width:50%;
                height:49%;
                clear:both;
            }

JavaScript
1
2
3
4
5
6
function BGChange(val) {
    if (val == "page") document.getElementById(button).style.backgroundImage = new Image("../images/nextPage.png");
    else if (val == "image") document.getElementById(button).style.backgroundImage = new Image("../images/nextImage.png");
    else document.getElementById(button).style.backgroundImage = new Image("../images/nextButton.png");
    alert(val);
}

как всегда - не работает, судя по всему проблема в скрипте, вы пользуетесь справочной информацией? можете дать ссылку где хорошо описаны события js, желательно выдержки из научной литературы даной области.

@Nazz · 09.05.2010, 16:22

HTML5
1
2
3
4
<div id="button">
                        <div class="page" onMouseMove="BGChange('page')" onMouseOut="BGChange()">&nbsp;</div>
                    <div class="image" onMouseOver="BGChange('image')" onMouseOut="BGChange()">&nbsp;</div>
                </div>

Добавлено через 7 минут
попробуйте ещё вот так:

HTML5
1
2
3
4
<div id="button" name="button">
                        <div class="page" name="page" onMouseMove="BGChange('page')" onMouseOut="BGChange()">&nbsp;</div>
                    <div class="image" name="image" onMouseOver="BGChange('image')" onMouseOut="BGChange()">&nbsp;</div>
                </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#button {
                                width:200px;
                                height:100px;
                                z-index:0;
                                background-image:url(../images/nextButton.png);
                        }
                        
                        .page, 
                        .image {
                                z-index:1;
                                display:block;
                                float:right;
                                width:50%;
                                height:49%;
                                clear:both;
                                visibility: hidden;
                        }

JavaScript
1
2
3
4
5
6
7
function BGChange(val) {
        if (val == "page") {document.button.style.visibility = "hidden";
       document.page.style.visibility="true";}
        else if (val == "image") {document.button.style.visibility = "hidden";
       document.image.style.visibility="true";}
        else document.getElementById(button).style.backgroundImage = new Image("../images/nextButton.png");
        alert(val);

Добавлено через 30 минут
работает или нет?

@outoftime · 09.05.2010, 16:46 **[ТС]**

не работает

Добавлено через 18 минут
вот теперь что-то есть, вот:

HTML5
1
2
3
4
5
                <div id="button">
                    <img id="bgimage" src="https://www.cyberforum.ru/images/nextButton.png">
                    <div id="image" onMouseOver="BGChange('image')" onMouseOut="BGChange()">&nbsp;</div>
                    <div id="page"  onMouseOver="BGChange('page')"  onMouseOut="BGChange()">&nbsp;</div>
                </div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
            #button {
                width:200px;
                height:100px;
                z-index:0;
            }
            #bgimage {
                width:100%;
                height:100%;
                z-index:0;
            }
            #page, #image {
                position:relative;
                left: 100px;
                width:100px;
                height:50px;
                z-index:1;
                background-color:#0FF;
            }
            #page { top:50px; }
            #image { top:0px; }

JavaScript
1
2
3
4
function BGChange(val) {
    if (val) document.getElementById("bgimage").src = val == "page" ? "images/nextPage.png" : "images/nextImage.png";
    else document.getElementById("bgimage").src = "images/nextButton.png";
}

Добавлено через 2 минуты
осталось с относительным позиционирование разобраться

@Nazz · 09.05.2010, 16:48

вот что я настряпал

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<script type="text/javascript">
function change(val) 
       {
       if (val=="image")
       {
       document.image1.style.visibility="visible";
       document.button.style.visibility="hidden";
       document.image.style.visibility="hidden";
       document.page.style.visibility="hidden";
       }
       else if (val=="page")
       {
       document.page1.style.visibility="visible";
       document.button.style.visibility="hidden";
       document.image.style.visibility="hidden";
       document.page.style.visibility="hidden";
       }
       else
       {
       document.image1.style.visibility="hidden";
       document.page1.style.visibility="hidden";
       document.button.style.visibility="visible";
       document.image.style.visibility="visible";
       document.page.style.visibility="visible";
       }
       }
</script>
 
<style type="text/css">
#button {
                                width:200px;
                                height:100px;
                                margin-left: 17px;
                                margin-top: -102px;
                                
                        }
                        
                        
                        .image {
                                display:block;
                                margin-left: 117px;
                                margin-top: -98px;
                                clear:both;
                               
                        }
                        .page {
                                display:block;
                                margin-left: 118px;
                                
                                clear:both;
                                
                        }
</style>
</head>
<body>
<img src="nextPage.png" name="page1" style="visibility:hidden; margin-left:10px;" />
<img src="nextImage.png" name="image1" style="visibility:hidden;  margin-left:-205px;" />
<div id="button" > <img src="next.png" name="button"/></div>
<div class="image"  ><img src="image.png" name="image" onmouseover="change('image')" onMouseOut="change()"/></div>
<div class="page" ><img src="page.png" name="page" onmouseover="change('page')" onmouseout="change()"/></div>
</body>
</html>

@outoftime · 09.05.2010, 17:08 **[ТС]**

Вышло довольно таки ниче

Но как только вернусь домой расмотрю более детально visibility как свойство обьектов.

@outoftime · 09.05.2010, 17:12 **[ТС]**

рисунки прикиньте сами

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5

	Забавная кнопка 09.05.2010, 15:14. Показов 1359. Ответов 7 Метки нет (Все метки) Делая галерею появилась идея создать кнопку переключения изображений следующего вида: в состоянии неактивности имеет вид nextButton.png при наведении на page меняется на nextPage.png, аналогочно при наведении на image. Рисунки - это не проблема, а вот как реагировать на события наведения на определённые области я понять не могу, за меня код можно не писать, самому интересно, главное идею подать, а то я уже голову сломал как это сделать.. Миниатюры Изображения 1

@Nazz 898 / 729 / 80 Регистрация: 12.03.2009 Сообщений: 2,804 Записей в блоге: 2
	09.05.2010, 15:25
	можно порпробывать поексперементировать с картами изображений, или же просто порезать кнопку, и зделать скрипт который реагирует на наведение мишы... 1

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	09.05.2010, 17:08 [ТС]
	Вышло довольно таки ниче Но как только вернусь домой расмотрю более детально visibility как свойство обьектов. 0