CSS - Change Background Image Of Listitem On Mouseover In Ie

I know how to make the background of a link change but how do you do it if it isnt a link? in css...

Hi,

I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change:

Code:

/* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }

I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row.
Code:

<td class="row4" onmouseover='window.status="{$info['name']}"; 
this.style.backgroundColor=iOver;' onmouseout='window.status="Done"; 
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>

Thanks,

Prism128

PS: The iOver and iOut (in the second code) are colour references in a php file

I am having trouble with my CSS mouse over links. XHTML and CSS3 both validate. However the large image for the mouse over isn't showing. I have check everything I can think of and still am totally unable to figure it out. It has been years since I have built a web page and am trying again so this site has not been published as of yet but is still accessible to look at. Below is the link to my site and the external CSS style sheet. I also have CSS code on the XHTML page as well. Could someone please take a look and see what I am over looking?

Thank You
Selena

I made a mistake.. I'm not a student.

simplyselena.com and external style is simplyselena.com/css/styles.css
Sorry the above is the only way I could put url in not allowed to post url's as I am a new user account.

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

Greetings

I'm sure if I was cleverer I could figure this out for myself, but...
Also if I could figure out what the last person who more than likely already got an answer about this topic called it in their post, I might have found it in the search, but...

So, what I'm trying to do is this: I have a grid of images that link to a series of pages. To the right there is a standard navagation menu that also links to the same pages, and has a hover background color.

What I (and by "I" I really mean the person who I am building this for, since I wouldn't do it this way, but...) want to have happen is that when you mouseover the images they highlight the corresponding links in the navagation menu.

here is the css:
Code:

// the image grid
#left {
	float: left;
	height: auto;
	text-align: center;
	width: 810px;
}

#left ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#left img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#left ul li {
	text-align: center;
	width: auto;
	float: left;
	margin-right: 15px;
	height: 200px;
	margin-bottom: 15px;
}
#left ul li a {
	text-decoration: none;
	color: #000000;
	display: block;
}

// the nav menu
#right {
	height: auto;
	width: 150px;
	float: left;
}
#right ul {
	width: 150px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: right;
}
#right ul li {
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}
#right ul li a {
	text-decoration: none;
	color: #000000;
	line-height: 38px;
	width: 135px;
	display: block;
	padding-right: 15px;
}
a.home:hover {
	background-color: #C6CED0;
}
a.bio:hover {
	background-color: #B4C2A1;
}
a.gallery:hover {
	background-color: #B4B281;
}
a.review:hover {
	background-color: #9A8F62;
}
a.current:hover {
	background-color: #AF8459;
}
a.past:hover {
	background-color: #AA8050;
}
a.contact:hover {
	background-color: #8A9B93;
}

...and here is the html:
Code:

<div id="left">
    	<ul>
      <li><a href="gallery_landscape.html"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      </ul>
    </div>
     <!--end left -->  
    <div id="right">
    <ul>
    <li><a class="home" href="armin.html">Home</a></li>
    <li><a class="bio" href="#">Landscape</a></li>
    <li><a class="gallery" href="#">Plein-Air</a></li>
    <li><a class="review" href="#">Non-Objective</a></li>
    <li><a class="current" href="#">The Figure</a></li>
    <li><a class="past" href="#">The West</a></li>
    <li><a class="contact" href="#">Comics</a></li>
    
    </ul>
    </div>
  <!--end right -->

Sorry for the long post, but I hope that makes sense...
Thanks in advance for any help.

Have some (for me) a mysterious problem when mousing over an image inside a div.

I use javascript to change the class of a div when either onMouseOver or onClick of the div.
If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine.

If I use onClick to change the class of the div then the mousing over the image inside div is NOT working fine.
Why is that? Is there a way to make it work as I want?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Keywords" content="div, bug, onmouseover, onclick, image, ">
<meta name="Title" content="DIV onmouseover bug">
<meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire">

<title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title>

<style type="text/css">
 body { margin:0; padding:0; }
 .esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; }
 .elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; }
</style>

</head>
<body>

<div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;">
<div style="display:block; margin:2px;">
	MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br>
	<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br>
</div>
</div>

<div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;">
<div style="display:block; margin:2px;">
	Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br>
	The only difference between the two divs a  First DIV uses onMouseOver and second uses onClick<br><br>
	I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br>
	<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br>
	Tested in: FF, IE, OP NE<br><br>
	I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do.
</div>
</div>

</body>
</html>

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.

Please let me apologise if this this the dumbest question ever but I know almost nothing about CSS. I want to make the white section of my page, the text area, wider but I have no clue how to do it, (a friend did the page originally and she is no longer around). And if I do extend the white section can I just add more to the header image to make that fit the new text area?

Thank you

Hi all,

I have a design shown on my website he http://janusz.co.uk/dudley%2Dbeacon/

I have a horizontal navigation towards the top. Here are my queries:

I would ideally want this to be CSS based and not in the table as it is now. Furthermore, I want it to be cross browser friendly! I achieved half of this but there seems to be a minor yet annoying difference in the way netscape, firefox, avant and I.E. all render paddings! There are 8 boxes so ideally they should all be equally stretched across the page. I would also want the background colour to change.

OR

Use the current setup but have the background change when the user hovers over the link. I would like the background colour of the cell to change. However.... I don't want to use javascript to do this, is this possible at all just using CSS?

Please help!!!

Thanks!

Janusz

Hi All,

Anyone know of a way to change acheive this behaviour?

I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself).

Thanks in advance for any pointers.

Cheers,

:)Ben

Guys,

Im new to UI design, pls help...

This is a part of my code -

Code:

<div class="yellow"><a href="#">test link 1</a></div>
<div class="yellow"><a href="#">test link 2</a></div>
<div class="yellow"><a href="#">test link 3</a></div>

Now when i click on a link, the css class "Yellow" should be changed to class "Red" - (the div has yellow css class by default, when a link is clicked the css class for the div should be changed). And when the link on the second div is clicked, the first div should go to its default class (yellow) and second div (the one clicked) should change its class from yellow to red.

Please Help.

Thanks.

I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks!
Cheers ~Kat
Menu bar at: (cater-express dot com)

Trying to get my td backgrounds and my links to change colors when you roll over into the td. However only both change when you roll over the link within the td.

If you roll over just the td, it changes, but I need both the link color and the bg color to change when you roll over the td.

Here's what I'm going for, the category set up I mean:
http://www.colemancampingstore.com/link-hiking.html

Here's my CSS etc.
PHP Code:
 td:hover.cats {
background-color: #446644;
color:white;
}
a:link.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: underline;
}
a:visited.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline;
     color: #000;
}
a:hover.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

a:active.catlink {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-decoration: underline;
}


echo "<td class='cats' ><center>";
echo "<b><a href='links.php?cat=".$myrow['cat']."' class='catlink'>".$myrow['cat']." </a></b><br>";
echo "</center></td>";
} 





Is there a way to achieve this effect without using javascript and junk?

I have a list of things, and i would like it to change the entire background of the item scrolled over... I don't want it to be a link, just change the background of the div when it is scrolled over.