Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
MrBrain
10 / 10 / 0
Регистрация: 08.06.2010
Сообщений: 76
1

Показать картинку при наведении на строчку таблицы

23.09.2012, 18:15. Просмотров 1274. Ответов 3
Метки нет (Все метки)

Как можно реализовать показ картинки при наведении на строчку таблицы? Картинка должна быть на одном месте, пример:
0
Миниатюры
Показать картинку при наведении на строчку таблицы  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.09.2012, 18:15
Ответы с готовыми решениями:

Показать сообщение при наведении на картинку
Это я думаю вообще легкое задание для многих,но я никак не могу понять как надо...

При наведении мышки на поле показать циферку
Не силен в JS. В кратце опишу то, чего делаю. Есть рисунок, на котором...

При наведении курсора на картинку
Добрый вечер! К сути: Хотелось сделать так, чтобы при наведении курсора на...

Изменить картинку при наведении
Здравствуйте. есть класс .iconcomm (на странице много одинаковых картинок) при...

При наведении на картинку текст
доброго времени друзья! возникла чрезвучайная необходимость внедрить.....

3
Taatshi
Администратор
11713 / 5061 / 257
Регистрация: 05.04.2011
Сообщений: 13,811
Записей в блоге: 2
23.09.2012, 18:38 2
Поскольку картинка и ссылка являются разными элементами документа, думаю, реализовать такой эффект будет проще с помощью Javascript, посему тему переношу.
0
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
23.09.2012, 22:02 3
по простому можно так
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table border="0" cellpadding="0" cellspacing="0" id="myTab">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="4"><img src="#" alt="" id="pic"></td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td></tr></table>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onload=function(){
var m, k;
m=document.getElementById("myTab").getElementsByTagName("tr");
k=m.length;
while(k--){
m[k].id='tr'+k;
m[k].onmouseover=over;};
 
 };
 
function over(){
var m=["pics/avant48.gif", "pics/chrome48.gif", "pics/firefox48.gif", "pics/ie48.gif"];
document.getElementById("pic").src=m[this.id.replace(/[^0-9]/g, "")];
 
 };
1
MrBrain
10 / 10 / 0
Регистрация: 08.06.2010
Сообщений: 76
24.09.2012, 21:13  [ТС] 4
Я думаю проще в див засунуть и спрятать, а потом скриптом показывать при наведении, добавил картинку в див (1, для проверки), но она почему то не отображается, где ошибка?
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    if(count($row)) {
        foreach($row as $r) {
            $ProductInStocks=ProductInStocks($r['productID']);
            $insert_weight=false;
            $end_result.= "<div id="ex3"><tr style='background:#FFF; cursor:pointer;height:25px;'; onclick='addproduct(".$r['productID'].")'>
                            <td align="center" id="name_'.$r['product_code'].'">'.$r['product_code'].'</td>
                            <td align="left" id="name_'.$r['productID'].'">'.$r['name'].'</td>
                            <td align="center">'.'<font id="price_'.$r['productID'].'">'.$r['Price'].'</font>'.CONF_CURRENCY_ID_RIGHT.'</td>";
            foreach($ListStocks as $key=>$value) if($value["enabled"]===NULL)
            {
                $end_result.='<td align="center" id="stock_'.$value["stockID"].'_'.$r['productID'].'">'.(int)$ProductInStocks[$value["stockID"]];
                if($insert_weight==false){$end_result.='<input type="hidden" id="weight_'.$r['productID'].'" value="'.$r['weight'].'"/>';$insert_weight=true;}
                $end_result.='</td>';
            }   
            $end_result.='<td id="td_sk_'.$r['productID'].'">';
            if(in_array($r['categoryID'],$ARCat))$end_result.='<input type="hidden" id="search_serialkey_'.$r['productID'].'" name="searchproduct['.$r['productID'].'][SerialKey]" value="" />';
            if($_SESSION["access"]==3)
            {
                $end_result.='<td><input type="hidden" id="search_pp_'.$r['productID'].'" value="'.$r['PurchasePrice'].'"/></td>';
            }
            $end_result.='</td></tr><img src="../images/main2/nano3.png"></div>';
}
Добавлено через 6 часов 43 минуты
Собственно вот я сделал, но почему то не работает, может какую-нибудь кавычку не поставил?)
PHP
1
$end_result='<script type="text/javascripy">function funk(id, pic){document.getElementById(id).src="./products_pictures/" + pic;}</script>';
PHP
1
$end_result.= "<tr style='background:#FFF; cursor:pointer;height:25px;' onmouseover='javascript:funk(".$r['productID'].",".$r['thumbnail'].");' onclick='addproduct(".$r['productID'].")'>";
PHP
1
$end_result.='<td><img src="#" alt="" id='.$r['productID'].'></td>';
Добавлено через 4 часа 25 минут
В итоге я решил сделать так (в цикле str меняет значение):
PHP
1
$end_result.= "<tr style='background:#FFF; cursor:pointer;height:25px;' onmouseOver='document.getElementById(".$str.").src=".$pic.";' onclick='addproduct(".$r['productID'].")'>";
PHP
1
$end_result.='<td><img src="#" alt="" id='.$str.'></td>';
Но почему то Мозилла выдает ошибку:
SyntaxError: syntax error
document.getElementById(tr9).src=./products_pictures/-147-S.jpg;
И так по каждой строке, помогите пожалуйста, 2 дня мучаюсь уже!
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.09.2012, 21:13

Эффект вибрации при наведении курсора на картинку
Доброго времени суток!)..На странице есть много небольших фоток (квадратные...

Смена фона сайта при наведении на картинку
Нужно сменить фон сайта при наведении на картинку? Никто не поделится...

Показать/скрыть картинку при нажатии на ссылку
помогите пожалуйста с кодом. Нужно на джаве с или без jquery сделать так чтобы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru