Javascript-форум - Сделать рамку вокруг обьекта

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Сделать рамку вокруг обьекта (https://javascript.ru/forum/jquery/46378-sdelat-ramku-vokrug-obekta.html)

Сделать рамку вокруг обьекта

Есть три ячейки таблицы. Какой можно придумать простой 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>

Цитата:

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

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

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

<!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

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

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

Ну да. Спасибо, кстати, за совет делать при помощи 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;

}

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