Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 10, средняя оценка - 4.60
MrBrain
10 / 10 / 0
Регистрация: 08.06.2010
Сообщений: 73
#1

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

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

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

Показать сообщение при наведении на картинку - JavaScript
Это я думаю вообще легкое задание для многих,но я никак не могу понять как надо действовать чтобы выполнить эти задания! Прошу помогите)) ...

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

При наведении на картинку текст - JavaScript
доброго времени друзья! возникла чрезвучайная необходимость внедрить.. скрипт..)) может у кого есть уже готовое решение, эффект у него...

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

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

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

3
Taatshi
Администратор
11488 / 4957 / 253
Регистрация: 05.04.2011
Сообщений: 13,593
Записей в блоге: 2
23.09.2012, 18:38 #2
Поскольку картинка и ссылка являются разными элементами документа, думаю, реализовать такой эффект будет проще с помощью Javascript, посему тему переношу.
0
newJS
2391 / 1064 / 98
Регистрация: 23.06.2011
Сообщений: 3,323
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
Сообщений: 73
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
24.09.2012, 21:13
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.09.2012, 21:13
Привет! Вот еще темы с ответами:

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

Показать блок div при нажатии на картинку - JavaScript
Показать блок div при нажатии на картинку.Блок должен появляться по центру. Заранее спасибо)

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

При наведении мышкой на название ягоды из списка ягод показать ее описание в текстовом поле - JavaScript
Написать сценарий, в котором при наведении мышкой на название ягоды из списка ягод будет появляться ее описание в текстовом поле. (Здесь...


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

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

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