onMouseOver, hidden div and click question

[tomster2300]

I've been googling all morning trying to find a script that would show a hidden div below an image when that image is moused over, then allows you to bring your mouse down and click anything within that hidden div. I have three images side by side and I want each to show their own hidden divs when moused over. The hidden divs will be on top of one another, so they all "show" in the same spot.

I can handle the CSS to align the divs, but I can't find a solution for the javascript.

I know this is used all the time, but I can't seem to find a guide to writing it. I know very little about javascript, but am trying to implement this into a menu for my website redesign.

Thanks!

[mjkovis]

Try looking for a JavaScrpit file named csshover.htc. I'm not sure where the best place is to download it. I know you can register at http://www.stylinwithcss.com/ and go to their downloads sections and download it. This allows you to utilize the hover pseudo class on any element.

[tomster2300]

Originally Posted by mjkovis Try looking for a JavaScrpit file named csshover.htc. I'm not sure where the best place is to download it. I know you can register at http://www.stylinwithcss.com/ and go to their downloads sections and download it. This allows you to utilize the hover pseudo class on any element.

I can write the CSS to make the hover, but what I wanted to show was a bit more complicated than what I could do with CSS. I basically need a new div for what I want to do, and I need to know the javascript for that. Especially if I want to be able to click the items in the div (I'm putting additional images in the hidden div that will be clickable).

[mjkovis]

So, basically what you are going to do is code it so the div is set to display: none then do a hover pseudo class on the div and set display to block. It is a bit more in depth than that because you need the JavaScript file to do this in IE effectively and you have to code it correctly. Want me to put up an example of something like this for you?

[tomster2300]

Originally Posted by mjkovis So, basically what you are going to do is code it so the div is set to display: none then do a hover pseudo class on the div and set display to block. It is a bit more in depth than that because you need the JavaScript file to do this in IE effectively and you have to code it correctly. Want me to put up an example of something like this for you?

You may have to, especially for the javascript. I want to be able to mouseover a visible image and have a separate, hidden div appear below it. I think what you're saying is putting the hover CSS on the hidden image, and having it appear when you mouseover it. Something like this -

#hiddendiv {
display:none;
}

#hiddendiv a:hover {
display:block;
}

right? I don't think this is going to work since you're making someone assume the hidden div is there in the first place.

Thanks for helping me so far.

[mjkovis]

Yes, that would be close to it. Problem is, I just realized they need to be clickable and I do NOT think doing it that way will work. You could maybe try something like a drop-down menu with this. That would for sure work. Then within each listed element you can put the image code into it and then make it a link.

[tomster2300]

Originally Posted by tomster2300 You may have to, especially for the javascript. I want to be able to mouseover a visible image and have a separate, hidden div appear below it. I think what you're saying is putting the hover CSS on the hidden image, and having it appear when you mouseover it. Something like this - #hiddendiv { display:none; } #hiddendiv a:hover { display:block; } right? I don't think this is going to work since you're making someone assume the hidden div is there in the first place. Thanks for helping me so far.

You know, now that I think about it, I could probably do a hover ul menu with the images as li items. By making them links I could just make them clickable that way.

Why didn't I think of this before?

[tomster2300]

Originally Posted by mjkovis Yes, that would be close to it. Problem is, I just realized they need to be clickable and I do NOT think doing it that way will work. You could maybe try something like a drop-down menu with this. That would for sure work. Then within each listed element you can put the image code into it and then make it a link.

I think I was writing my last post while you were writing this one . I'm going to try it right now and I'll let you know how it goes.

[Force Flow]

This might be what you're looking for:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
/* style reset */
body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	color: black;
}
p { margin: .2em 0 .8em 0; }
ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
ul, ol { margin-top: .2em; margin-bottom: .8em; }

a img { border: none; }
td img { vertical-align: bottom; }
thead td img { display:inline; }

* html input, * html textarea {
	margin-left: -3px; /* IE bug */
}
/* end reset */

.item {
	margin: 0 auto;
	text-align: center;
	width: 350px;
}
.item_image {
	border: black solid 1px;
	padding 5px;
}
.item .item_border {
	border: black solid 1px;
	padding: 10px;
}
.item .item_content{
	display:none;
	padding: 12px 10px 6px 10px;
}

</style>
<script type="text/javascript">
	function doHide(elementId){
		document.getElementById(elementId).style.display = 'none';
	}
	function doShow(elementId){
		document.getElementById(elementId).style.display = 'block';
	}
</script>
</head>

<body>

<div class="item">
	<div class="item_border" onmouseover="doShow('item_content_1');" onmouseout="doHide('item_content_1');">
    	<div class="item_image"><img src="http://www.pcmech.com/design/pcmech_logo2.png" alt="" /></div>
        <div id="item_content_1" class="item_content"><a href="#top">Click me!</a></div>
    </div>
</div>

</body>
</html>

[tomster2300]

Originally Posted by Force Flow This might be what you're looking for:

Force Flow, that's exactly what I wanted. Do you mind if I use this in my website?

[Force Flow]

Sure, go ahead. Modify as you see fit.

[tomster2300]

Alright, new question. I got everything working and positioned (almost, but I can deal with the weird Safari issue), but I can't get the hidden div to show up long enough to click the images. I changed the onmouseover to onclick, which keeps the images up, but then they hide again on mouseout. So, I changed onmouseout to onclick as well, but then they stay on the screen and stack on top of one another as you click instead of re-hiding like they should.

How would I make them hide again when you click another image?

Thanks!

[Force Flow]

can you post the code?

[tomster2300]

Originally Posted by Force Flow can you post the code?

Sure.

It's not letting me post the code though - it says I have too many images. How do you show the raw code without it trying to display the end result?

[Force Flow]

post it in [ HTML ] [ / HTML ] tags (without the spaces)

[tomster2300]

I can't make it work. It still says it has too many images to post.

Could you go to www.tommymcgahee.com/redesign and view the source?

Then go to www.tommymcgahee.com/redesign/style.css for the css?

I have just that section of the homepage up for you to see it.

Also, I'm having a really bizarre issue with the word "Publish" being placed below the div with the rest of the words. It renders correctly in firefox, but is wrong in IE.

Does anybody know what the problem is?

[Force Flow]

On line 48 in the HTML where you have:

PHP Code:

<div class="item_border2" onclick="doShow('item_content_2');" 


It needs a closing bracket: >

After that, the functionality seems to work properly (personally, I'd stick with onmouseover...it's less confusing for visitors) and fixes the IE placement issue.


What code editor are you using, btw?

[tomster2300]

Originally Posted by Force Flow On line 48 in the HTML where you have: PHP Code: <div class="item_border2" onclick="doShow('item_content_2');"  It needs a closing bracket: > After that, the functionality seems to work properly (personally, I'd stick with onmouseover...it's less confusing for visitors) and fixes the IE placement issue. What code editor are you using, btw?

Coda and CSS Edit in conjunction with one another.

Thanks so much for the fix. Now the first column on the bottom is pulling up to the top next to publish. Do you know what is causing that? Do I need a clear somewhere?

EDIT: I added a div between the two with a clear and it separated them. Is there an easier way to put the clear somewhere?

Should it be clear:right in the css within the publish div?

[Force Flow]

The only thing I noticed was that the stuff for the "write" item stayed behind. The onmouseout function is missing.