Geek Answers Handbook

Best way to do rollover images?

I want my main logo to change when the mouse.

I understand that there are several ways to achieve this, and I wondered what is the best way for stability, browser compatibility, efficiency and ease of setup.

I found several ways:

  • Javascript (jQuery) replacing the "src" attribute.
  • CSS using backgrounds and "hover"

More? What's better?

+5
source share
8 answers

Bottom row

For full-featured images you want to have srcHTML markup. You want to use a Javascript solution and put the rollover image in an attribute.

, , , , CSS ( ). CSS , .

Javascript

HTML:

<img src="/img/one.jpg" data-rollover="/img/two.jpg" />

jQuery:

$(function(){
  $('img.rollover').hover(function(){
    var e = $(this);
    e.data('originalSrc', e.attr('src'));
    e.attr('src', e.attr('data-rollover'));
  }, function(){
    var e = $(this);
    e.attr('src', e.data('originalSrc'));
  }); /* a preloader could easily go here too */
});

: http://jsfiddle.net/dtPRM/1/

: ; ; .

: Javascript jQuery.

, . , (, ), ​​ Javascript . , Javascript - , , <noscript>, , .

CSS:

HTML:

<div id="img1" />

CSS

div#img1 {
  height: 400px;
  width: 300px;
  background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
  background-position: top right;}

: http://jsfiddle.net/dtPRM/5/

, , CSS + two background images. HTML .

, , , .

CSS:

CSS, ( CSS, HTML, , ).

<div class="rollover">
  <img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
  <img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>

CSS ( - :not, , , ):

div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}

: http://jsfiddle.net/dtPRM/2/

: CSS .

: .

: , .

: , (1) , IE2 JS.

CSS:

, . .

HTML:

<div id="img1" />

CSS:

div#img1 {
  height: 400px;
  width: 600px;
  background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
  background-image: url('http://dummyimage.com/600x400/fff/000');}

: http://jsfiddle.net/dtPRM/4/

: ; , , - .

: CSS . . , , , , (, ), CSS () , . . .

:. , ( , , ). , CSS.

:. , Javascript - , , Javascript .

: . Javascript, .

+10
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}

, :

alt text

. JS-, , .

, !

.

+4

CSS ""

CSS, , , css :hover, .

CSS , , JavaScript .

- HTTP-.

: http://css-tricks.com/css-sprites/

CSS:

+3

CSS :hover.

0

CSS . javascript.

0

"" - CSS

0

CSS : hover psuedo-class CSS. :

  • JS CSS "" , . , , , .

  • HTTP-, .

  • , JavaScript.

  • It is supported by all types of browsers (in any case, in any case, stateless telephone browsers: hover are not taken into account for this).

Additional information: http://css-tricks.com/css-sprites/

0
source 
$('#div1').hover(function(){
  this.style.color='white';
},function(){
 this.style.color='black;
});

or

$('#div1').onmouseover()...
$('#div1').onmouseout()...
-1
source

More articles:


All Articles