• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Rollover Images


#1
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
 

Harry

Senior Member
#2
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
Harry said:
For a start you shouldn't be using tables, and secondly was the code you lifted it from your own? Or someone else's?
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
 
#7
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;}
 

Kevin

Senior Member
#10
Well spotted Harry :)
Perhaps she doesn't know she's supposed to be using a sprite with that technique, she said she copied it.
 
#12
Onartis said:
Well spotted Harry :)
Perhaps she doesn't know she's supposed to be using a sprite with that technique, she said she copied it.
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:
 

Kevin

Senior Member
#17
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
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;}
 

Kevin

Senior Member
#19
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.