Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как сделать, чтобы картинка менялась при наведении не на всю картинку, а лишь на часть ее?

Пример: фото человека, если навести курсор на его глаз, картинка меняется (появляются темные очки) и активизируется ссылка, которая ведет на секретную страничку.

Сделал карту фото с помощью плагина Summer-master (выделил глаз), нашел хороший урок, как плавно менять картинку: (второй пример).

Сделал стили в css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.smena { 
    position:relative; 
    display: block;
}
 
.smena img { 
    left: 0; 
    position:absolute; 
    top: 0; 
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
 
}
 
.smena img.ris1 {opacity:0;filter:alpha(opacity=0);}
.smena:hover img.ris1 {opacity:1;filter:alpha(opacity=100);}
.smena:hover img.ris2, .smena img.ris2:hover {opacity:0;filter:alpha(opacity=0);}
Но вот как совместить код ссылки "<a>" c "<area>" все не могу додуматься.

При таком коде:

HTML5
1
2
3
<div align="right">
<a class="smena" href="[[~62]]"><img class="ris1" src="/pic/foto2.jpg" /><img class="ris2" src="/pic/foto1.jpg" /></a>
</div>
меняется фото при наведении на все фото.

А при таком коде:

HTML5
1
2
3
4
<div align="right"><img src="/pic/foto1.jpg" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="109, 80, 115, 77, 121, 77, 127, 80, 131, 83, 122, 83, 116, 84" href="[[~62]]" title="007" />
</map></div>
При наведении на глаз человека на фото курсор меняется на ладошку, т.е. появляется ссылка, ведущая на другую страницу.

Как совместить эти коды? Чтоб при наведении только на глаз менялась картинка и появлялась ссылка?
Ответ: Спасибо, заработало!
На случай, если вдруг кому понадобится, сделал так:
В head написал:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.maphilight.js"></script>
<script type="text/javascript">
$(function() {
        $('.map').maphilight();
var area = document.getElementById('personage'),
  image = document.getElementById('image');
area.addEventListener('mouseover', function(){
  image.src="/pic/ris2.jpg";
});
});
</script>
На странице же код:
HTML5
1
2
3
4
<img id="image" alt="ris1.jpg" src="/pic/ris1.jpg" usemap="#myMap" width="200" height="300" />
<map name="myMap" id="myMap">
        <area href="[[~62]]" id="personage" shape="poly" coords="109, 80, 115, 77, 121, 77, 127, 80, 131, 83, 122, 83, 116, 84" class="" />
</map>
Вопрос: img width:100% - как сделать, чтобы картинку не увеличивало, а только уменьшало?

Есть картинки на странице. Размер неизвестен.

Сейчас стоит:
{width:100%; height:auto}

все отлично, если ширина страницы меньше размера картинки (картинка уменьшается), но когда ширина страницы больше картинки - картинку растягивает, что некрасиво.

Как сделать, чтобы картинку не увеличивало, а только уменьшало?
max-width:***px не поставить, т.к. размер картинок разный (200-570px) и неизвестен до загрузки.
Ответ: hfts_rider, да Вы большой молодец. Огромное спасибо.
Вопрос: Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Задание : Нужно в таблицу поместить картинку , размер ячейки 30*30 к примеру. При наведении на нее , изображение должно увеличиться .
Вот мои попытки !!! К сожалению, неудачные ! Помогите плиз
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
 <head>
    <title>Таблицы</title>
<link rel=stylesheet href=styles.css> 
 </head>
 <body>
 
<table>
<tbody>
<tr>
<td><img src ="images/nol.png" class="nol"></td><td><img src="images/nol.png" class="nol"></td>
 </tr>
<tr>
<td><img src ="images/nol.png" class="nol"></td><td><img src="images/nol.png" class="nol"></td>
</tr>
</tbody>
  </table>
</body>
</html>
и css
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
table {
    width: 50%; /* Ширина таблицы */
   border="0";
    cellpadding="0";
   }
   td,th  {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid #000; /* Параметры рамки */
   }
   th {
    background: #afd792; /* Цвет фона */
    color: #333;  /* Цвет текста */
   }
   
 
img.nol {
    background: url(images/nol.png); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width:196px; /* Ширина рисунка */
    height: 183px; /*  Высота рисунка */
   }
   img.nol:hover  {
    background: url(images/nol2.png); /* Путь к файлу с заменяемым рисунком  */
   }
Ответ:
Код CSS
1
2
3
 td,th  {
    padding: 3px; /* Поля вокруг содержимого таблицы */
}
У вас паддинг в td.
Вопрос: Как сделать, чтобы размеры картинки-фона оставались в браузере постоянными?

Доброго времени суток!
Помещаю фото, как фон свойством background-image. Если уменьшать изображение в браузере, можно увидеть как оно повторяется, по вертикали/горизонтали. Можно задать background-repeat:no-repeat, но изображение будет уменьшаться.
Как можно сделать, чтобы картинка на фоне всё время оставалась постоянного размера и не двигалась.
Я прописал строку ниже, но это не помогает. Что можно сделать?

CSS
1
body{background-image: url("myfolder/P395.JPG");background-repeat:no-repeat;background-attachment:fixed;}
Ответ: Как можно масштабировать изображение, чтобы оно в окно браузера влезало целиком. Я пробую делать фотографии фоном, и небольшую часть фотографии в браузере отсекает.
Вопрос: Как сделать сортировку картинок?

Как сделать сортировку картинок, чтобы при нажатии на кнопки-фильтры("красные","синие") появлялись нужные картинки?
Ответ:
Сообщение от IraIraIra
Как сделать сортировку картинок, чтобы при нажатии на кнопки-фильтры("красные","синие") появлялись нужные картинки?
С помощью разнообразных функций, методов и свойств объектов великолепного JS
Если что не получается, выкладывайте код, поможем.
Вопрос: Select: как сделать, чтобы выпадающий список находился в родительском контейнере?


HTML5
1
2
3
4
<div>
Hello World
    <p><select  id="hello" name="dsfdsf"><option value="sdfdsf">sdfsdf</option><option value="sdfsdf">sdfdf</option><option value="sdfsdfsdf">sdfsdf</option><option value="ewrewrwe">dfserwfe</option></select></p>
</div>
CSS
1
2
3
4
5
6
div {
    border:1px solid #000000;
    height:60px;
    width:100%;
    overflow: auto;
}
Когда жмем на селект, выпадающий список вылазит поверх родительского блока, как сделать чтобы он находился внутри и при скролле родительского можно было его просматривать ?
Ответ:
Сообщение от Wizlight
как сделать чтобы он находился внутри и при скролле родительского можно было его просматривать ?
Никак. Селект - это системный элемент браузера и на его поведение влиять нельзя. Но если сильно хочется - можно подменить оригинальный селект кастомным построенным на обычных элементах(div, span)
Вопрос: как сделать чтобы скрипт не спотыкался если какой то элемент не находит на странице?

как сделать чтобы скрипт не спотыкался если какой то элемент не находит на странице?
(function foo(i, n, max) {
     var t = setInterval(function() {
        ++i;
document.getElementsByClassName('_si7dy')[i].click();
setTimeout (function q () {document.getElementsByClassName('_8scx2 coreSpriteHeartOpen')[0].click();
setTimeout (function w ()
            {document.getElementsByClassName('_qv64e _gexxb _4tgw8 _njrw0')[0].click();
setTimeout (function e ()
            {document.getElementsByClassName('_dcj9f')[0].click();
        if (max == i) {
          clearInterval(t);
          return;
        }
        if (i % n === 0) {
          clearInterval(t);
          setTimeout(function() {
             foo(i, n, max);

          }, 30000);
        }
     }, 2000);
},2000);
},2000);
},2000);
   })(0, 5, 100);
Ответ:
Сообщение от денис77447327
как сделать чтобы скрипт не спотыкался если какой то элемент не находит на странице?
Это строка 4 вашего кода.
var els=document.getElementsByClassName('_si7dy');
if(i in els) els[i].click();
else console.error('Element not found (index: '+i+')');
Вопрос: Как сделать чтобы изображения на сайте в новостях отображались одинакового размера в ленте

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


И еще плагин чтобы при нажатии на картинку оно открывалось в окне в увеличенном виде
ВЕРСИЯ JOOMLA 2.5.8
Ответ: Вариант 1. Вручную изменяйте размер картинок ДО загрузки на сайт и вставки в статью.
Вариант 2. В коде статьи укажите нужный размер для картинки: <img src="http://www.cyberforum.ru/joomla/..." width="200" height="150" />
Вариант 3. Поставьте какую-нибудь галерею изображений, грузите картинки для новостей в неё, а из неё вставляйте в статьи. Галерея будет приводить Ваши картинки к должному виду. Я рекомендую JoomGallery. Куча настроек, но если сделаешь под себя один раз - не подведёт. И даст просмотр в Slimbox, как Вы хотите. Но в этом случае не факт, что при репосте Вашу картинку подхватит фейсбук или твиттер.

Писать текст на картинках лучше не надо. Текст не индексируется; если картинка масштабируется, то текст становится не читабельным.
Вопрос: Как сделать фоновую картинку вместо белой страницы?

Всем добрых суток!
Задался вопросом,как сделать фоновую картинку вместо белой страницы?На скрине обвел ту область в которой должна быть вставлена фоновая произвольная картинка(вместо белой области)
Ответ: Вобщем, возвращаем всё обратно:

Код CSS
1
2
3
#content-right {
float:right;
}
Там всё не так просто... Есть второй css-файл - responsive.css, собственно и ответственный за отображение сайта, его блоков, на экранах различного размера. То есть, чтобы убрать эту полосу, надо просто "попеременять" кучу стилей для разных блоков. Я всё смотреть не стал.

Белая полоса образуется от того, что левый блок (меню, лого и прочее - левый сайдбар) имеет ширину примерно 31%, а правый блок - примерно 65%, итого примерно 96%, что явно не 100% )) И эти 2 блока прижаты в разные стороныю. То есть, между ними и видим оставшиеся 4% - полосу.

Поэтому, чтобы не курочить кучу CSS-кода, предлагаю залить нужным Вам фоном весь основной блок, в котором находится и блок меню (левый) и блок контента (правый). В силу того, что левый блок, сайдбар, залит цветом, а правый блок и та самая тонкая полоса не залиты - нужный Вам фон и будет виден на этой площади.

Поэтому тут возвращаем всё обратно:

А в файле responsive.css ищем класс .row-fluid и четыре (4) раза, в четырех местах (а именно столько раз класс упоминается, для разных экранов устройств!) меняем этот код:
Код CSS
1
2
3
4
.row-fluid {
   width: 100%;
   *zoom: 1;
}
на вот такой код, добавляя туда фон, элементарно:
Код CSS
1
2
3
4
5
6
.row-fluid {
   width: 100%;
   *zoom: 1;
   background: url('images/fon.jpg') repeat;
   background-size: 100%;
}

... И не забудьте убрать фон у правого блока, что писал в начале. Дублирую прежний вид:

Код CSS
1
2
3
#content-right {
float:right;
}
Ну а более сложным способом является переделка всего этого .css документа под новую ширины блоков - так, чтобы сумма ширин левого и правого блока была равна 100% а не 96%. Но это сизифов труд, практически ))

Причем блоков там гораздо больше - для комментариев, цитат и т.п., и по идее все эти другие блоки надо приводить в соответствующий размер, раз меняем размер 2 основных. Но это я не смотрел, естесственно.
Вопрос: Как сделать чтобы рядом с width:auto блоком, в одной строке находился другой

В общем, проблема в том, что я тупой (и не только), не могу понять как сделать чтобы в 1 строке располагалась ссылка с шириной Auto, и в той же строке был блок div, содержащий как бы кнопки управления. И чтобы при изменении размеров браузера и др. они всегда были на 1 строке.

Я прикреплю картинку как необходимо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="col-md-5">
 <li class="articleCategory">Основы</li>
 <li>
  <a class="admin" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
  <div style="float:right">
   <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
   <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
   <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
  </div>
  <div class="articleSummary">
   sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
  </div>
 </li>
 <li>
  <a class="glyphicon glyphicon-plus" href="/Manage/AddArticle" style="color:#3c763d;float:right;"></a>
 </li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
.articles > ul > li > a.admin {
    border:1px solid black;
    display:inline-block;
}
ul > li > .articleSummary {
    text-align:justify;
    word-wrap: break-word;
    padding-top:3px;
    padding-bottom:15px;
    color:#515862;
}
Буду очень благодарен за вашу помощь!
Ответ:
Сообщение от gen1usqq
Скажите плиз напоследок, почему моя вёрстка настолько убога?
Смотря с чем сравнивать... Если отбросить использование бутстрапа, то проще для всех элементов в li сделать обёртку:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
    </ul>
</body>
</html>
Так проще управлять содержимым в теге li, а соответственно и блоками с информацией и вьювером... Классам лучше давать имена строчными буквами, меньше вероятности сделать ошибку при определении стилей... Ну и текст лучше использовать тот, который будет использоваться при вёрстке макета, а не случайные наборы букв...