SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: IMAGE rollovers

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IMAGE rollovers

    hey
    i want to add rollovers to this tempalte, but it's 2 images, so i don' think i can do on hover, backgroun-image: url('blabla.gif'); because there is no text, just 2 images
    who can help me ?
    thanks

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sanzo

    who can help me ?
    I can.

    I'm going to demonstrate how to get a hovering background image to work using HTML and CSS. After that, I am going to show you how to do the same thing, but using a simple blank <div> container (with nothing in it). The second demonstration I think will simulate your particular dilemma perfectly. I am also going to upload the images inside a .zip file so you can follow along .

    The Demonstration
    For the purpose of this demonstration, let's assume you have a list of links that show off your excellent coding skills, shall we?
    HTML Code:
                         <ul>
                          	<li><a href="http://validator.w3.org" id="xhtml"><span>Valid XHTML 1.0 Transitional</span></a></li>
                          	<li><a href="http://jigsaw.w3.org/css-validator/" id="css"><span>Valid CSS 2.1</span></a></li>
                          	<li><a href="http://www.php.net" id="php"><span>powered by PHP</span></a></li>
                          </ul>
    And the CSS:
    Code:
                         ul {
                          	background-color: #FFF;
                          	color: inherit;
                          	list-style: none;
                          	margin: 0;
                          	padding: 0;
                          	width: 54px;
                          }
                           
                           #xhtml span, #css span, #php span {
                           	display: none;
                           }
                          
                          #xhtml {
                          	background-image: url(/images/w3c_xhtml_off.gif);
                          	display: block;
                          	height: 20px;
                          	width: 54px;
                          }
                          
                          #css {
                          	background-image: url(/images/w3c_css_off.gif);
                          	display: block;
                          	height: 20px;
                          	width: 54px;
                          }
                          
                          #php {
                          	background-image: url(/images/php_off.gif);
                          	display: block;
                          	height: 20px;
                          	width: 51px;
                          }
                          
                          #xhtml:hover {
                          	background-image: url(/images/w3c_xhtml.gif);
                          }
                          
                          #css:hover {
                          	background-image: url(/images/w3c_css.gif);
                          }
                          
                          #php:hover {
                          	background-image: url(/images/php.gif);
                          }
    The HTML code is simple. You assign a unique ID to each <a> tag (the <span> tags are here since there is text--you want the text to disappear so the images work).

    It's the CSS where things start to get complicated. I started by styling the container that is holding the links to the validators and www.php.net

    I gave the list a background color (same bg color as the images in this example) since one of the images was smaller than the other two, and then told it to use whatever the default color is (that's "inherit" at work--it takes the color assigned to the elements parent container and uses it for itself), removed the margins and padding (to prevent extra space from appearing for the bullets), removed the list bullets (that's "list-style: none" at work), and finally, since <ul> is a block-level element, I assigned it a width (the width of the two larger images). You probably won't have to worry about this with your template. I only did it here to make my example work.

    Now we need to get rid of the text.
    Code:
                         #xhtml span, #css span, #php span {
                           	display: none;
                           }
    This does it very nicely. Any link with an ID of xhtml, css, or php that contains a <span> element will now be hidden. I could have used a span instead, but I wanted to target three particular ones, and this was the best way to do it (no need to create additional classes, just use the markup at hand and let CSS handle the specificity).

    From there, I went ahead and assigned the styles to the three IDs I had declared in the links earlier on. The ID had to go in the link since Internet Explorer doesn't understand :hover on anything other than a link. (there are workarounds for this, which I will get around to in a bit).
    Code:
                           #xhtml {
                           	background-image: url(/images/w3c_xhtml_off.gif);
                          	display: block;
                          	height: 20px;
                          	width: 54px;
                          }
    Using the #xhtml Id as an example, you can see I declared a background image for the ID. This will give the entire link a background image. Since links are inline elements, I then told CSS to make it a block-level element. I don't want the image to tile, and since the link will be a certain size anyway, I decided not to use background-position and background-repeat. I just assigned a height and width instead. These values are the height and width of the image itself, respectively.

    Lather, rinse and repeat with the other two links, and you should have three links with background images if you did everything right (hope you put the images inside an "images" folder that's just inside of your root directory for this one--if not, just replace the path to the images so they match the location of your images)

    Rather bland, huh? Where's the rollover, you ask? Right here.
    Code:
                           #xhtml:hover {
                           	background-image: url(/images/w3c_xhtml.gif);
                          }
                          
                          #css:hover {
                          	background-image: url(/images/w3c_css.gif);
                          }
                          
                          #php:hover {
                          	background-image: url(/images/php.gif);
                          }
    Declare your ID, then add :hover to it, and then give it a new background image. Instant image swap!

    Your Particular Situation
    Now, I know you said you don't have text in your particular case. Now that you know how to get images to swap using :hover with CSS, I'm going to show you how to do the same thing without using links.
    HTML Code:
                       <div id="hoverBackground">&nbsp;</div>
    This <div> tag has NOTHING in it. No text, just a non-breaking space and a unique ID so I can reference it in my stylesheet.
    I'm going to use the same XHTML image set I used in the previous example.

    First, I'm going to give the <div> a background image:
    Code:
                       #hoverBackground {
                           	background-image: url(/images/w3c_xhtml_off.gif);
                       }
    Since a <div> tag is a block-level element, there's no need to declare it as such, but if you want to, go ahead. I'm not going to stop you. Next I'm going to add the height and width of the image.
    Code:
                      #hoverBackground {
                            	background-image: url(/images/w3c_xhtml_off.gif);
                      	height: 20px;
                      	width: 54px;
                      }
    That's it. Now all I have to do is add a style rule to handle the image swap. Same as before, I am going to attach the :hover psuedo-selector the ID and reference a different background image.
    Code:
                     #hoverBackground:hover {
                     	background-image: url(/images/w3c_xhtml.gif);
                     }
    Dealing with Internet Explorer
    You probably noticed that while the first demo works in IE, this one does not. It's not your fault; it's Microsoft's. But in a way we can't even blame them. The original CSS specification only allowed :hover to be used on links. The current one lets us use it anywhere we want to. I guess Gates & Co. never got the memo. Fortunately this problem has been fixed with Internet Explorer 7.

    Inside the <head> section of your Web page, below the <title> (and preferably after your stylesheet), insert a conditional comment and set it to affect Internet Explorer 5, 5.5 and 6 (see below).
    HTML Code:
                    <!--[if lt IE 7]>
                   
                   <![endif]-->
    Now create a new, blank stylesheet. Save it as msiefix.css and put it with your main stylesheet. I'm going to assume you have a separate folder called "styles." It doesn't have to be named "styles" at all, it can be called "css" or even "c" for all I care. Just call it something.

    Inside this stylesheet, add the following (you can simply copy/paste if you like):
    Code:
                 #hoverBackground {
                  	behavior: url('csshover.htc');
                  }
    The csshover.htc file is a JScript file that will add the :hover functionality to Internet Explorer. You can get the file just about anywhere, but I'm going to include it with the .zip file so you don't have to hunt for it. Please note that this IS a script, and if scripting has been disabled, the :hover effect will not work in IE. Also be sure to put the csshover.htc file in the same folder as your stylesheets.

    Now, back to the conditional comment.
    HTML Code:
         <!--[if lt IE 7]>
          	 <link rel="stylesheet" type="text/css" href="/styles/msiefix.css" media="screen" />
          <![endif]-->
    Put a link to your msiefix.css file in here. Also note that if you have any other Microsoft-specific styles you need to apply, you can just put them in here instead of using CSS hacks. Be sure to remove the hacks though (* html being a popular example). Also, be sure to remove the space and / from the end of the link tag if you're using HTML. The / is required in XHTML, which is what I used while writing this post.

    One final thing before everything works. In one of Microsoft's many "fixes" they ended up changing how .htc files work. You (or your Web host) has to change the MIME type for .htc files to text/x-component in order for the csshover.htc file to work.

    Assuming your Web server happens to be Apache, you can create (or modify) a .htaccess file (it's a simple text file) and put this into it:
    Code:
             AddType text/x-component .htc
    If you're creating a fresh file (make sure there isn't an existing one first, AND check with your Web host first just to be 100&#37; sure), just save it as .htaccess in Notepad (or another text editor). Nothing else is necessary. (Edit: If you save the file in Notepad, either wrap quotation marks around the entire file name OR save the file as "All Files" to prevent Notepad from adding .txt to the end of the file name.)

    I hope I was able to help you. Sorry about the long-winded answer, but when I show people how to do something, I want to be able to impart some of my knowledge on them. You know, the whole "give a man a fish and he eats for a day; teach a man how to fish and he eats for a lifetime" line.
    Attached Files Attached Files
    Last edited by Dan Schulz; Jan 24, 2007 at 12:37. Reason: fixed conditional comment

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great
    thanks m8, i did it in css, but if i understand it well,this also can be used for example for highligting boxes, i love that effect :P
    i'll check it out tomorrow, i think i'll use this for my portfolio
    thannks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •