CSS - Css A:hover Image Replacement

Hey everyone,

I'm trying to convert a jscript rollover setup to using CSS sprites.

I have setup the following sprite:

[IMG]eagleonedims.com/images/navmap.jpg[/IMG]

I cannot figure out how to have the <li> sections replace the entire ba6nner with a shifted-down sprite upon rollover. The shifted sprite just appears within the boundaries of the respective<li> section. The reason for needing this is to include the cloud effect which overlap the other li sections. Basically, upon rollover I need the ENTIRE navmap.jpg image to be shifted by 88px down. The image is 1000px wide and each sprite is 88px tall.

Thanks for any help!

CSS:
Code:

#navmap {
	width: 1000px;
	height: 88px;
	background: url("images/navmap.jpg");
	margin: 0;
	padding: 0;
	position: relative;
}

#navmap li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

#navmap li, #navmap a {
	height: 88px;
	display: block;
}

#home {left: 141px; width: 110px;}
#about {left: 251px; width: 120px;}
#pricing {left: 371px; width: 120px;}
#quote {left: 491px; width: 120px;}
#contact {left: 611px; width: 120px;}
#login {left: 731px; width: 128px;}

#home a:hover {background: url("images/navmap.jpg") 0px -88px no-repeat;}
#about a:hover {background: url("images/navmap.jpg") 0 -176px no-repeat;}

HTML:
Code:

<ul id="navmap">
  <li id="home"><a href="index.php">Home</a></li>
  <li id="about"><a href="about.php">About</a></li>
  <li id="pricing"><a href="pricing.php">Pricing</a></li>
  <li id="quote"><a href="quote.php">Quote</a></li>
  <li id="contact"><a href="contact.php">Contact</a></li>
  <li id="login"><a href="login.php">Login</a></li>
</ul>    

ok, so it's not exactly image swapping, but i'm trying to get this thing to work in Firefox (works in IE). My xhtml is as follows: Code:

<div class="foot">
	<img src="images/menubase.jpg" alt="see | hear | speak" />
		<a href="#" id="menu_see"> </a>
		<a href="#" id="menu_speak"> </a>
		<a href="#" id="menu_hear"> </a>

And the CSS: Code:

a#menu_see {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 66px;
	height: 44px;
	margin-left: -105px;
	background: url(../images/holderMenuSee.gif) no-repeat fixed right top;
}
a#menu_see:hover {
	background: url(../images/menuSee.jpg) no-repeat fixed right top;
}
a#menu_speak {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 74px;
	height: 44px;
	margin-left: -37px;
	background: url(../images/holderMenuSpeak.gif) no-repeat fixed right top;
}
a#menu_speak:hover {
	background: url(../images/menuSpeak.jpg) no-repeat fixed right top;
}
a#menu_hear {
	position: absolute;
	left: 50%;
	top:0px;
	width:61px;
	height: 44px;
	margin-left: 40px;
	background: url(../images/holderMenuHear.gif) no-repeat fixed right top;
}
a#menu_hear:hover {
	background: url(../images/menuHear.jpg) no-repeat fixed right top;
}

the page is located [ here ]

Hi Guys,

I am having trouble working out how to line up the hover background image with the background image for a mouseover effect.
It is currently putting the hover BG image ''x.gif' over the text instead of in the same position as 'bullet.gif'

HTML
----------

<div id="vertmenu">
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>


CSS
----------
PHP Code:
#navcontainer ul
{
list-style-type: none;
text-align: left;
}

#navcontainer ul li a
{
background: transparent url(images/bullet.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#33CC00; font-weight:bold;
text-decoration: none;
color: #999;
border-bottom: 1px dashed #FF9933;
}

#navcontainer ul li a:hover
{
background: transparent url(images/x.gif) left center no-repeat;
color: black;
border-bottom: 1px dashed #FF9933;
}

#navcontainer ul li a#current
{
background: transparent url(images/x.gif) left center no-repeat;
color: #666;
border-bottom: 1px dashed #FF9933;
} 

I am wanting to add an hover option to my pictures and can not get it to work. I have each picture in a box div and was wondering how to add an hover to it. The link to the website is:-brushing with greatness. I just want the whole box to light up when you hover over the image. Would i have to use javascript or can i do this completely with css? Many thanks in advance.

Code:

#middleschool-image {
	position:absolute;
	left:498px;
	top:389px;
	width:274px;
	height:86px;
}
	.middleschool-image a:hover img {
	background-image: url(images/mid_school_ovr.jpg);
	}

Am I missing something? When I mouse-over nothing happens...

I have seen it once but cannot find it. What I am looking for is a script or stylesheet code that when the mouse is over an image that is a link, a large size of that image will appear as a popup and disappear when mouse is removed, how do I do it or when can I find it.

Thanks

Tim

Hi there,

I am looking for a way to display a 'translucent' layer on top of an image when hovered on. Is this possible? I guess I can do it with a PNG, but this onl;y works in IE right?

Any ideas?

I'd better admit right off the bat that I'm a total moron at this stuff. Here's the site I'm working on (I apologize for the geocities ads - I don't want to buy hosting until I'm ready to roll with the page).

http://www.geocities.com/dbot69/page1.html

It does pretty much exactly what I want it to do through firefox, but it's all messed up on internet explorer. Is there any way I can get it to be compatible? I got the css code from this website (it's down but here's the google cache link):

http://66.102.7.104/search?q=cache:na1aQDyoijkJ:www.frankmanno.com/ideas/css-imagemap/+CSS+Image+Maps+-+Flickr-like+Technique&hl=en&client=firefox-a

then I tailored the code to do what I'm trying to do. But I'm probobly just doing it stupidly seeing as I have no clue what I'm doing.

I got the following error when i tried to validate my code:

"Line: 21
Parse error - Unrecognized " (it said other stuff, but it wouldn't let me make the post with that other stuff included)

I don't really know what that error means though or how to fix it

Any help anyone could give me would be greatly appreciated! Thanks!

Rob

Hello,

I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image).

So my HTML is:
Code:

        <table>
            <tr>
                <td><a class="flights"><img src="/images/buttons/f.gif"></a></td>
                <td><a class="vacations"><img src="/images/buttons/v.gif"></a></td>
            </tr>
        <table />

and my CSS is:
Code:

            .flights { 
                background:url(/images/buttons/f_h.gif) center top no-repeat;
                width: 78px;
                height: 41px;
/*                 background-image: url(/images/buttons/f_h.gif); */
                margin-right: 1px;
            }
            .flights:hover img { 
                visibility: hidden;
            }
            .vacations { 
/*                 background:url(/images/buttons/v_h.gif) top left no-repeat; */
                background-image: url(/images/buttons/v_h.gif);
            }

For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image.

Any insights as to why this might be happening?

I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen:

i have a bunch of headings along the top of a page that a person can click on.

Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet)

tanks, matt.

Hi-
Please view this page in both FF and IE:
http://www.highpeakssoftware.com/test/home.html
when hovering over the links on the left, a small arrow should appear next to each one. I am acheiving this by specifying each <a>'s background-image as the arrow with a left position of -16px (which places it outside the border, so it's invisible), then making it visible by changing it's left position to 0 when it is hovered over.
you can search for the following declaration in the css:
Code:

div#subnav ul li a:hover

or line 164 to see the code

however, in IE, it seems to be reloading the image on every hover (you can see the delayed response, as well as the hourglass very briefly on hover)

This is extremely annoying
anyone know of any ways around this bug?

Am trying to solve an annoying IE problem:

I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas?

The code is:

Code:

#item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }

I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css.

The gallery is at http://www.briandobson.com.au/sthaust.html
Code:

<tr>
        <td valign="top">Boat Harbour, Goolwa<br />
          75  x 35cm <br />
          $720</td>
        <td valign="top">&nbsp;</td>
        <td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a> 
         </td>
</tr>

CSS is in the head and separate styles.css

Code:

.thumbnail img {
	border: 1px solid white;
}
.thumbnail:hover {
	background-color: transparent;
	float: left;
}
.thumbnail:hover img {
	border: 1px solid white;
}
.thumbnail span {
	position: absolute;
	background-color: white;
	padding: 1px;
	left: -1000px;
	border: 1px solid black;
	visibility: hidden;
	color: black;
	text-decoration: none;
	display: block;
}
.thumbnail span img {
	border-width: 1px;
}
.thumbnail:hover span {
	visibility: visible;
	background: top;
	left: 0px;
	z-index: 50;
}

With thanks
Angela

I am using a CSS hover image enlarge which when you hover over a thumbnail, it then shows the large version.
It works fine in IE7 onwards,
but in IE6 the enlarged image is now showing at all when you hover over the thumbnail.

Can anyone help?


here is the HTML

Code:

<div id="side-b">
<div class="news-box-container">
<div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div>

<div class="news-box">
<div class="staffpics">

<a class="p1" href="#" title=""><img src="includes/staffone.jpg" title="" alt="" />
<img class="large" src="includes/staffonelarge.jpg" title="" alt="" /></a>

</div><!-- end staffpics -->
</div><!-- end news-box -->

<div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div>

</div><!-- end news-box-container -->
</div><!-- end side b -->

here is the CSS

Code:

 .staffpics {
width:96px;
}

 .staffpics a.p1, a.p1:visited {
width:96px; height:78px; border:0px none;
}

.staffpics a img {
border:0px none;
}

.staffpics a.p1:hover {
color:#000;
}

.staffpics a .large {
position:absolute; width:0; height:0; border:0px none; top:0; left:0; padding:0px
}

.staffpics a.p1:hover .large {
position:absolute; top:125px; left:400px; width:300px; height:243px; border:10px solid #FABA32; padding:0px;

}

Hi,
I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ?

Here is the code I have now.
<a href="javascript:undefined" id="imageLinkId">GMNA</a>&nbsp;

<script language="javascript">
if( ... ) {
document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); }
else {
document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); }
</script>

Thanks