CSS - Mouseover Images

Sup /css/.

Here is the temporary build of my page. The links are dead on purpose:

http://www.mindwallpictures.com/files/temp/mediachef

If you click on "services" you'll see a drop down list appear. I have mouseovers on these links which make an image appear toward the top of the page. "web&graphic, film&video, etc..."

However, the links for 'portfolio', 'about us' and 'contact us' should also have this same mouseover effect. But they do not work.

I believe this is a problem with my css and not the javascript, because when I swap out a mouseover command of one of the non-working links for one of the working links, the image will appear. It seems to not want to toggle those particular divs.

Here is the javascript code:
Code:

<script language="Javascript" type="">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

The related css:

Code:

#webgraphic {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/webgraphic.gif);}
#filmvideo {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/filmvideo.gif);}
#musicaudio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/musicaudio.gif);}
#photography {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/photography.gif);}
#portfolio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/portfolio.gif);}
#about {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/about.gif);}
#contact {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/contact.gif);}

and the xhtml:
Code:

<div class="sidemenu">
<div id="links">
	<div><a href="/">home</a></div>
    <a href="javascript:animatedcollapse.toggle('services')">services</a></div>
		<div id="services">
		<a href="#" onmouseover="toggleDiv('webgraphic',1)" onmouseout="toggleDiv('webgraphic',0)">web & graphic</a><br />
		<a href="#" onmouseover="toggleDiv('filmvideo',1)" onmouseout="toggleDiv('filmvideo',0)">film & video</a><br />
		<a href="#" onmouseover="toggleDiv('musicaudio',1)" onmouseout="toggleDiv('musicaudio',0)">music & audio</a><br />
		<a href="#" onmouseover="toggleDiv('photography',1)" onmouseout="toggleDiv('photography',0)">photography</a>
        </div>
<div id="links">
    <div><a href="#" onmouseover="toggleDiv('portfolio',1)" onmouseout="toggleDiv('portfolio',0)">portfolio</a></div>
    <div><a href="#" onmouseover="toggleDiv('about',1)" onmouseout="toggleDiv('about',0)">about us</a></div>
    <div><a href="#" onmouseover="toggleDiv('contact',1)" onmouseout="toggleDiv('contact',0)">contact us</a></div>
</div>
</div>

It acts as if it's a problem with syntax, but I don't see any errors and my code is validated. Any help would be greatly appreciated.

Thanks.

I'm trying to use the CSS hover state that I found on CSS Ninja, but for some reason when I hover over the images, they keep bumping upward. I've gone line by line trying to figure out which one it is, and I think it's the position:absolute line under a.feature01 .overlay01 .caption01; however, I can't get it to stop doing it even if I change the position to relative, fixed, etc. I ran it through the CSS validator as well and got no errors.

Here is the CSS code

Code:

 a.feature01
{
	display: block;
	position: relative;
}


	a.feature01:hover .overlay01
	{
		position: absolute;
		width: 185px;
		height: 130px;
	}


		a.feature01 .overlay01 .caption01
		{
			position: absolute;
			height: 30px;
			line-height: 30px;
			width: 100%;
			text-indent: -9999em;
			color: #000;
			font-size: 11px;
			bottom: 0;
			overflow: hidden;
		}
		a.feature01:hover .caption01
		{
			text-indent: 10px;
			background: rgb(255,255,255);
			/* for browsers that know rgba */
			background: rgba(255, 255, 255, 0.75);
		}

http://www.kafadrian.com/juggernaut/index.html
is what i have so far
I want it to look like:
http://www.kafadrian.com/juggernaut/layout.jpg

The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them

I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images.

am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem.

I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work.

the code for the site 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">

<script type="text/javascript">
<!--

var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";

var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";

var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";

var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";

var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";

var image16 = new Image();
image16.src = "founded.jpg";

//-->
</script>
<script type="text/javascript">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
   {
   document[img_name1].src = img_src1;
   document[img_name2].src = img_src2;
   }

//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
  <tr height="34">
    <td rowspan="4">
      <img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
        <img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
      </a>
    </td>
  </tr>
    <tr>
    <td>
      <img style="display:block" src="line_right.jpg" width="240" height="4"/>
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
    </td>
  </tr>
</table>
</body>
</html>

Im new to CSS...
i have created a nested set of <div> tags, the outer one is an image and the second one has a white background with an opacity set to it so you can see the image behind it, and the box has some text inside...
i want to have a mouseover event that makes that second div invisible (so that the whole photo behind it will show). Either a mouseover or a mouseclick event...i would prefer a mouseclick, but i need one or the other
i dont want to end up doing it in photoshop with rollover images...its so much prettier in CSS!
-Thank You

I have several small images in a row. Mouseover on each changes them to different image. However, trying to achieve paragraph of text to appear below this row - differerent <div> of text depending on which image is hovered over.

My trial so far uses code below.

(a) am I correct in saying I can achieve what I want with only CSS?
(b) I know it's got something to do with hiding and showing a block?!?

Suggestions appreciated. Thanks.

<style type="text/css">
div.image1 {
background: url(image1.jpg) no-repeat top left;
width: 100px;
height: 100px;
}

div.image1:hover {
background: url(image1_hover.jpg) no-repeat top left;
width: 100px;
height: 100px;
}

</style>



<div class="image1"> </div>