Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Rollover Images

Discussion in 'Website Design Forum:' started by Elekate, Jul 31, 2009.

  1. Elekate

    Elekate Member

    Hey Guys,

    I have tried putting two images on my portfolio as roll-over link, copied the code from a previous website which seemed to work then but doesn't now :confused:

    Here is the code on CSS

    Code:
    #sites{	width:326px;	float:right;	padding-left:10px}#riteway{	background:url("images/ritewayroll.png") no-repeat top left}	#riteway a{	height: 230px!important}#riteway a:hover{	background:url("images/ritewayroll.png") no-repeat top right}

    Here is the code for my page:

    Code:
    <table border="0">  <tr>  <th><div id="content"><div style="text-align:left"></p><h1>Websites</h1><p>Here are a few websites I have created</p></div><!--end of content div--></th>    <th><div id="sites">    <div id="riteway"><a href="http://www.riteway-som.com" class="sites"></a>    	</div><!--end of riteway div-->    		</div><!--end of sites div-->    			</th>  </table>

    Thanks,
    Guys
     
  2. Harry

    Harry Senior Member

    For a start you shouldn't be using tables, and secondly was the code you lifted it from your own? Or someone else's?
     
  3. Elekate

    Elekate Member

    It is the only way I got the two images in line with each other (using a table) and the code was from another site I did! :p
     
  4. tim

    tim Senior Member

    it looks like dreamweaver code to me...
     
  5. Elekate

    Elekate Member

    Nah didn't use Dreamweaver was doing site through a text editor and uploading it to server :cool:
     
  6. tim

    tim Senior Member

    huh nice one.

    sorry, sweeping generalisation contradicted :)
     
  7. Goreki

    Goreki Member

    From the looks of your code, you are trying to show the same image on hover/rollover, that may be the problem. But if not try something like this.
    Code:
    #sites {	width:326px;	float:right;	padding-left:10px}#riteway{	height:height: 230px!important;	background:url("images/ritewayroll1.png") no-repeat top right;}	#riteway a {	height: 230px!important;}#riteway:hover {	background:url("images/ritewayroll2.png") no-repeat top right;}
     
  8. Kevin

    Kevin Senior Member

    Yeah it obviously won't work when using the same image :p
     
  9. Harry

    Harry Senior Member

    top right and top left in the CSS guys, it's looking like a sprite to me, therefore it should work.
     
  10. Kevin

    Kevin Senior Member

    Well spotted Harry :)
    Perhaps she doesn't know she's supposed to be using a sprite with that technique, she said she copied it.
     
  11. Goreki

    Goreki Member

    Wow, well spotted, I never noticed that!
     
  12. Elekate

    Elekate Member

    I used that technique with the image for another website I did and it worked fine (didn't know it had an actual name).

    It takes the left of the image then goes to the right of the image for the rollover or something like that :p

    Greg showed me this technique so he may know whats going on :confused:
     
  13. Harry

    Harry Senior Member

    Can you just give us a live link?
     
  14. Elekate

    Elekate Member


    Only got a temporary url so far, not managed to sort out my propper domain name yet, had trouble with the website :mad:
     
  15. br3n

    br3n Senior Member

    whats a sprite? lol.
     
  16. Harry

    Harry Senior Member

  17. Kevin

    Kevin Senior Member

    I have a shorter explanation. A sprite sheet is an image which contains all the necessary "sub-images" you need to show several image without having to load all the separate images (and thus avoiding a flicker on a hover state for example). The position of the image is moved around so you only see the suitable image on the sheet.

    EDIT: on second thought... maybe it's not so obvious anyway :eek:
     
  18. Elekate

    Elekate Member

    I tried using separate images and its still not working :mad:

    Code:
    #sites{	width:326px;	float:right;	padding-left:10px}#riteway{	height: 284px!important;	width: 326px;	float:right;	background:url("images/riteway2.png") no-repeat top right;}	#riteway a{	height: 284px!important}#riteway a:hover{	height: 284px!important;	width: 326px;	background:url("images/ritewaypic.png") no-repeat top right;}
     
  19. Kevin

    Kevin Senior Member

    Try adding this
    Code:
    #sites { display:block;}#riteway { display:block; }
    And don't forget to take out the !important before publishing because it's not valid.
     
  20. Harry

    Harry Senior Member

    It is valid.
     

Share This Page