Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.04.2014, 22:10
Новичок на форуме
Отправить личное сообщение для serbinyo Посмотреть профиль Найти все сообщения от serbinyo
 
Регистрация: 07.04.2014
Сообщений: 6

Сделать рамку вокруг обьекта
Есть три ячейки таблицы. Какой можно придумать простой 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>
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2014, 08:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2014, 12:27
Новичок на форуме
Отправить личное сообщение для serbinyo Посмотреть профиль Найти все сообщения от serbinyo
 
Регистрация: 07.04.2014
Сообщений: 6

Круто
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2014, 13:06
Новичок на форуме
Отправить личное сообщение для serbinyo Посмотреть профиль Найти все сообщения от serbinyo
 
Регистрация: 07.04.2014
Сообщений: 6

А если картинка не бекграунд, а просто в блоке наряду с текстом?
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2014, 13:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от serbinyo
А если картинка не бекграунд, а просто в блоке наряду с текстом?
Тогда придется мудрить с картинкой (делать две в одной), меняя ее top или left... Родительскому элементу, возможно придется, добавить еще свойств...
Но так же решаемо.
Ответить с цитированием
  #6 (permalink)  
Старый 08.04.2014, 16:40
Новичок на форуме
Отправить личное сообщение для serbinyo Посмотреть профиль Найти все сообщения от serbinyo
 
Регистрация: 07.04.2014
Сообщений: 6

Ну да. Спасибо, кстати, за совет делать при помощи 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;
}
Ответить с цитированием
  #7 (permalink)  
Старый 08.04.2014, 18:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
filter(this,this) как правильно сделать? Smip jQuery 5 23.02.2013 03:07
Как сделать что бы при регистрации человека на моем сайте у него не появлялось... drunkwolfs Общие вопросы Javascript 2 07.08.2012 10:58
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
Как сделать обводку вокруг фотографии DeeSoft AJAX и COMET 26 13.04.2011 20:22
Как лучше сделать виджет? comentator Элементы интерфейса 0 25.03.2011 08:44