Weborum Webmaster Forum > The single image rollover.
Help - Search - Members - Calendar
Full Version: The single image rollover.
Weborum Webmaster Forum > TUTORIAL ARCHIVE - tutorials & scripts to save you scouring the internet. Please feel free to add your own. > CSS tutorials
coothead
Jul 21 2005, 01:47 PM
For a really smooth rollover the use of a single image is perfection.

It is possible to make the single image required for the rollover using nothing more complicated than 'irfanview' and 'MS Paint'.

get irfanview for free here. specool.gif

We start with this image -apple.jpg - which measures 360px by 280px.

Open the the image in ifanview.
  1. click the 'image' tab.
  2. click 'convert to greyscale'.
  3. click the 'file' tab.
  4. click 'save as'.
  5. in the 'dialog box' - enter 'File name' - (say)....apple1.
  6. set the 'Save as type' to...JPEG.
This produces our second image - apple1.jpg.


Now open 'NotePad'.
  1. use this code....<img src="apple.jpg"><img src="apple1.jpg">...making sure the two images are on one line.
  2. save as (say)....two_images.html
Now click on two_images.html and you should see this page...two_images.html


Press 'Print Screen' on the keyboard and open up 'Paint'
  1. click the 'Edit' tab.
  2. click 'Paste'.
  3. this will load the page containing the 'raw' double image.
  4. click the 'select' button on the tool bar - looks like a dotted rectangle.
  5. set the 'cross hair' at the top left hand corner of the image.
  6. with left mouse down drag to the bottom right hand corner and release mouse.
  7. click the 'Edit' tab.
  8. click 'Copy'.
  9. click the 'File' tab.
  10. click 'New'.
  11. in the 'dialog box' - 'Save changes to untitled' - click 'No'.
  12. click the 'Edit' tab.
  13. click 'Paste'.
  14. you will now have the finished image.
  15. click the 'File' tab.
  16. click 'Save As'.
  17. in the 'dialog box' - enter 'File name' - (say).... two_apples.
  18. set the 'Save as type' to...JPEG.
  19. set the location directory in the 'Save in' box.
  20. click 'Save'.
  21. close 'Paint'.

Notice that 'Paint' saves as .JPG rather than .jpg.

We now have the final rollover image - two_apples.JPG - which measures 720px by 280px.

Well, that's the hard work done, now onto the simple task.... the code.
The image will be set as a background of an anchor element, the rollover being achieved by shifting the image half its width to the right. Now isn't that easy. smile.gif

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>single image rollover</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
#container {
    width:360px;
    border:6px double #000;
    margin:174px auto;
}
#container a {
    display:block;
    width:360px;   /*this value is half the image width*/
    height:280px;
    background-image:url(two_apples.JPG);
    background-position:360px 0px;  /* the grey apple starts at 360px*/
}
#container a:hover {
    background-position:0px 0px;   /* the green apple starts at 0px*/
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
//]]>
</script>

</head>
<body>

<div id="container">
<a href="#"></a>
</div>

</body>
</html>


Save this as - (say)....single_image_rollover.html.

All that is left is, to check out the finished rollover here .


Waleed
Jul 21 2005, 03:14 PM
this is a nice trick. good one coot
Joe
Jul 21 2005, 04:21 PM
This is a very good trick, it saves on waiting for the rollover image to loax up smile.gif

Good tutorial Coot.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.