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

@MrBrain · Регистрация: 08.06.2010

Author24 — интернет-сервис помощи студентам

Как можно реализовать показ картинки при наведении на строчку таблицы? Картинка должна быть на одном месте, пример:

@Taatshi · 23.09.2012, 18:38

Поскольку картинка и ссылка являются разными элементами документа, думаю, реализовать такой эффект будет проще с помощью Javascript, посему тему переношу.

@newJS · 23.09.2012, 22:02

по простому можно так

HTML5

<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

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, "")];
 
 };

@MrBrain · 24.09.2012, 21:13 **[ТС]**

Я думаю проще в див засунуть и спрятать, а потом скриптом показывать при наведении, добавил картинку в див (1, для проверки), но она почему то не отображается, где ошибка?

PHP

    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 дня мучаюсь уже!

@MrBrain 10 / 10 / 0 Регистрация: 08.06.2010 Сообщений: 80
		1
	Показать картинку при наведении на строчку таблицы 23.09.2012, 18:15. Показов 2058. Ответов 3 Метки нет (Все метки) Как можно реализовать показ картинки при наведении на строчку таблицы? Картинка должна быть на одном месте, пример: Миниатюры 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	23.09.2012, 18:38	2
	Поскольку картинка и ссылка являются разными элементами документа, думаю, реализовать такой эффект будет проще с помощью Javascript, посему тему переношу. 0

	24.09.2012, 21:13