Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2015, 01:14
Интересующийся
Отправить личное сообщение для Sylar V Посмотреть профиль Найти все сообщения от Sylar V
 
Регистрация: 31.03.2015
Сообщений: 27

Случайная смена картинок при повторном наведении
Здравствуйте, дорогие форумчане! Много писали про эту тему, но перерыв весь интернет, решения я так и не нашел (искал хорошо). Есть php код (random.php):

<?php
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>


Есть див товара:

<div class="pic">
   <img src="/images/no_photo.jpg" width="220" height="172">
   <div class="mask"></div>
   <div class="zoom"></div>
</div>


С такими стилями:

Код:
.tovar_box .tovar .pic .mask {    
opacity: 0;
background: url(/images/mask/random.php) no-repeat;
background-color: transparent !important;
-webkit-transform: translate(0,150px);
-moz-transform: translate(0,170px);
-ms-transform: translate(0,170px);
-o-transform: translate(0,170px);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 75px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

.tovar_box .tovar .pic:hover .mask{
top: -50px;
}

.tovar_box .tovar .pic:hover .mask{
opacity: 1;
}
Собственно, нужно, чтобы при наведении на блоки товаров менялись картинки. Написал JS код:

$( document ).ready(function(){
	$('.pic').mouseenter(function(){
		$('.mask', this).css('background-image', 'url("/images/mask/random.php?rand='+Math.random()+'")');
	});
});


Но картинки не меняются, в чем-то косяк. Помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2015, 02:25
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Sylar V,
$folder = '..';
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2015, 04:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Sylar V, картинки на товар секретные?
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2015, 07:35
Интересующийся
Отправить личное сообщение для Sylar V Посмотреть профиль Найти все сообщения от Sylar V
 
Регистрация: 31.03.2015
Сообщений: 27

Не работает, берутся картинки из других папок.
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2015, 07:37
Интересующийся
Отправить личное сообщение для Sylar V Посмотреть профиль Найти все сообщения от Sylar V
 
Регистрация: 31.03.2015
Сообщений: 27

Картинки сами по себе прозрачны, при наведении появляются.
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2015, 08:22
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от Sylar V Посмотреть сообщение
берутся картинки из других папок.
А с каких надо?
Ответить с цитированием
  #7 (permalink)  
Старый 04.12.2015, 09:17
Интересующийся
Отправить личное сообщение для Sylar V Посмотреть профиль Найти все сообщения от Sylar V
 
Регистрация: 31.03.2015
Сообщений: 27

Нужно только из /images/mask/, да и картинка при данном решении опять же остается одна и та же.
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2015, 09:28
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Sylar V, а в исходном коде страницы что написано?
Ответить с цитированием
  #9 (permalink)  
Старый 04.12.2015, 09:43
Интересующийся
Отправить личное сообщение для Sylar V Посмотреть профиль Найти все сообщения от Sylar V
 
Регистрация: 31.03.2015
Сообщений: 27

Rise,
<script type="text/javascript">
	$( document ).ready(function(){
		$('.pic').mouseenter(function(){
			$('.mask', this).css('background-image', 'url("/images/mask/random.php?rand='+Math.random()+'")');
		});
	});
</script>


Косяк в php?
Ответить с цитированием
  #10 (permalink)  
Старый 04.12.2015, 10:25
Интересующийся
Отправить личное сообщение для dyhmzall Посмотреть профиль Найти все сообщения от dyhmzall
 
Регистрация: 02.12.2015
Сообщений: 13

$('.mask', this) что это за второй параметр? Уберите это, напишите $('.mask')
Посмотрите в инспекторе(F12) на вкладке networks, идет ли запрос картинки (/images/mask/random.php?rand='+Math.random()+') из браузера?

Ну и работает ли php, если его из браузера дергать?

Последний раз редактировалось dyhmzall, 04.12.2015 в 10:28.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меню на SVG. Смена цвета при наведении мыши putrsa Элементы интерфейса 3 22.03.2014 11:22
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
Смена картинки при наведении курсора Heidel jQuery 1 06.11.2012 22:03
Смена картинки при перезагрузке + наведении Мария Элементы интерфейса 2 22.08.2009 14:57
Помогите создать скрипт замены картинок при наведении курсора. SantaS Я не знаю javascript 3 05.06.2009 12:59