CSS Div question
- Started
- Last post
- 17 Responses
- CygnusZero4
I have an image split into 4 quarters. I want to be able to hover over each of the 4 sections and turn on a div that was hidden by default.
So basically there would be 4 div's hidden, and as you rollover 1 section, it turns the corresponding div on, and then it turns it off when you rollout.
Is this possible with just CSS?
- ideaist0
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
and
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
- CygnusZero40
I cant figure this out. What you posted works on it's own, I cant get it to work with what Im doing.
I have an image with 4 image maps on it. I need each map when hovered over to display 1 of 4 div's that are hidden. Here's my code. I'm not a developer and a bit lost.
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="circle.jpg" width="400" height="402" border="0" usemap="#Map" /></td>
</tr>
</table><map name="Map" id="Map">
<area shape="rect" coords="105,92,188,129" href="#" />
<area shape="rect" coords="216,95,299,125" href="#" />
<area shape="rect" coords="252,175,334,214" href="#" />
<area shape="rect" coords="203,247,301,308" href="#" />
- Continuity0
Rather than setting these bits of image in a table, it would be a hell of a lot easier to set up four square divs in two rows of two to form a larger square. Then in each you can set the segment of image as a background, which tyou could them swap out on hover in your CSS file.
So, something like this. Let's assume we're talking about your top-left div (values are for placeholder purposes):
#topLeft {
width: 100px;
height 100px;
background-image: url(images/visibleBit.png);
}Then:
#topLeft:hover {
background-image: url(images/invisibleBit);
}Effectively, you're using the :hover pseuo-class to affect the behaviour of the div.
- Continuity0
^^^
Another way do it do it would be to user the same :hover principle on a div to shift your background image by x-number of pixels to reveal the hidden bit, but it would require that segment of image to include the hidden bit as a sprite.
- Lol, Im not a developer. I dont know what you just said.CygnusZero4
- I'm not a dev, either, actually. :P I just know front end stuff out of necessity.Continuity
- tymeframe0
You can do it with containing divs. Here's some rough code...
<style type="text/css">
#container #hidden {
display: none;
}
#container:hover #hidden {
display: block;
}
</style>
</head><body>
<div id="container" style="width: 200px; height: 200px;">
<p>visible</p>
<div id="hidden" style="background-color: #0C3; width: 200px; height: 200px;">
<p>visible on hover</p>
</div>
</div>- Dont think this will work. In yours, the hover state is actually "hoverable". That wont work for this.CygnusZero4
- Nevermind, looks like it was the initial w/h that defined the hover area. This might work.CygnusZero4
- CygnusZero40
Here's the issue, this image cannot be split into 4 equal parts. It's an odd design, a circle actually, and the parts that are "hoverable" are all different sizes. That's why I thought image maps had to be used over 1 solid image, not anything that was split up.
- Can a grid of some kind be drawn over the image?Continuity
- Continuity0
It doesn't have to be split in four equal parts, as long as some sort of grid can be imagined over the image, such that the parts can shift in the background as they need to. It will take some extra PS to make a correct sprite for each part, but I think ti could be done in your CSS in divs.
- ESKEMA0
I would make a big div with that image as background, then fill it with smaller divs creating those odd divisions that you want.
- CygnusZero40
^ Thats exactly what Im trying to figure out how to do. Im not a developer, I dont know how to actually do this. A lot of these other solutions are too complicated for me to figure out.
- Continuity0
Nest divs:
<div class="container"> <!-- This is the big one for all the little ones -->
<div id="little1>...</div>
<div id="little2>...</div>
<div id="little3>...</div>
<div id="little4>...</div>
</div>Et cetera.
- estetic0
can you show a mockup of the desired layout? Are the hidden divs overlayed on the quadrant image?
- fadein110
lol@imagemaps
- CygnusZero40
I cant figure it out Continuity. I dont understand how that will make certain parts of an image hoverable, which unhides 4 other div's that have content in them.
- If you can show us the mock-up as estetic suggested, I think we'd be able to help a bit more clearly.Continuity
- CygnusZero40
I cannot show this. It's owned by a client and I dont think they would be too pleased about it. It's not mine to post on the internet.
It's a circle image, in it there is text in various spots. In 4 spots I need an active area that when hovered over, it unhides a div in it, each of which will just have some content in it.
It sounds simple to me and I thought I could just make an image map hide/unhide divs on rollover/out, but I guess that isnt possible.
Im really trying to avoid using Flash here, and Javascript since that will get even more complicated.
- fake the mockup and change the dimensions. you are asking for free work. communicate betteralbums
- Picture a pie chart, but its not split up into 4 even sections.CygnusZero4
- jquery will actually be easier and more cross browers compatible ;)estetic
- Continuity0
If it's a pie chart, then the div solution won't work because it's by nature a four-sided entity (effectively, a box).
There is a way around it, though, and that is to simply design hotspots on top of your pie chart segments in PS with calls-to-action to get the user to hover over them. At that point ESKEMA's solution would be utterly do-able.
- CygnusZero40
Alright I figured it out. I made a table with my image in it. Then a container div that acts as the image map would, then within that is the hover div. Then I just used CSS positioning to get everything in the right spots. Seems to work fine.
- monNom0
you should learn JS. this is absolutely simple with a bit of script, and you can get the benefit of polygon hit-areas via image-map
<area onmouseover="document.getElementById('item1').style.visibility = 'visible'" onmouseout="document.getElementById('item1').style.visibility = 'hidden'">
done