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

Тема в разделе "Как сделать...", создана пользователем Lucard, 3 дек 2015.

  1. Lucard

    Lucard Создатель

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

    Код:
    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( 
    $extListstrtolower$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( 
    $extListstrtolower$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 (100100)
    or die (
    "Cannot initialize new GD image stream");
    $background_color imagecolorallocate ($im255255255);
    $text_color imagecolorallocate ($im0,0,0);
    imagestring ($im255"IMAGE ERROR"$text_color);
    imagepng ($im);
    imagedestroy($im);
    }
    }
    ?>
    Как сделать, чтобы картинка менялась при повторном наведении на блок, а не обновлении страницы. Заранее спасибо!
     
  2. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    385
    Симпатии:
    254
    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')" />
     
    Последнее редактирование: 3 дек 2015
    Lucard нравится это.
  3. Lucard

    Lucard Создатель

    Регистр.:
    8 фев 2015
    Сообщения:
    34
    Симпатии:
    14
    Этот код вставить вместо блока или в head? Просто, если вместо блока, то данное решение не подойдет, есть див-маска, при наведении на один блок появляется одна картинка, при наведении на другой - рандомная.

    Я с таким просто еще не встречался.
     
    Последнее редактирование: 3 дек 2015
  4. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    385
    Симпатии:
    254
    Скажите HTML код, с элементом, на который надо наводить курсор и что должно меняться
     
  5. Lucard

    Lucard Создатель

    Регистр.:
    8 фев 2015
    Сообщения:
    34
    Симпатии:
    14
    Есть див с картинкой товара:

    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;
    }
     
  6. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    385
    Симпатии:
    254
    На jQuery:
    HTML:
    <script type="text/javascript">
    $('.pick').mousemove(function(){
        $('.mask', this).css('background-image', '/images/mask/random.php'+Math.random());
    });
    </script>
    Вставлять в любое место, но после подключения jQuery.

    И в прошлом посте надо не onfocus, а onmouseover
     
    Lucard нравится это.
  7. Lucard

    Lucard Создатель

    Регистр.:
    8 фев 2015
    Сообщения:
    34
    Симпатии:
    14
    Поправил .pick на .pic, вставил после подключения библиотеки, но беда, меняется только при обновлении страницы, при наведении ничего не меняется.
     
  8. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    385
    Симпатии:
    254
    Можно адрес страницы?
     
  9. Lucard

    Lucard Создатель

    Регистр.:
    8 фев 2015
    Сообщения:
    34
    Симпатии:
    14
    Отправил в ЛС.
     
  10. Eugeny1985

    Eugeny1985 Создатель

    Регистр.:
    5 фев 2015
    Сообщения:
    11
    Симпатии:
    2
    простой вариантик смены картинок при наведении мышкой:

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