About design and nearby

The Image Rollover Effect (Using CSS) – Just Another Way

Posted: March 30th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

The image rollover effect is an effect when one image replaces another as your mouse moves over, I’ve wrote about it before. This example is just a special case. There are no any images, you can find the image when hover your mouse on the link (button).

Here is the HTML used to create this rollover. It’s much shorter and easier to remember than a JavaScript rollover:

  1. <div  id="menu">
  2.    <ul>
  3.      <li><a class="home" href="#">Home<div>&пbsp;</div></a></li>
  4.    </ul>
  5. </div>

And the Stylesheet:

  1. #menu ul li div {
  2. display: none; /* there is no image at the beginning, it's hiding for browsers */
  3. position:absolute;  
  4. }
  5. #menu ul li .home div {    
  6. width: 28px;    
  7. height: 28px;    
  8. background: url(images/home.gif) no-repeat; /* my image */
  9. margin-left:5px; /* moving right */
  10. margin-top:-35px; /* moving top */
  11. }
  12. #menu ul li a:hover div{ display: block;} /* means that the element is displayed as a block – to show the link as an image (you have to define height and width) */

This will create one rollover image per a link (button).

Live example: check the example >>

Share Button

The Rollover Effect with CSS

Posted: March 15th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

The image rollover effect is a widespread effect (when one image replaces another as your mouse moves over), you usually see it on many web pages. I prefer to use rollover effect (with CSS) for navigation buttons.

You need only 2 images (“image1.jpg” and “image2.jpg”) and some skills ;) to do the same this way.

I create a class “rollover”:

  1. a.rollover {
  2.  background: url('images/image1.jpg');
  3.  display: block;
  4.  width: 36px;
  5.  height: 128px;
  6.  }

And “:hover”. See, the image2 replaces the image1- when you move your mouse over:

  1. a.rollover:hover {
  2.  background: url('images/image2.jpg');
  3.  }

And my HTML-code:

  1. <div>
  2.          <a class="rollover" href="page.html"></a>
  3. </div>

Usually I use rollover effect with preload images.

Live example: click here>>

Share Button

Preload Images with CSS

Posted: March 14th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

When I have been working at one web site, I’ve got a trouble: some images (buttons) were loading too slow. I find that I have to speed up page display and deside to fix this using CSS – yes, you don’t need to paste JavaScript to preload your images.

First I create a class with display set ‘none’ at the ‘head’ section (or sure! you can place this class at stylesheet.css):

  1. .hiddenPic {display:none;}

And the ‘body’ section:
My buttons (menu):

  1. <div><a href="about.html"><img src="images/image1.jpg" /></a></div>
  2. <div><a href="gallery.html"><img src="images/image2.jpg" /></a></div>
  3. <div><a href="publication.html"><img src="images/image3.jpg" /></a></div>
  4. <div><a href="events.html"><img src="images/image4.jpg" /></a></div>
  5. <div><a href="contact.html"><img src="images/image5.jpg" /></a></div>

I add image tags for my pictures to the bottom of the home page (to the bottom of the page – before </body> – to display as soon as possible, prior to the browser starts to open the next page; then you can reference to the images anywhere and the images will load from browser cache memory):

  1. <img src="images/image1.jpg" height="128" width="36" class="hiddenPic">
  2. <img src="images/image2.jpg" height="128" width="36" class="hiddenPic">
  3. <img src="images/image3.jpg" height="128" width="36" class="hiddenPic">
  4. <img src="images/image4.jpg" height="128" width="36" class="hiddenPic">
  5. <img src="images/image5.jpg" height="128" width="36" class="hiddenPic">

(Note: the height and width attributes can help a little with speed, so I use them).
And it’s working!

Share Button

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now