У меня возникала проблема. В старом добром Dreamweaver'е есть функция rollover image, но дело все в том, что мне нужно нечто другое. Допустим у меня есть 2 ссылки.
Навожу курсор на 1 ссылку и в одном месте появляется картинка (а желательно текст), а наведя курсор на 2 ссылку у меня в том же место должен появиться текст(ну или картинка ). Вот, суть проблемы.
Я пробовал сделать через слои, но обнаружил, что при разном расширенни у все по-разному смориться, тое сть у меня красиво а у них не очень. Поэтому спрашиваю профи.!!!!

Лучше создавать всё динамически DOM-методами.

Код

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" language="javascript1.2"> <!--[CDATA[    function setContent(targetId, elemName, value){ // плюс парами - имя и значение атрибута    args = arguments;    var elem = document.createElement(elemName);    if (args.length > 4)   for (var i = 3; i < args.length; i += 2)    elem.setAttribute(args[i], args[i + 1]);    if (value)   elem.appendChild( document.createTextNode(value) );    document.getElementById(targetId).appendChild(elem);   } function delContent(targetId) {    var content = document.getElementById(targetId);    for (var i = content.childNodes.length - 1; i > -1; i--)   content.removeChild(content.childNodes[i]); } //]]--> </script> </head> <body> <!-- ... --> <a href="#" onmouseover="delContent('div1'); setContent('div1', 'b', 'текст1');">т1</a><br /> <a href="#" onmouseover="delContent('div1'); setContent('div1', 'i', 'текст2');">т2</a><br /> <a href="#" onmouseover="delContent('div1'); setContent('div1', 'img', '', 'src', 'http://forum.vingrad.ru/style_images/1/logo.gif');">картинка</a> <div id="div1"></div> </body> </html>

По-моему не стоит ограничиватьсяч в версии браузера, отрезая старые. Можно задавать картинки name и менять ее src
Так же в IE можно предварительно закешировать картинку

Код обычного ролловера:

Код

<HTML> <HEAD> <title>Тест</title> <script type="text/javascript"> if (document.images) { (new Image(60,60)).src = "77.gif"; } function rollover (name, src) {   name.src = src; } </script> </HEAD> <BODY> <div id="qwe" style="align: center; border: 1px red solid; margin: 5px; padding: 15px;"> <a href="#" onmouseover="rollover(roll, '77.gif')" onmouseout="rollover(roll, '14.gif')"><IMG src="14.gif" name="roll" border=0></a> </div> </BODY></HTML>

Да нет, мне не совсем ето нужно привиду пример, я сделал так www.muskat.h15.ru мне нужно тоже самое, но без использования слоев тобишь <div></div>
Это вообще возможно? Если да, то помогите плииз!!!

maugli ты вообще догоняешь что такое слои?
Такой эффект можно получить двумя способами:

• подменить содержимое элемента(слой, таблица, что у тебя на экране). Смотри пример Се ля ви
• создать кучу слоёв с разным содержимым, все скрыть, а один оставить. при работе скрываем слои, показываем тот что нужно. Этот способ наиболее простой, ничего кроме getElementById и element.style.display=(none|block) знать/использовать не требуется

Цитата(Sardar @ 10.3.2005, 21:09)

Такой эффект можно получить двумя способами

А какой предпочтительнее?

Воторой почти всегда, но если все мессаджи не известны(фреймовая структура, разные документы), то первый.

Цитата(Sardar @ 11.3.2005, 15:08)

Воторой почти всегда

А почему? Вроде ж как первый стандартизирован в DOM'e. Или из-за простоты?

Ничего не стандартизованно, просто легче! Если хочешь, то можешь написать шаблонизатор, загружающий интерактивно данные и шаблоны в завистимости от конкретного пользователя, и строящий мессаги. Всё что хочешь можно, вопрос лишь удобно ли тебе это и как сложно реализовать

Цитата(Sardar @ 11.3.2005, 16:30)

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

Э... Не могу... Но пока и не надо.