OutFront Forums
     Home    Register     Search      Help      Login    

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
 

replacing CSS hover image for browser compability

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> replacing CSS hover image for browser compability 		Page: [1]
 
aleznander

 

Posts: 7
Joined: 12/8/2006
Status: offline

  		replacing CSS hover image for browser compability - 4/28/2007 8:35:42   
Hello fellow webmasters!

I am doing a webpage i gave to my mother in christmas present and i have some probs with it o.o

On the index page i used a table to make some parts of a bigger image change on a hover (the bigger image is divided in smaller inside of table cells)

to make the images inside the cells change i used the pseudo class in CSS :hover .

However to my great dissapointment the :hover didnt work in IE :)

So i tried a javascript instead and it worked quite good.. the only prob is that the images inside the cells now have space between them that i do not know how to remove :(

Can anyone help me with this? Got a better solution?:)
womble

 

Posts: 6275
Joined: 3/14/2005
From: Living on the edge
Status: offline

  		RE: replacing CSS hover image for browser compability - 4/28/2007 9:00:18   
Helps if we can see the code/a link to the site so we can see exactly what the problem is. :)

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~

(in reply to aleznander)
aleznander

 

Posts: 7
Joined: 12/8/2006
Status: offline

  		RE: replacing CSS hover image for browser compability - 4/28/2007 15:54:12   
if you say so :)
as you see in the code, the only image i have made a hover whith javascript on is "ideer.gif"
the index page: 
<html>
<head>
<title>Välkommen till lolas websida!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="lankar.css" rel="stylesheet" type="text/css">

<script>
<!-- Hide Script
	function move_in(img_name,img_src) {
	document[img_name].src=img_src;
	}

	function move_out(img_name,img_src) {
	document[img_name].src=img_src;
	}
//End Hide Script-->
</script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (projekt2.psd) -->
<table id="Table_01" width="741" height="534" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="10">
			<img src="images/index_01.gif" width="740" height="38" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="38" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/index_02.gif" width="312" height="140" alt=""></td>
		<td colspan="4" width="257" height="98">

			<div id="ideer">

<a href="link.html"
   OnMouseOver="move_in('ideer','over/images/ideer.gif')"
   OnMouseOut="move_out('ideer','images/ideer.gif')">
<img src="images/ideer.gif" name="ideer" border="0" margin="0">
</a>


</div></td>

		<td colspan="3">
			<img src="images/index_04.gif" width="171" height="98" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="98" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/index_05.gif" width="167" height="42" alt=""></td>
		<td colspan="3" rowspan="3" width="177" height="109">
			<div id="boktips"></div></td>
		<td rowspan="8">
			<img src="images/index_07.gif" width="84" height="397" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="42" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/index_08.gif" width="269" height="18" alt=""></td>
		<td colspan="3" rowspan="3" width="185" height="139">
			<div id="galleri"></div>
			</td>
		<td rowspan="4">
			<img src="images/index_10.gif" width="25" height="177" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/index_11.gif" width="25" height="337" alt=""></td>
		<td rowspan="5" width="244" height="319">
			<div id="gotland"></div>
			</td>
		<td>
			<img src="images/spacer.gif" width="1" height="49" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/index_13.gif" width="177" height="110" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="72" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/index_14.gif" width="185" height="38" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="38" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/index_15.gif" width="136" height="178" alt=""></td>
		<td colspan="4" width="208" height="131">
			<div id="gastrum"></div>
			</td>
		<td rowspan="3">
			<img src="images/index_17.gif" width="43" height="178" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="131" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="images/index_18.gif" width="208" height="47" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_19.gif" width="244" height="18" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="25" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="244" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="43" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="93" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="49" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="25" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="44" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="43" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="84" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


The linked CSS file: 


#ideer { 
	width:257;
 	height:98;}

#boktips { 
	width:177; 
	height:109; 
 	background-image:url("images/boktips.gif");}
#galleri { 
	width:185; 
	height:139; 
 	background-image:url("images/galleri.gif");}
#gotland { 
	width:244; 
	height:319; 
 	background-image:url("images/gotland.gif");}
#gastrum { 
	width:208,; 
	height:131; 
 	background-image:url("images/gastrum.gif");}

#ideer:hover{ ;}
#boktips:hover{  
 	background-image:url("over/images/boktips.gif");}
#galleri:hover{  
 	background-image:url("over/images/galleri.gif");}
#gotland:hover{  
 	background-image:url("over/images/gotland.gif");}
#gastrum:hover{ 
	width:208,; 
	height:131; 
 	background-image:url("over/images/gastrum.gif");}







/*
<!--


i dont have the webpage up on internet but il upload it somewhere if you need it:)

(in reply to womble)
jaybee

 

Posts: 14523
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		RE: replacing CSS hover image for browser compability - 4/28/2007 16:39:22   
OK, IE only allows hover on links, whereas the other browser allow you to apply it to all elements. There are various fixes for this around the web.

http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml

http://www.xs4all.nl/~peterned/csshover.html

and loads more. Take the javascript out and use one of those.

Oh and your code has a whole pile of 1 pixel spacer gifs

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to aleznander)
Tailslide

 

Posts: 6681
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: replacing CSS hover image for browser compability - 4/28/2007 16:42:18   
If it's just for a link then use a:active after a:hover - that'll sort out IE. If it's for a non-link then you'll need another solution, have a Google for whatever:hover.



_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to jaybee)
aleznander

 

Posts: 7
Joined: 12/8/2006
Status: offline

  		RE: replacing CSS hover image for browser compability - 6/2/2007 6:18:12   
hehe i know this thread is quite old, but i still havent made any progress..

The solution in the first link Jaybee offered didnt make any difference :/, and the second i just dont understand because i dunno about javascript and .htc files.

Also the thing im trying to do here Tailside is an image link that switches image on hover, not just a normal link.

edit: Hmmm.. in this link: http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml

should you replace expression with something?

what could that be?

< Message edited by aleznander -- 6/2/2007 6:32:55 >

(in reply to Tailslide)
Tailslide

 

Posts: 6681
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: replacing CSS hover image for browser compability - 6/2/2007 7:13:42   
Ok - here's a working example of a pure CSS image replacement rollover: http://www.littleblueplane.com/test/hovertest.html

I've made the image to the same size as your div in the hope that it'll make it easier to use. Instead of two images you've got one image made up of the two images, one on top of the other. This is to help avoid any flickering which you can get in IE with two image rollovers.

Now the issue here isn't getting it to work with CSS - cos that's not hard. The issue is to get it to work well.

By well I mean that it should work with images switched off, work with CSS switched off (in both cases you get the straight link) and work with keyboard navigation AND work cross-browser.

So what that means is that you end up turning a simple bit of CSS (using a background image) into a pretty complex bit of CSS. It's actually an astonishingly long bit of CSS - but it works reasonably well.



< Message edited by Tailslide -- 6/2/2007 7:29:50 >

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to aleznander)
aleznander

 

Posts: 7
Joined: 12/8/2006
Status: offline

  		RE: replacing CSS hover image for browser compability - 6/2/2007 8:05:44   
Thank you for all the effort put in to this:)

I will do my best to make it work now :)

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> replacing CSS hover image for browser compability 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.