Question

Как сделать так чтобы при наведении картинка меняется и при нажиме в ajax окне открывала профиль.

То есть при наведении курсора картинка меняется на другую, и когда на эту картинку нажимаем запускается скрипт

Пробовал сам но не получается - оба эффекта не могу комбинировать

Код замены картинки при наведении брал с htmlbook

Окно профиля вызвал так:(брал с какого-то сайта)

 

script> 
 function profile() { 
 new _uWnd('profile','Профіль',800,400,{min:0,shadow:1,header:1,max:0,resize:0,modal:1,nomove:1},'<iframe frameborder="0" src="/index/8" width="800" height="400" ></iframe>'); 
 } 
 </script> 
 <a onclick="profile();" href="javascript://"><img src="/img/id.png" alt="Мій профіль" width="30" height="30"></a>

 

 

Answer 1

Как аякс окно идентифицирует пользователя? там нет такой функции.
А в остальном как на хтмл буке описано

<a class="imgtest" onclick="profile();" href="javascript://"></a>

В ксс пишем это

a.imgtest { background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /*  Высота рисунка */}
a.imgtest:hover { background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */}

Comments

Не получилось, к сожалению, кнопка профиль вообще пропала...

---

Night Wolf,

Вы эти картинки заменили на свои? images/sun1.png и images/sun2.png это все во лишь пример, картинки свои загрузите в ФМ и затем замените ссылки.

---

Sentimo,

заменил конечно, прописал пути id.png и id2.png.

 

CSS

a.imgtest { background: url(img/id.png); /* Путь к файлу с исходным рисунком */
 display: block; /* Рисунок как блочный элемент */
 width: 30px; /* Ширина рисунка */
 height: 30px; /* Высота рисунка */}
a.imgtest:hover { background: url(img/id2.png); /* Путь к файлу с заменяемым рисунком */}

 

 

Header

<ul class="soc-icons">
 <?if($USER_LOGGED_IN$)?>
<script> 
 function profile() { 
 new _uWnd('profile','Профіль',800,400,{min:0,shadow:1,header:1,max:0,resize:0,modal:1,nomove:1},'<iframe frameborder="0" src="/index/8" width="800" height="400" ></iframe>'); 
 } 
 </script> 
 <a class="imgtest" onclick="profile();" href="javascript://"></a>
 <li><a href="$LOGOUT_LINK$" title="Вихід" class="i-out">Вихід</a></li>
 <?else?>
 <li><a href="$REGISTER_LINK$" title="Реєстрація" class="i-reg">Реєстрація</a></li>
 <li><a href="$LOGIN_LINK$" title="Вхід" class="i-in">Вхід</a></li>
 <?endif?>
 </ul>

 

 

---

Night Wolf,

Я не вижу у вас папки с названием img, куда вы положили картинки?

---

Sentimo,

Папка существует и файлы в ней:

ftp://210a@10a.at.ua/img/id.png

ftp://210a@10a.at.ua/img/id2.png

---

Night Wolf,

Покажите мне скриншот ФМ с файлами а не фтп менеджер.

---

Sentimo,

Вот - что еще?

---

Night Wolf,

Прошло две недели...

---

Night Wolf,

Так пропишите

a.imgtest { background: url(/images/sun1.png); /* Путь к файлу с исходным рисунком  */
     display: block; /*  Рисунок как блочный элемент */
     width: 196px; /* Ширина рисунка */
     height: 183px; /*  Высота рисунка */}
 a.imgtest:hover { background: url(/images/sun2.png); /* Путь к файлу с заменяемым рисунком  */}