CSS - Image Mouseover Highlighting A Link?

On my site I have a list of links on the left side. I keep them in an unordered list, and set the background image using css. I want to change the image on rollover. In Firefox I can just change it putting by :hover after an li in the style sheet as if it were an anchor, but IE won't accept that, and for some reason I can't get the style to change using javascript either. Any help appreciated- I know it's something really simple that I'm just not seeing. IE also won't display the hand cursor, but if I figure out how to get the image to change I can do the hand on my own at the same time. Firefox does everything right, so you can use that to see what i'm going for.

Hey everyone.

I'm trying to create a cool menu system for my site and I wanted it to be images only.

Its he -
http://www.how-to-pass.info/topf2.html

I wanted this to have cool mouse over images, as well as displaying drop down menus.

Unfortunately, there are two problems:
1. Mouseover images don't display
2. Drop down menu disapears when you move over the menus.


Can anyone tell me how I can get this to work in a simple way?
I dont much hardly anything about style sheets and javascript etc.

Many Thanks.

currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too?

the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it

thanks

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Please look at this page - http://www.maineasp.com/default.asp in IE 7. When I load the page and then go to move my mouse of the left navigation the image on the main body jumps to the left. Can someone shed some light? Tom

OK I am pretty new to CSS. I am working with my first CSS layout...

I am trying to make some images on a page, links. However the problem I am running into is that the images are getting a link border around them, which I do not want.

Is there any way to specify this not to happen for images?

Any input is greatly appreciated!

~Una

I'm trying to style all images that have link around them - to have no border nor background. I'm using the following but no luck:

PHP Code:
 a:link img, a:visited img {
        background:none;
        background-color:transparent;
        margin:0px;
        padding:0px;
        border:none;
}

a:hover img, a:active img {
        background:none;
        background-color:transparent;
        margin:0px;
        padding:0px;
        border:none;
} 

Hey everyone, the admins have implemented a new hack to the
forums, allowing you to post your code with nicely coloured text
rather than just the normal black or the old php stuff.

More details can be found he
http://forums.devshed.com/t279108/s.html

Html code:
[hig hlight=html4strict]your code here[ /highlight]

For example:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!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" xml:lang="en">


 <head>


 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 <title>Untitled Document</title>


 </head>


  


 <body>


 <h1 class="header_text">


     Nice One!


 </h1>


 <p id="main_content">


     <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur


     adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore


     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco


     laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in


     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia


     deserunt mollit anim id est laborum.


 </p>


 </body>


 </html> 

The same goes for CSS highlighting:
[hig hlight=css]your code here[/high light]
css Code:
Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }

  

  


 /*Comments*/


 body


 {


     property:value;


 }


 body, div


 {


     property:value;


 } 

As you can see from the thread I linked, there are many many
other languages supported, but these three examples are more
likely to be used than any other in this particular forum...

Have fun with it, and please do use this feature, I'm sure it will
make things much easier for us to read/understand, rather than
just posting chunks of code.

Enjoy!

--Jon.

Seems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color.

A simple way to implement row highlighting is:

<TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';">

however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover.

Any help?

Hi,

Please help me with this, I'm at my wit's end. I can not for the life of me set the background image of a link from the CSS.

I can do it from the link HTML itself with: Code:

style="background-image: url(resources/menu_over.jpg);"

But I CANNOT do it from the CSS with something like this: Code:

<a class="navlink" href="#">asdf</a>

Code:

.navlink
{
  /*background-color: red;*/
  background-image: url(resources/menu_over.jpg);
}

Also, I am referincing my CSS file correctly b/c I tested it with "background-color", as you can see above.

Please help... thanks

I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS:

Code:

a img {
  border: 0 none;
  margin: 4px 4px 10px 4px;
  text-decoration: none;
}

a:hover img {
  border: 1px solid #e5cb43;
  margin: 3px 3px 9px 3px;
}

ul.photog  {
			list-style-position: outside; 
			padding: 0px; margin: 0px;
			border: none;
			background-color: #979089;
			width: 850px;
			text-align: center;
			margin-right: auto;
			margin-left: auto;
	
			
		}

		li.photog  {
			margin: 0px;
			padding: 0px;
			list-style-type:none;
		}	

Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance!

OK, I've made this work in the past with no problem, but for some reason, I can't figure out this simple snippet of css for a navigation rollover with an image.
Here's my code: Code:

a.creative_development{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title.gif');
}
a.creative_development:hover{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title_on.gif');
}

I've checked the paths, folder name, and image names, but it's not working. Can someone see what I'm doing wrong?

thanks

Hello,
i am new to css and i am trying to create text links on an image file using css and html
my problem is i can create one text link using the css and html code i am about to post. but i need to have 4 or 5 text links on this picture
example would be

Text Link
Text Link
Text Link
Text Link
Text Link

here is the css i am using

Code:

.imagecontainer {
    position:relative;
    float:right;
}
.imagecontainer a {
    position:absolute;
    top:200px;
    left:235px;
    color:#FFFFFF;
    font-weight: bold;
}

here is the html code

Code:

<div class="imagecontainer">
 <img alt="" src="http://durin78.squarespace.com/storage/BLUE_TILE_ROUNDED_CORNERS-2.png" />
 <a href="http://durin78.squarespace.com/blogs/category/ranting-and-raving/">Your Saint For Suicide</a>
</div>