HTML+CSS+JavaScript

Как сделать alt теги ссылок на java ???
Чтобы описания ссылки появлялись не в стандартной подсказке в винды, а, чтото вроде маленького окошка....

в тэг <a href=...> ставишь это:

ONMOUSEOVER="pop('msg')" ONMOUSEOUT="kill()"

в самом верху страницы должен быть невидимый слой:

<DIV ID="topdeck" CLASS="popper"> </DIV>

в стилях прописываешь:

<style TYPE="text/css"> <!-- body{ overflow:scroll;overflow-x:hidden } .popper { position : absolute; visibility : hidden; } //--> </style>

и, наконец, сам скрипт (в любом месте кода, но лучше в head):

<SCRIPT> var nav = (document.layers); var iex = (document.all); var skn = (nav) ? document.topdeck : topdeck.style; if (nav) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; function pop(msg) // msg = это сообщение, оно передается в ссылке в кавычках (вместо msg) { var content ="<TABLE CELLPADDING=2 CELLSPACING=0 style='border-width: 1px; border-color: black; border-style: solid; background-color: ffffff'><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD>" + msg + "</p></TD></TR></TABLE></TD></TR></TABLE>"; // здесь пишешь, что хочешь if (nav) { skn.document.write(content); skn.document.close(); skn.visibility = "visible"; } else if (iex) { document.all("topdeck").innerHTML = content; skn.visibility = "visible"; } } function get_mouse(e) { var x = (nav) ? e.pageX : event.x+document.body.scrollLeft; var y = (nav) ? e.pageY : event.y+document.body.scrollTop; skn.left = x-80; // координаты смещения от позиции курсора skn.top = y-80; // координаты смещения от позиции курсора } function kill() // "убивает" окошко { skn.visibility = "hidden"; } </SCRIPT>

удачки!

Спасибо !!!!!!

А можно, чтонибуть подобное на JavaScript ???

?
То что написала elenaki и есть на JavaScript...

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm
http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

похожее можно соорудить на DHTML, но по-моему, овчинка выделки не стоит. слишком много кода. на Java-script в окошко можно засунуть что угодно - таблицу, текст, картинку...

Замечательный скрипт.
Но скажите какими параметрами надо в alt вгонять gif рисунок?

var content ="<TABLE CELLPADDING=2 CELLSPACING=0 style='border-width: 1px; border-color: black; border-style: solid; background-color: ffffff'><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD>" + msg + "</p></TD></TR></TABLE></TD></TR></TABLE>";

здесь в таблице можно писать все, что угодно (не нарушая синтаксис Java-script'a, конечно).
а картинки, если они тоже динамически должны подключаться, можно передавать в другом
параметре при вызове функции pop(img, txt), где img - имя файла с картинкой, а txt - текст
сообщения.
это я про тот java-script, который я первым привела. в DHTML тоже java-script, но там заранее
прописаны все сообщения и стили таблицы. можно, конечно, поизвращаться, переписать
функции, чтобы они принимали переменные в качестве параметра...

не совсем понял 8(
Функция pop(img, txt) как должна выглядеть?

вместо

function pop(msg) // msg = это сообщение, оно передается в ссылке в кавычках (вместо msg)  {  var content ="<TABLE CELLPADDING=2 CELLSPACING=0 style='border-width: 1px; border-color: black; border-style: solid; background-color: ffffff'><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD>" + msg + "</p></TD></TR></TABLE></TD></TR></TABLE>";

пишем

function pop(img, txt)  { var content ="<TABLE CELLPADDING=2 CELLSPACING=0 style='border-width: 1px; border-color: black; border-style: solid; background-color: ffffff'><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><img src=\"path_to_img/" + img + "\" align=left>" + txt + "</TD></TR></TABLE></TD></TR></TABLE>";

и вставляем картинку в HTML- код

вызывать функцию надо теперь с двумя параметрами - img и txt
pop(img, txt), где img - строка с именем файла картинки, а txt - строка с текстом

Я что то не понял что это такое так как у меня скрмпт дал ошибку. но мне нужно вроде такой скрипт :
У меня ссылки а внизу таблица где должны выводится несколько ссылок при нажатии. как организовать это ?

если нужны ссылки, то эти скрипты не подойдут. ведь они - заменители alt-тега (о чем вопрос-то был самый первый?). на содержимое этих "комментариев" нельзя нажать, кликнуть и тд. можно только посмотреть и прочитать. простой alt-тег не вмещает в себя много и не дает много времени, чтобы прочитать, закрывается. поэтому и придумали эти "фишки" со слоями. вам нужно простое меню типа "показать-убрать". если вопрос не отпадет сам собой, постараюсь к завтра выложить...

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

Думаю вы меня не правильно поняли обясьню по подробнее.
У меня три ссылки и внизу таблица (TABLE) а внутри таблицы должно отображаться несколько ссылок при нажатии. Я хотел это организовать так , но у меня не получился, не знаю почему :

<a href="#" OnClick="func('a')">alink</a>&nbsp;&nbsp;&nbsp; <a href="#" OnClick="func('b')">blink</a>&nbsp;&nbsp;&nbsp; <a href="#" OnClick="func{'c')">clink</a>&nbsp;&nbsp;&nbsp; <TABLE width="400"><TR><TD> <SCRIPT> function func(name) { If (name='b') { document.write('<a href=" ">blink1</a>&nbsp; '); document.write('<a href=" ">blink2</a>&nbsp; '); } else { IF (name='c') {  document.write('<a href=" ">clink1</a>&nbsp; '); document.write('<a href=" ">clink2</a>&nbsp; ');        } else { document.write('<a href=" ">alink1</a>&nbsp; '); document.write('<a href=" ">alink2</a>&nbsp; '); }     } } </SCRIPT> </TD></TR></TABLE>

я бы сделала вот так:

<a href="#" OnClick="window.location='test.html?a'">alink</a>&nbsp;&nbsp;&nbsp;  <a href="#" OnClick="window.location='test.html?b'">blink</a>&nbsp;&nbsp;&nbsp;  <a href="#" OnClick="window.location='test.html?c'">clink</a>&nbsp;&nbsp;&nbsp;  <TABLE width="400"><TR><TD>  <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">  var name = location.search.substring(1);     if (name == "b")     { document.write('<a href=" ">blink1</a>&nbsp; ');        document.write('<a href=" ">blink2</a>&nbsp; ');      }       else if (name=="c")      { document.write('<a href=" ">clink1</a>&nbsp; ');        document.write('<a href=" ">clink2</a>&nbsp; ');      }      else if ((name == "a") || (name == ""))     { document.write('<a href=" ">alink1</a>&nbsp; ');             document.write('<a href=" ">alink2</a>&nbsp; ');           }   </script>   </TD></TR></TABLE>

дело в том, что если использовать каждый раз для новой ссылки document.write, надо перезагружать страницу. ведь то, что уже выведено в браузер, изменить нельзя. но можно задать другой параметр (name) в URL, прочитать его потом в скрипте и вывести нужный фрагмент текста (ссылки) в таблице.
если метод с перезагрузкой страницы не подходит, остаются невидимые слои, которые делаются видимыми по клику на ссылке. такое у меня тоже есть.

Хм.. Кажется все равно не работает ... Может сами посмотрите. у меня не сработала

файл надо назвать test.html
у меня все работает

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

О, даже не посмотрел на, что отвечаю :)
немного нето :)

А как можно создать такую форму чтобы работал с большинство бразерами ?

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

Хм.., а какой у Вас браузер? Проверил этот скрипт в IE – все работает.
Если JavaScript в принципе работает, то должен работать и это скрипт.. Тут вроде никаких особенностей нет.
А что "не работает"? Не меняются ссылки по нажатию?

Ок кажется что то нашел если что то получиться то об этом расскажу )))

На счет моего скрипта я нашел то что искал :)

<HTML> <HEAD> <Script language="JavaScript" type="text/JavaScript"> function showtable (tblname) { hidemenu(0); document.getElementById('menu'+tblname).style.visibility = 'visible'; document.getElementById('menu'+tblname).style.height = ''; document.getElementById('menu'+tblname).style.overflow = 'visible';} function hidemenu (time) { for (var i=1;i<=3;i++) { document.getElementById('menu'+i).style.visibility = 'hidden'; document.getElementById('menu'+i).style.height = '1px'; document.getElementById('menu'+i).style.overflow = 'hidden'; } } function loads() { showtable(1);} </Script> </HEAD><BODY OnLoad="loads();"> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0  width="400"> <TR><TD width="10" onclick="showtable('1');">Links1</TD> <TD>&nbsp;&nbsp;</TD> <TD width="10" onclick="showtable('2');">Links2</TD> <TD>&nbsp;&nbsp;</TD> <TD width="10" onclick="showtable('3');">Links3</TD></TR></TABLE><br><br> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 width="410"><TR> <TD> <span id="menu1" style="visibility:hidden; height:0px; overflow:hidden"> <a href="link1">Page1</a><br> <a href="link2">Page2</a><br> <a href="link3">Page3</a><br> </span> <span id="menu2" style="visibility:hidden; height:0px; overflow:hidden"> <a href="link4">Page4</a><br> <a href="link5">Page5</a><br> <a href="link6">Page6</a><br> </span> <span id="menu3" style="visibility:hidden; height:0px; overflow:hidden"> <a href="link7">Page7</a><br> <a href="link8">Page8</a><br> <a href="link9">Page9</a></TD> </span> </TD></TR></TABLE> </BODY></HTML>

Меня интересует ваш скрипт. Я написал но тут одно неувязка. Дело в том что функция kill не "убивает" окошко, только прячет его и поетому когда мышкой тянеш вниз то оно идет до бесконечности и не только вниз и в право и на лево )))

Ну я хотел сказать что нужно в функции kill изменить contect и разделить функцию pop на две части