Форум

serbinyo · #1 (**permalink**) 07.04.2014, 22:10

Есть три ячейки таблицы. Какой можно придумать простой JavaScript что бы при наведении мышкой в ячейке появлялась рамка вокруг блока див и менялось изображение?

<td style="width: 33%;">
            <div style="width:100%; height:100%;">
            <img src="img/media/1.jpg" width="140" height="100" alt="Тайны мировой архитектуры">
            <h3><a href="#">Тайны мировой<br/> архитектуры</a></h3><br/>
            <p>В 2007 году вышел цикл<br/>
            документальных передач <br/>
			из 8 серий «Тайны мировой<br/> 
			архитектуры» (производство<br/> 
            кинокомпания «Мастерская»),<br/> 
			где Нана Эрнандес Геташвили<br/>
            выступила в роли<br/>
			автора проекта</p>
            </div>
            </td>
            
                    
            <td style="width: 33%;">
            <div style="width:100%; height:100%;">
            <img src="img/media/2.jpg" width="140" height="100" alt="Тайны любви">
            <h3><a href="#">Тайны любви</a></h3><br/>
            <p>В 2009 году вышел фильм <br/>
            «Тайны любви» (производство<br/>
            кинокомпания «Мастерская»<br/> 
            по заказу Первого канала.<br/>
            Продюсерами выступили Андрей<br/>
            Клишас, Нана Эрнандес <br/>
            Геташвили и Саида Медведева.</p>
            </div>
            </td>
            
            
            <td style="width: 33%;">
            <div style="width:100%; height:100%;">
            <img src="img/media/3.jpg" width="140" height="100" alt="Тайны смерти">
            <h3><a href="#">Тайны смерти</a></h3><br/>
            <p>Фильм «Тайны смерти» о том,<br/>
            почему мы должны так высоко <br/>
            ценить каждое мгновение жизни,<br/> 
			и, главное, верить в Любовь.</p>
            </div>
            </td>

ksa · #2 (**permalink**) 08.04.2014, 08:35

Сообщение от serbinyo

Какой можно придумать простой JavaScript что бы при наведении мышкой в ячейке появлялась рамка вокруг блока див и менялось изображение?

Для такого кагбэ и скрипт не нужен...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
td > div {
	width: 30px;
	height: 30px;
	background: url('http://javascript.ru/forum/images/smilies/smile.gif') center center no-repeat;
}
td:hover > div {
	border: 1px solid;
	background-image: url('http://javascript.ru/forum/images/smilies/laugh.gif');
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table>
	<td>
		<div></div>
	</td>
</table>
</body>
</html>

serbinyo · #3 (**permalink**) 08.04.2014, 12:27

Круто

serbinyo · #4 (**permalink**) 08.04.2014, 13:06

А если картинка не бекграунд, а просто в блоке наряду с текстом?

ksa · #5 (**permalink**) 08.04.2014, 13:39

Сообщение от serbinyo

А если картинка не бекграунд, а просто в блоке наряду с текстом?

Тогда придется мудрить с картинкой (делать две в одной), меняя ее top или left... Родительскому элементу, возможно придется, добавить еще свойств...
Но так же решаемо.

serbinyo · #6 (**permalink**) 08.04.2014, 16:40

Ну да. Спасибо, кстати, за совет делать при помощи CSS
получилось так

<td style="width: 33%;">
            <div style="width:100%; height:100%;">
            <div class="mediaimage2" style="border:unset;" ></div>    
            
            <h3><a href="#">Тайны любви</a></h3><br/>
            <p>В 2009 году вышел фильм <br/>
            «Тайны любви» (производство<br/>
            кинокомпания «Мастерская»<br/> 
            по заказу Первого канала.<br/>
            Продюсерами выступили Андрей<br/>
            Клишас, Нана Эрнандес <br/>
            Геташвили и Саида Медведева.</p>
            </div>  
</td>

Код:

td div{
	padding: 10px 0 10px 10px;
}
td:hover div{
	border: 1px solid #cccc99;	
}
.mediaimage2{
	border: unsert;
	width:140px;
	height:100px; 
	background:url('img/media/2.jpg') center center no-repeat;
}
.mediaimage2:hover{
	border: unsert;
	width:140px;
	height:100px; 
	background:url('img/media/22.jpg') center center no-repeat;
}

danik.js · #7 (**permalink**) 08.04.2014, 18:55

css-фоном нужно ставить картинки оформления. Изображения же, которые являются частью контента - должны быть вставлены через <img> - данный тег для этого и создан же)

Форум

Справочник

Discord чат

Курсы javascript