Случайная смена картинок при повторном наведении

L

Lucard

Постоялец
Регистрация
8 Фев 2015
Сообщения
35
Реакции
16
Здравствуйте, дорогие форумчане! Много писали про эту тему, но перерыв весь интернет, решения я так и не нашел (искал хорошо). Есть блок со стилями:

Код: 
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;

И, собственно PHP код random.php, который меняет картинку при обновлении страницы.

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);
}
}
?>

Как сделать, чтобы картинка менялась при повторном наведении на блок, а не обновлении страницы. Заранее спасибо!
 
HTML: 
<img onmouseover="$(this).css('background-image', '/images/mask/random.php?rand='+Math.random())" />

Для того что-бы менялась не с первого наведения, а со второго:

HTML: 
<img onmouseover="if($(this).attr('data-focused')=='yes') $(this).css('background-image', '/images/mask/random.php?rand='+Math.random()) else $(this).attr('data-focused', 'yes')" />
 
Последнее редактирование:
Q_BASIC написал(а):
HTML: 
<img onfocus="$(this).css('background-image', '/images/mask/random.php?rand='+Math.random())" />

Для того что-бы менялась не с первого наведения, а со второго:

HTML: 
<img onfocus="if($(this).attr('data-focused')=='yes') $(this).css('background-image', '/images/mask/random.php?rand='+Math.random()) else $(this).attr('data-focused', 'yes')" />
Нажмите для раскрытия...

Этот код вставить вместо блока или в head? Просто, если вместо блока, то данное решение не подойдет, есть див-маска, при наведении на один блок появляется одна картинка, при наведении на другой - рандомная.

Я с таким просто еще не встречался.
 
Последнее редактирование:
Lucard IV написал(а):
Этот код вставить вместо блока или в head? Просто, если вместо блока, то данное решение не подойдет, есть див-маска, при наведении на один блок появляется одна картинка, при наведении на другой - рандомная.

Я с таким просто еще не встречался.
Нажмите для раскрытия...
Скажите HTML код, с элементом, на который надо наводить курсор и что должно меняться
 
Q_BASIC написал(а):
Скажите HTML код, с элементом, на который надо наводить курсор и что должно меняться
Нажмите для раскрытия...

Есть див с картинкой товара:

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

В нем есть див-маска (.mask), которая появляется при наведении на товар, вот именно background этой маски должен меняться на разных товарах.

Код: 
.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;
}
 
Lucard IV написал(а):
Есть див с картинкой товара:

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

В нем есть див-маска (.mask), которая появляется при наведении на товар, вот именно background этой маски должен меняться на разных товарах.

Код: 
.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;
}
Нажмите для раскрытия...

На jQuery:
HTML: 
<script type="text/javascript">
$('.pick').mousemove(function(){
    $('.mask', this).css('background-image', '/images/mask/random.php'+Math.random());
});
</script>

Вставлять в любое место, но после подключения jQuery.

И в прошлом посте надо не onfocus, а onmouseover
 
Q_BASIC написал(а):
На jQuery:
HTML: 
<script type="text/javascript">
$('.pick').mousemove(function(){
    $('.mask', this).css('background-image', '/images/mask/random.php'+Math.random());
});
</script>

Вставлять в любое место, но после подключения jQuery.

И в прошлом посте надо не onfocus, а onmouseover
Нажмите для раскрытия...

Поправил .pick на .pic, вставил после подключения библиотеки, но беда, меняется только при обновлении страницы, при наведении ничего не меняется.
 
Lucard IV написал(а):
Поправил .pick на .pic, вставил после подключения библиотеки, но беда, меняется только при обновлении страницы, при наведении ничего не меняется.
Нажмите для раскрытия...
Можно адрес страницы?
 
простой вариантик смены картинок при наведении мышкой:

<a href="1.htm" onmouseover="document.se1.src='/images/se2.jpg';" onmouseout="document.se1.src='/images/se1.jpg';">
<img src="/images/se1.jpg" name="se1">
</a>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху