SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    CSS Image Mouseover Change

    Hi,

    I am trying to do an image mouseover effect in CSS. I have tried a few options like the ones below but they are either out of date or I can't get them to work.

    Does anyone have a good CSS method for changing an image on mouseover?

    http://www.alistapart.com/articles/rollovers/
    http://csscreator.com/node/28450

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a:link, a:visited {background-image:your.first.img}
    a:hover, a:active {background-image:your.second.img}

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A one image solution is to prefer. Read this AlistApart article how to use a sprite image for rollover:
    http://www.alistapart.com/d/sprites/

    An explanation of sprites: http://css-tricks.com/css-sprites/
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dr. John,

    But how do I apply this? With a 'class' tag?

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    justlukeyou, it's up to you, the important thing is you attach it to the correct tag, if you want it to only apply once (and not be reusable elsewhere on the same page) I would probably use an ID rather than a class attribute. It's the same as any CSS code, you state where the element is (such as body #nav a:hover) and it'll work

  6. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys,

    I've got one method to work which moves the a double width image left, it works completely fine in Firefox and Chrome but in IE it pushes it one pixel further left.

    http://technologydiscounts.co.uk/index2.html

    I tried the method above but couldn't get it work. Does anyone know the full code for replacing one image with another?

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by justlukeyou;
    I've got one method to work which moves the a double width image left, it works completely fine in Firefox and Chrome but in IE it pushes it one pixel further left.
    The one pixel shift I couldn't see. Seems working ok.
    I tried the method above but couldn't get it work. Does anyone know the full code for replacing one image with another?
    You already have coded a working image-switching using a sprite image.

    But I think it is an image replacing you need here. In FF WebDevTool I tried this code on your link. Play with it to learn more:
    Code HTML4Strict:
    <!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" lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled</title>
    <style type="text/css">
    body{margin:0; padding:0}
     
    .header {
    	float: left;
    	padding-top: 1%;
    	font-size: 11px;
    	font-weight: bold;
    	color: #969696;
    	font-family: arial;
    	width: 100%;
    	padding-bottom: 5px;
    }
    .buynow {
    	float: left;
    	display: inline;
    	margin:0 -400px 0 20px;
    	overflow: hidden;
    }
    .buynow a {
    	float: left;
    	height: 86px;
    	width: 497px;
    	text-decoration: none;
    	line-height: 86px;
    	text-align: center;
    }
    .buynow img {
    	float: left;
    	display: inline;
    	margin-right: -497px;
    	border:0;
    }
    .buynow a:hover {
    	visibility: visible;
    }
    .buynow a:hover img {
    	margin-left: -497px;
    	padding-right: 497px;
    }
    .top {
    	float: right;
    	display: inline;
    	position: relative;
    	margin: 10px 10px 0 0;
    }
    .top li {
    	float: left;
    	list-style: none;
    }
    .top a {
    	margin: 0 10px;
    	color: #f5a304;
    	text-decoration: underline;
    }
    .top a:hover {
    	color: #000;
    }
    </style>
    </head><body>  
     
    <div class="header">
    	<ul class="top">
    		<li><a href="/about">About Us</a>|</li>
    		<li><a href="/contact">Contact Us</a>|</li>
    		<li><a href="/help">Help</a></li>
    	</ul>
    	<h1 class="buynow"><a href="/"><img src="images/logo10.png" alt="" />www.technologydiscounts.co.uk</a></h1>
    </div>
     
    </body></html>
    The code above works also with a transparent image and will fill all the CSS on/off image on/off criteria put here: Nine Techniques for CSS Image Replacement
    You will find more methods here:Revised-image-replacement
    And an even better one here: Heading replacment
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm lost, my heads busting with 101 things and I can't even remember how I got it to work yesterday.

    In the IE on my desktop it juts to the side but on my desktop IE (which is the same) it remains in the same place!!!!

    Do you have a complete swap method?

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by justlukeyou;
    Do you have a complete swap method?
    This is the swap part. You can probably use it as it is.
    Code:
    .buynow a {
    	display: block;
    	height: 86px;
    	width: 497px;
    	overflow: hidden;
    	text-decoration: none;
    }
    .buynow img {
    	float: left;
    	border:0;
    }
    .buynow a:hover {
    	visibility: visible;
    }
    .buynow a:hover img {
    	margin-left: -497px;
    }
    HTML Code:
    <h1 class="buynow"><a href="/"><img src="images/logo10.png" /></a></h1>
    Happy ADD/ADHD with Asperger's

  10. #10
    SitePoint Enthusiast null101's Avatar
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dreamweaver has a "Image rollerover" function that makes life alot easier as well.

    Also, there are a number of image rollover scripts for Javascript libraries, like prototype, jQuery, and Mootools.

    Good luck
    Scumlabs.com - Free flash games
    Play Super Mario Flash!
    Play Raiden X!


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
  •