CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

10

Простой CSS ролловер

Jemand 16433
CSS

1. CSS

#rollover a {
    display: block;
    width: 200px; /* Ширина блока ролловера, соответствует ширине картинки разделенной на три */
    height: 100px;  /* Высота блока ролловера, соответствует высоте картинки */
    background: url("rollover.png") 0 0 no-repeat; /* Путь до картинки ролловера */
}
#rollover a:hover {
    background-position: -200px 0; /* При наведении курсора на картинку, она смещается на один блок влево, в данном случае на 200 пикселей */
}
#rollover a:active {
    background-position: -400px 0;  /* При клике по изображение, она смещается на два блока влево, в данном случае на 400 пикселей */
}

2. HTML

<div id="rollover">
	<a href="http://jemand.ru"></a>
</div>

Демо

Рекламная пауза

» 10 комментариев

  1. У меня на одной странице два разных ролловера, а как сделать так, чтобы первый выполнял первую функцию, а второй – вторую?

    • Для каждого ролловера нужно написать свой CSS и задать им разные id.
      Т.е. примерно так

      #rollover_one a {
          display: block;
          width: 200px;
          height: 100px;
          background: #ff0 url("rollover.png") 0 0 no-repeat;
      }
      #rollover_one a:hover {
          background-position: -200px 0;
          background: #ccc;
      }
      #rollover_one a:active {
          background-position: -400px 0;
          background: #000;
      }
      #rollover_two a {
          display: block;
          width: 200px;
          height: 100px;
          background: #f00 url("rollover.png") 0 0 no-repeat;
      }
      #rollover_two a:hover {
          background-position: -200px 0;
          background: #000;
      }
      #rollover_two a:active {
          background-position: -400px 0;
          background: #fff;
      }
      
      <div id="rollover_one">
      	<a href="http://jemand.ru"></a>
      </div>
      <div id="rollover_two">
      	<a href="http://jemand.ru"></a>
      </div>
      

      А лучше используйте class вместо id

  2. О! спасибо

  3. просто и доступно.
    спасибо)

  4. А возможно ли осуществить вот такую задумку:
    под первой картинкой спрятать пару пунктов меню (т.е. при наведении на картинку она исчезает, а заместо нее остаются пункты меню)
    Если возможно такое подскажите, как осуществить?? пару дней головой об стену бьюсь, один фиг не чего не получается.

  5. Вот пример, дальше развивайте сами.

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title></title>
    <style>
    * {padding: 0; margin: 0;}
    .content {
    	top: 0;
    	left: 0;
    	width: 200px;
    	height: 200px;
    	position: absolute;
    	display: none;
    	background: #fff;
    	}
    img:hover~.content {
    	display: block;
    	}
    </style>
    </head>
    <body>
    <img src="http://www.avatar-mix.ru/avatars_200x200/150.jpg" alt="">
    <div class="content">
    	<a href="http://jemand.ru">Jemand.ru</a> <br>
    	<a href="http://web-forum.ws">Web-Forum.ws</a>
    </div>
    </body>
    </html>
    
    
  6. Отличный урок! Огромное спасибо!


Оставить комментарий