URL: https://www.opennet.me/cgi-bin/openforum/vsluhboard.cgi
Форум: vsluhforumID8
Нить номер: 3500
[ Назад ]

Исходное сообщение
"Как с помощью DHTML делать такой финт, как на www.sonyericsson.com?"

Отправлено fucklog , 04-Авг-05 19:25 
Привет ребята!

Зацените фишку например на http://www.sonyericsson.com/spg.jsp?cc=global&lc=en&ver=4001...
если ткнуть на любую из многочисленных синих надписей, появится такая маленькая хрень. Как ее написать на vbscript, ну или на худой конец, на jscript?

Спасибо за помощь!


Содержание

Сообщения в этом обсуждении
"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 05-Авг-05 12:05 
Вряд ли тебе тут кто-нибудь про vbscript что-нибудь ответит.
На сонерике сделано ява скриптом.
Как?
А в исходниках не глянуть самому что-ли?



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено fucklog , 05-Авг-05 19:34 
Спасибо, за ответ, академик.

Да я смотрел, но не понял как.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 08-Авг-05 11:40 
>Спасибо, за ответ, академик.

Вегда пожалуйста. ;-)

>Да я смотрел, но не понял как.

Мне вот честно говоря лень там разбираться, т.к. в этом у меня пока потребности нету.

А вообще: Видел, что там на ссылки onClick повешен?
А в начале HTML подгружены скрипты?
Берёшь загружаешь скрипт себе и ищешь в нём функцию, кот. на onClick была повешена.
Далее её уже смотри на тему как работает.
(это на случай, если ты вдруг сам это до сих пор не сделал)

И да поможет тебе справочник по JavaScript!


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено fucklog , 09-Авг-05 14:17 
Аакдемик, ты, я смотрю, рубишь в Jave - подскажи, если знаешь, как делать раскрывающиеся списки, как, например, в http://www.microsoft.com/education/ClassServerFAQ.mspx

Спасибо!


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 10-Авг-05 11:35 
Глянул туда.
Ничерта неясно(с первого взгляда, а пристальней смотреть времени сейчас нет).
Работает оно ессно только в ie.
На пунктах меню вызовов JavaScript не видно.
Что-то странное.
Ну да и фиг с ним раз нисчем кроме самих MS несовместимо.

Я делал другой вариант(для двух уровней):
Создаёшь табличку.
В ней два стобца.
В первом пункты меню верхнего уровня.
Во втором <div> с пунктами меню второго уровня.
На диве стиль display: none;
При наведении ни пункт меню изменяешь свойство display на block.
И обратно, при "уходе" кукурсора.
Можешь глянуть www.effectiveinventory.com.
Только там не столбцы, а строки, т.к. меню горизонтальное.
По странной причине менюха наполовину глючит в опере(т.е. некоторые пункты нормально выпадают, а некоторые нет).


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 10-Авг-05 12:46 
>Глянул туда.
>Ничерта неясно(с первого взгляда, а пристальней смотреть времени сейчас нет).
>Работает оно ессно только в ie.
>На пунктах меню вызовов JavaScript не видно.
>Что-то странное.
>Ну да и фиг с ним раз нисчем кроме самих MS несовместимо.

Гонево =) FIrefox 1.0.6 - все работает
>
>
>Я делал другой вариант(для двух уровней):
>Создаёшь табличку.
>В ней два стобца.
>В первом пункты меню верхнего уровня.
>Во втором <div> с пунктами меню второго уровня.
>На диве стиль display: none;
>При наведении ни пункт меню изменяешь свойство display на block.
>И обратно, при "уходе" кукурсора.
>Можешь глянуть www.effectiveinventory.com.
>Только там не столбцы, а строки, т.к. меню горизонтальное.
>По странной причине менюха наполовину глючит в опере(т.е. некоторые пункты нормально выпадают,
>а некоторые нет).



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 12-Авг-05 13:50 
>>Ну да и фиг с ним раз нисчем кроме самих MS несовместимо.
>
>Гонево =) FIrefox 1.0.6 - все работает

Ну может быть - нету у меня FireFox'а.
Под восьмой Оперой не пашет.

Может тогда сам просветишь человека, если время есть разбираться.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 12-Авг-05 15:27 
>>>Ну да и фиг с ним раз нисчем кроме самих MS несовместимо.
>>
>>Гонево =) FIrefox 1.0.6 - все работает
>
>Ну может быть - нету у меня FireFox'а.
>Под восьмой Оперой не пашет.
>
>Может тогда сам просветишь человека, если время есть разбираться.

Никогда не поощрял, и не буду этого делать, людей которые не любят сами решать проблеммы. Если бы у человека возникли вопросы в процессе работы, а не просто так, то да а так у самого много дел =) Действие то элементарное =) Посмотреть исходный код страниц и сделать хотя бы 1к1.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 12-Авг-05 15:39 
>>>>Ну да и фиг с ним раз нисчем кроме самих MS несовместимо.
>>>
>>>Гонево =) FIrefox 1.0.6 - все работает
>>
>>Ну может быть - нету у меня FireFox'а.
>>Под восьмой Оперой не пашет.
>>
>>Может тогда сам просветишь человека, если время есть разбираться.
>
>Никогда не поощрял, и не буду этого делать, людей которые не любят
>сами решать проблеммы. Если бы у человека возникли вопросы в процессе
>работы, а не просто так, то да а так у самого
>много дел =) Действие то элементарное =) Посмотреть исходный код страниц
>и сделать хотя бы 1к1.

Предупреждая высказывания (всякие) =)

Исходный код пункта меню при нажатии на которое вылазит окошко
<a href="javascript:void(0);" onclick="balloonText(3297 , this, event);" class="link">Instant Messaging</a>

Исходный код самой balloonText находится внутри самой страницы а не подключаемых js-файлах.

function balloonText(featureId, aObj, e) {
    var posObj = document.getElementById("featureBalloonPos");
    var headObj = document.getElementById("featureBalloonHeading");
    var conObj = document.getElementById("featureBalloonContent");
    var accUrl = "";
    var accDesc = "";
    var accText = "";
    
    for(i=0; i<ACProdArr.length; i++){
        if(ACProdArr[i].id == featureId){
            accDesc = ACProdArr[i].description;
            accText = ACProdArr[i].text;
            accUrl    = ACProdArr[i].url
            break;
        }
    }
    
    if(accUrl != ''){
        accDesc += "<br /><a href='spg.jsp?cc=global&lc=en&ver=4001&template=" + accUrl + "&zone=pp&lm=pp2&fid=" + featureId + "' class='link'><img  src='/images/spgc/CWS31AFW_9382high_27_0_4001.gif' border='0' alt='' />Read more</a>";
    }
    
    tmpObj = aObj;
    var curleft = 0;
    var curtop = 0;
    if (tmpObj.offsetParent){
        while (tmpObj.offsetParent)    {
            curtop += tmpObj.offsetTop;
            curleft += tmpObj.offsetLeft;
            tmpObj = tmpObj.offsetParent;
        }
    }
    else if (tmpObj.x){
        curtop += tmpObj.y;
        curleft += tmpObj.x;
    }
    

    
    posObj.style.display = "block";
    posObj.style.position = "absolute";
    posObj.style.left = (curleft-200) + "px";
    posObj.style.top = (curtop-15) + "px";
    
    headObj.innerHTML = accText;
    conObj.innerHTML = accDesc;
    
    //IE bug workarround, stop for 350 milisecs, otherwise images are not shown.
    if(document.all){
        d = new Date() //today's date
        while (1){
            mill=new Date() // Date Now
            diff = mill-d //difference in milliseconds
            if( diff > 350 ){
                break;
            }
        }
    }
}

function closeBalloonText() {
    document.getElementById("featureBalloonPos").style.display = "none";
}

Ну и дальше в таком же духе ... Не вижу ничего сложного ...


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 12-Авг-05 16:49 
У меня всвязы с высказыванием появились подозрения: А об одном и том же мы говорим?

С сонериком изначально проблем то нет.
>Исходный код самой balloonText находится внутри самой страницы а не подключаемых js-файлах.
Согласен(ещё бы!), некогда было тогда внимательно глянуть.

А вот c microsoft не так всё просто.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 12-Авг-05 16:55 
>У меня всвязы с высказыванием появились подозрения: А об одном и том
>же мы говорим?
>
>Код приведённый это microsoft или с сонерика?
>
>С сонериком изначально проблем то нет.
>>Исходный код самой balloonText находится внутри самой страницы а не подключаемых js-файлах.
>
>Согласен(ещё бы!), некогда было тогда внимательно глянуть.

А про какой микрософт мы говорим? ;) Почитал историю, там только сониериксон


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 12-Авг-05 16:57 
Четвёртая мессага.

"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 12-Авг-05 17:05 
>Четвёртая мессага.

Блин =) Там еще проще сделано =) Сиди да и смотри исходники html ... Не понимаю человека ... И вообще ник у него странный ... Я бы его читал в следующей редакции: fuckbrain


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 12-Авг-05 17:17 
О! нашёлся умный человек!

На всякий случай напомню, что разговор идёт о работе менюшки у микрософта.
Из под ie видно, что пункты левой менюхи раскрываются при наведении мыши.
Под Оперой нифига.
Не знаю, как там под лисой.

Поднятый вопрос: как оно работает?

В исходниках напрямую невидно ни onMouseOver ни onMouseOut.
И нету JavaScript'a, похожего на то, что надо.
Впрочем и нету слов из подпунктов меню.
Зато есть строчки типа
<div class="mnpMenuRow" style="border-color: #F1F1F1; background: #F1F1F1; width: 153px; overflow-x: hidden" menu="md5b5b44860be45dc806d04e2ba3b4dac">

Что есть menu я не в курсе.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено fucklog , 12-Авг-05 20:11 
Академик, ты заинтересовался майкрософтом, я смотрю!!
Спасибо за внимание и твои ответы!

"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 15-Авг-05 12:12 
>О! нашёлся умный человек!
>
>На всякий случай напомню, что разговор идёт о работе менюшки у микрософта.
>
>Из под ie видно, что пункты левой менюхи раскрываются при наведении мыши.
>
>Под Оперой нифига.
>Не знаю, как там под лисой.
>
>Поднятый вопрос: как оно работает?
>
>В исходниках напрямую невидно ни onMouseOver ни onMouseOut.
>И нету JavaScript'a, похожего на то, что надо.
>Впрочем и нету слов из подпунктов меню.
>Зато есть строчки типа
><div class="mnpMenuRow" style="border-color: #F1F1F1; background: #F1F1F1; width: 153px; overflow-x: hidden" menu="md5b5b44860be45dc806d04e2ba3b4dac">
>
>Что есть menu я не в курсе.

Я долго "курил" сырцы страницы и пришел к такому выводу. Ненадо делать как там =) Оно заточено only под IE ...
<div class="mnpMenuRow" style="border-color: rgb(241, 241, 241); background: rgb(241, 241, 241) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 153px;" menu="md939ad92d56141858e31ce195b86a880">

На http://www.w3.org/TR/html4/struct/global.html#edef-DIV, допустим, я не нашел такого элемента menu у тега div ... Может я чего то не понимаю но мне кажется что с такими страничками лучше не дружить если ты многоплатформенный разработчик =)


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 15-Авг-05 13:18 
>Я долго "курил" сырцы страницы и пришел к такому выводу. Ненадо делать
>как там =) Оно заточено only под IE ...

Вот то-то и оно, что под ie.

><div class="mnpMenuRow" style="border-color: rgb(241, 241, 241); background: rgb(241, 241, 241) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 153px;" menu="md939ad92d56141858e31ce195b86a880">

А где это ты нарыл такую строчку?

>На http://www.w3.org/TR/html4/struct/global.html#edef-DIV, допустим, я не нашел такого элемента menu у тега div
>... Может я чего то не понимаю но мне кажется что
>с такими страничками лучше не дружить если ты многоплатформенный разработчик =)

Я тоже так считаю.
Но вот изучить как оно всё же у них работает мне интересно.
Да и микрософт плевал на стандарты, т.к. у них юзеров много-много и 90% под ie.



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 15-Авг-05 14:01 
>>Я долго "курил" сырцы страницы и пришел к такому выводу. Ненадо делать
>>как там =) Оно заточено only под IE ...
>
>Вот то-то и оно, что под ie.
>
>><div class="mnpMenuRow" style="border-color: rgb(241, 241, 241); background: rgb(241, 241, 241) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 153px;" menu="md939ad92d56141858e31ce195b86a880">
>
>А где это ты нарыл такую строчку?
>

А это плюсы лисы =) Выделяешь что нибудь на странице и по правой кнопке - Просмотр исходного кода выделенного фрагмента =)
Как то промелькивала ссылка на обзорную статью ... Пока писал, заодно и нашел =)

http://nanobox.chipx86.com/browser_support.php

Я думаю после прочтения все станет кристально понятно =)

>>На http://www.w3.org/TR/html4/struct/global.html#edef-DIV, допустим, я не нашел такого элемента menu у тега div
>>... Может я чего то не понимаю но мне кажется что
>>с такими страничками лучше не дружить если ты многоплатформенный разработчик =)
>
>Я тоже так считаю.
>Но вот изучить как оно всё же у них работает мне интересно.
>
>Да и микрософт плевал на стандарты, т.к. у них юзеров много-много и
>90% под ie.



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Asmund , 07-Ноя-05 19:08 
Честно говоря почитал сообщения и через пару тройку потерял всякий смысл.
О чем идет реч?
Что-он такого нашел на этом сайте?
По наводил на ссылочки потыкал, ни чего сног сшибательного не происходит.

Если говорить овыпадающих или раскрывающихся списках. То надо уточнить что именно человек хочет. Хотя делается на одинаковых принципах.

Мельком глянул на текст котороый был приведен. Согласен так делать не стоит там все чересчур правильно написано и вероятность того что даже в другой версии браузера работать не будет стремительно приближается к максимуму.

Я так понимаю там уже как минимум два вопроса?

Давайте их решать последовательно.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Asmund , 07-Ноя-05 19:40 
Кажись понял что он имел ввиду.
Посмотрел из Винды.
Когда щелкаеш на сссылку выподает окошко, с пояснениями.
fucklog, ты это имел ввиду.
Вобщем это можно сделать просто.
Такая штука делается с помощью слоев layers.
создаеш таблицу где-нибудь в конце страници и заставляеш ее не показываться
<display:none> это css.
затем пишеш маленькую функцию на java для того что бы она показывалась по определенному действию например по клику с координатами курсора или того элеменнта страници на который ты кликаеш.

Косяк в том, что в разных браузераш будет смещение т.е. показываться будет не совсем в одном и том же месте. Бороться с этим можно двумя способами либо усложнять скрипт так чтобы он распозновал версии браузеров и jav'ы либо размещать так чтобы при любых исходах казалось к месту, все.
Скрипт так сразу готовый дать не могу, не помню, попробуй разобраться сам не получится спрашивай поможем.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 08-Ноя-05 11:14 
>Косяк в том, что в разных браузераш будет смещение т.е. показываться будет
>не совсем в одном и том же месте. Бороться с этим
>можно двумя способами либо усложнять скрипт так чтобы он распозновал версии
>браузеров и jav'ы либо размещать так чтобы при любых исходах казалось
>к месту, все.

При построении менюшки на таблицах смещений практически не бывает.
А если и появляется, то довольно просто устраняется.
Насчёт переносимых менюшек, мне очень понравилось как работают
меню на www.novell.ru.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Asmund , 08-Ноя-05 13:47 

>При построении менюшки на таблицах смещений практически не бывает.
>А если и появляется, то довольно просто устраняется.
>Насчёт переносимых менюшек, мне очень понравилось как работают
>меню на www.novell.ru.

Посмотрел Новел. Такие вещи вообще элементарно делаются. Примерно так как я и говорил. Таблицу скрываеш а потом показывеш. Привязываешся по координатам например верхнего левого угла объекта события которого используеш. Все.



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 08-Ноя-05 16:56 
>Посмотрел Новел. Такие вещи вообще элементарно делаются. Примерно так как я и
>говорил. Таблицу скрываеш а потом показывеш. Привязываешся по координатам например верхнего
>левого угла объекта события которого используеш. Все.

Элементарно - неэлементарно, не суть.
Суть в том, что кроссбраузерно.

У них там движок менюхи генерящий по отданонму массиву.
А массив элементарно генерится скриптом.

В-общем понравилось мне.


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Asmund , 10-Ноя-05 16:55 
Ну согласен "красиво" сделано.
Ну так там и не кто попало сидит, деньги получает.

"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено HunterNomad , 26-Апр-06 12:45 
А никто не пробывал правой кнопочкой на меню клацнуть.
ОНО НАПИСАНО НА ФЛЕШ .............



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 26-Апр-06 16:37 
>А никто не пробывал правой кнопочкой на меню клацнуть.
>ОНО НАПИСАНО НА ФЛЕШ .............

Кто ОНО?


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено HunterNomad , 26-Апр-06 17:01 
>>А никто не пробывал правой кнопочкой на меню клацнуть.
>>ОНО НАПИСАНО НА ФЛЕШ .............
>
>Кто ОНО?
МЕНЮ
иди я типа не понял о чем речь?


"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Akademic , 27-Апр-06 19:41 
>МЕНЮ
>иди я типа не понял о чем речь?

Чьё меню?
Сейчас пробежался по трём обсуждаемым линкам.
И везде не флеш.



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено xomka , 28-Апр-06 07:39 
>>МЕНЮ
>>иди я типа не понял о чем речь?
>
>Чьё меню?
>Сейчас пробежался по трём обсуждаемым линкам.
>И везде не флеш.
сониэриксон - это флеш



"Как с помощью DHTML делать такой финт, как на www.sonyericss..."
Отправлено Simps , 28-Апр-06 15:24 
>>>МЕНЮ
>>>иди я типа не понял о чем речь?
>>
>>Чьё меню?
>>Сейчас пробежался по трём обсуждаемым линкам.
>>И везде не флеш.
>сониэриксон - это флеш

Почитайте внимательно о чем тред