Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:
RSS
ВКонтакте

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Javascript

Web программирование
32K
26 января 2011 года
Clubberry
186 / / 19.01.2011
Хочу чтобы иконка при наведении менялась, т.е. mouseOver & mouseOut. Закинул две одинаковые функции с разными значениями в один js файл:
Свернуть исходник 
Код:
/*deviantart*/
function mouseOver()
{
document.getElementById("deviantart").src ="css/img/icons/deviantart_16.png";
}
function mouseOut()
{
document.getElementById("deviantart").src ="css/img/icons/bw/deviantart_16.png";
}

/*dribbble*/
function mouseOver()
{
document.getElementById("dribbble").src ="css/img/icons/dribbble_16.png";
}
function mouseOut()
{
document.getElementById("dribbble").src ="css/img/icons/bw/dribbble_16.png";
}


Указал всё в HTML:
 
Код:
<a href="http://clubberry.deviantart.com/" target="_blank"><img class="icons" alt="deviantART" src="css/img/icons/bw/deviantart_16.png" id="deviantart" width="16" height="16" &#111;&#110;mouseover="mouseOver()" &#111;&#110;mouseout="mouseOut()"/></a>

<a href="http://dribbble.com/Clubberry" target="_blank"><img class="icons" alt="Dribbble" src="css/img/icons/bw/dribbble_16.png" id="dribbble" width="16" height="16" &#111;&#110;mouseover="mouseOver()" &#111;&#110;mouseout="mouseOut()"/></a>


И когда я навожу курсор на иконку "deviantart" то, у меня подсвечивается иконка "dribbble". (ниже есть скрин)

P.S. Гуглил. Нашёл что-то про overload javascript (про совмещение нескольких одинаковых функций, но так и не разобрался)
[ATTACH]4954[/ATTACH]
По порядку
Сначала полезные
Сначала решения

6 ответов

278
26 января 2011 года
Alexander92
1.1K / / 04.08.2008
Не, ну ты молодец, конечно, у тебя ж по две функции с одинаковыми именами. :) Вторая выполняется, а первая игнорируется. Хорошо еще, что вообще что-то делается, другой парсер мог бы просто тихо матюкнуться.
244
26 января 2011 года
UAS
2.0K / / 19.07.2006
Ну как бэ это логично. Откуда интерпритатору знать, какая вам функция Вам нужна? Он и будет юзать последнюю объявленную в лучшем случае. В худшем - просто с ошибкой вылетит.
Надо типа:

Свернуть исходник 
Код:
function iconvOverOut(block_id, action) {
    var images = {
        "deviantart": {
            "over": "путь к картинке при over",
            "out":  "путь к картинке при out"
        },
        // и т.д. для всех, в конце запятую не ставим, ибо ИЕ ругается обычно на это
    };

    document.getElementById(id).src = (action == "over)
        ? images[id].over : images[id].out
    ;
}

<a href="http://clubberry.deviantart.com/" target="_blank"><img class="icons" alt="deviantART" src="css/img/icons/bw/deviantart_16.png" id="deviantart" width="16" height="16" &#111;&#110;mouseover="iconOverOut('deviantart','over')" &#111;&#110;mouseout="iconOverOut('deviantart','out')"/></a>


Код по идее работать не будет, т.к. там ошибка в последней строке функции может вылезти, но вектор размышлений понятен, я считаю.
32K
27 января 2011 года
Clubberry
186 / / 19.01.2011
Спасибо, UAS, разобрался, только окозалось всё гораздно проще. ;)
Для того, чтобы они срабатывали нужно добавить имя функции, на моём примере — цифры в конце mouseOver, mouseOut:
Свернуть исходник 
Код:
/*deviantart*/
function mouseOver1()
{
document.getElementById("deviantart").src ="css/img/icons/deviantart_16.png";
}
function mouseOut1()
{
document.getElementById("deviantart").src ="css/img/icons/bw/deviantart_16.png";
}

/*dribbble*/
function mouseOver2()
{
document.getElementById("dribbble").src ="css/img/icons/dribbble_16.png";
}
function mouseOut2()
{
document.getElementById("dribbble").src ="css/img/icons/bw/dribbble_16.png";
}

/*facebook*/
function mouseOver3()
{
document.getElementById("facebook").src ="css/img/icons/facebook_16.png";
}
function mouseOut3()
{
document.getElementById("facebook").src ="css/img/icons/bw/facebook_16.png";
}

/*flickr*/
function mouseOver4()
{
document.getElementById("flickr").src ="css/img/icons/flickr_16.png";
}
function mouseOut4()
{
document.getElementById("flickr").src ="css/img/icons/bw/flickr_16.png";
}

/*lastfm*/
function mouseOver5()
{
document.getElementById("lastfm").src ="css/img/icons/lastfm_16.png";
}
function mouseOut5()
{
document.getElementById("lastfm").src ="css/img/icons/bw/lastfm_16.png";
}

/*skype*/
function mouseOver6()
{
document.getElementById("skype").src ="css/img/icons/skype_16.png";
}
function mouseOut6()
{
document.getElementById("skype").src ="css/img/icons/bw/skype_16.png";
}

/*tumblr*/
function mouseOver7()
{
document.getElementById("tumblr").src ="css/img/icons/tumblr_16.png";
}
function mouseOut7()
{
document.getElementById("tumblr").src ="css/img/icons/bw/tumblr_16.png";
}

/*twitter*/
function mouseOver8()
{
document.getElementById("twitter").src ="css/img/icons/twitter_16.png";
}
function mouseOut8()
{
document.getElementById("twitter").src ="css/img/icons/bw/twitter_16.png";
}

/*vimeo*/
function mouseOver9()
{
document.getElementById("vimeo").src ="css/img/icons/vimeo_16.png";
}
function mouseOut9()
{
document.getElementById("vimeo").src ="css/img/icons/bw/vimeo_16.png";
}


Свернуть исходник 
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Artem Korolenko + GraphiСЃ designer</title>
        <meta name="author" content="Artem Korolenko"/>
        <meta name="revised" content="24/01/2011"/>
        <meta name="description" content="Artem Korolenko is a web & graphic designer."/>
        <meta name="keywords" content="Web design, Graphic design, UI, Icon, Customization, HTML, CSS, XHTML, HTML5, CSS3, Web, Artem, Korolenko, Clubberry"/> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script type="text/javascript" src="js/bg.js"></script>
        <script type="text/javascript" src="js/bw.js"></script>
    </head>
    <body>
        <img src="css/img/me_wide.jpg" id="bg" alt="Me"/>
        <p class="position_content">I'm just another mr. В«designerВ» from Ukraine.<br/>
        I have a strong opinion in web and graphic design.<br/>
        You can check my works on <a href="http://dribbble.com/Clubberry" class="dribbble">dribbble</a> and <a href="http://clubberry.deviantart.com/" class="deviantart">deviantart</a>.<br/>
        Also follow me on <a href="http://twitter.com/Clubberry" class="twitter">twitter</a> or just <a href="mailto:artkorolenko@russia.ru?Subject=Hello!" class="hello">say hello</a>.</p>
        <div id="icons" class="icons">
        <a href="http://cargocollective.com/artkorolenko" target="_blank"><img class="icons" alt="Cargo" src="css/img/icons/bw/cargo_16.png" /></a>
        <a href="http://clubberry.deviantart.com/" target="_blank"><img class="icons" alt="deviantART" src="css/img/icons/bw/deviantart_16.png" id="deviantart" width="16" height="16" &#111;&#110;mouseover="mouseOver1()" &#111;&#110;mouseout="mouseOut1()" /></a>
        <a href="http://dribbble.com/Clubberry" target="_blank"><img class="icons" alt="Dribbble" src="css/img/icons/bw/dribbble_16.png" id="dribbble" width="16" height="16" &#111;&#110;mouseover="mouseOver2()" &#111;&#110;mouseout="mouseOut2()" /></a>
        <a href="http://www.facebook.com/iksdejkee" target="_blank"><img class="icons" alt="Facebook" src="css/img/icons/bw/facebook_16.png" id="facebook" width="16" height="16" &#111;&#110;mouseover="mouseOver3()" &#111;&#110;mouseout="mouseOut3()" /></a>
        <a href="http://www.flickr.com/photos/iksde/" target="_blank"><img class="icons" alt="Flickr" src="css/img/icons/bw/flickr_16.png" id="flickr" width="16" height="16" &#111;&#110;mouseover="mouseOver4()" &#111;&#110;mouseout="mouseOut4()" /></a>
        <a href="http://www.lastfm.ru/user/WebScUm" target="_blank"><img class="icons" alt="Last.fm" src="css/img/icons/bw/lastfm_16.png" id="lastfm" width="16" height="16" &#111;&#110;mouseover="mouseOver5()" &#111;&#110;mouseout="mouseOut5()" /></a>
        <a href="skype:man.hunt-"><img class="icons" alt="Skype" src="css/img/icons/bw/skype_16.png" id="skype" width="16" height="16" &#111;&#110;mouseover="mouseOver6()" &#111;&#110;mouseout="mouseOut6()" /></a>
        <a href="http://iksde.tumblr.com/" target="_blank"><img class="icons" alt="Tumblr" src="css/img/icons/bw/tumblr_16.png" id="tumblr" width="16" height="16" &#111;&#110;mouseover="mouseOver7()" &#111;&#110;mouseout="mouseOut7()" /></a>
        <a href="http://twitter.com/#!/Clubb3rry" target="_blank"><img class="icons" alt="Twitter" src="css/img/icons/bw/twitter_16.png" id="twitter" width="16" height="16" &#111;&#110;mouseover="mouseOver8()" &#111;&#110;mouseout="mouseOut8()" /></a>
        <a href="http://vimeo.com/clubberry" target="_blank"><img class="icons" alt="Vimeo" src="css/img/icons/bw/vimeo_16.png" id="vimeo" width="16" height="16" &#111;&#110;mouseover="mouseOver9()" &#111;&#110;mouseout="mouseOut9()" /></a>
        <a href="mailto:artkorolenko@russia.ru?Subject=Hello!" target="_blank"><img class="icons" alt="Email" src="css/img/icons/bw/email_16.png" /></a>
        </div>
    </body>
</html>
[ATTACH]4948[/ATTACH]
244
27 января 2011 года
UAS
2.0K / / 19.07.2006
Не, ну это понятно. Изменить имена функции - было очевидным решением, но далеко не универсальным и разумным. У вас куча идентичного кода, отличающихся лишь id объекта и подставляемой картинкой. Намного проще и очевиднее создать одну-две функции, которые и реализуют полную обработку наведений мыши на определенный набор объектов.
32K
27 января 2011 года
Clubberry
186 / / 19.01.2011
Я новичок в этом деле и поэтому для меня было легче сделать так, как я сделал (написать много функций с разными именами). Более замысловатый код javascript меня бы вывел из строя, он и так с трудом мне даётся. :D

Цитата:

Намного проще и очевиднее создать одну-две функции, которые и реализуют полную обработку наведений мыши на определенный набор объектов.


Код который Вы мне дали выше так и сделает? Если да, то я всё же попытаюсь это сделать.

Свернуть исходник 
Код:
body {
    background: #000000;
    font-family: "Trebuchet MS", Georgia, Arial, sans-serif;
    font-style: italic;
    font-size: 12px;
    color: #353535;
}

#bg {
    position: fixed;
    top: 0;
    left: 0;
}

.bgwidth {
    width: 100%;
}

.bgheight {
    height: 100%;
}

a.dribbble {
    color: #ea4c89;
    text-decoration: none;
    background: #fff;
    -webkit-transition: all 0.3s ease; /* Safari, Chrome */
    -moz-transition: all 0.3s ease; /* Firefox */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease;
}

a.dribbble:hover,
a.dribbble:focus {
    text-decoration: none;
    color: #fff;
    background: #353535;
}

a.deviantart {
    color: #425349;
    text-decoration: none;
    background: #fff;
    -webkit-transition: all 0.3s ease; /* Safari, Chrome */
    -moz-transition: all 0.3s ease; /* Firefox */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease;

}

a.deviantart:hover,
a.deviantart:focus {
    text-decoration: none;
    color: #fff;
    background: #353535;
}


a.twitter {
    color: #46d1ff;
    text-decoration: none;
    background: #fff;
    -webkit-transition: all 0.3s ease; /* Safari, Chrome */
    -moz-transition: all 0.3s ease; /* Firefox */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease;

}

a.twitter:hover,
a.twitter:focus {
    text-decoration: none;
    color: #fff;
    background: #353535;
}

a.hello {
    color: black;
    text-decoration: none;
    background: #fff;
    -webkit-transition: all 0.3s ease; /* Safari, Chrome */
    -moz-transition: all 0.3s ease; /* Firefox */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease;

}

a.hello:hover,
a.hello:focus {
    text-decoration: none;
    color: #fff;
    background: #353535;
}

p.position_content {
    position: absolute;
    left: 500px;
    top: 400px;
}

div.icons {
    position: absolute;
    left: 500px;
    top: 490px;
}


#icons a img {
    opacity: 0.25;
    border: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
    filter: alpha(opacity = 25); /* IE 5-7 hack */
    -webkit-transition: opacity 0.5s ease-in-out; /* Safari, Chrome */
    -moz-transition: opacity 0.5s ease-in-out; /* Firefox */
    -o-transition: opacity 0.5s ease-in-out; /* Opera */
    transition: opacity 0.5s ease-in-out;
    }

#icons a:hover img,
#icons a:focus img {
    opacity: 100;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
    filter: alpha(opacity = 60); /* IE 5-7 hack */
    }
244
27 января 2011 года
UAS
2.0K / / 19.07.2006
Если всмотреться в мой код и понять его смысл, то это очевидно, что он это сделает.
Но поломать голову придется, хотя в целом все сводится к определению объектов и картинок внтури переменной, а потом их подстановкой. Есть, конечно, и другие варианты решения, когда пути к картинкам можно задать в теге и т.д.
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог