I got a quick question. I'm making some sort of simple image gallery. I got a div with a picture in it. When I hover the div another small div will go from display:none to displaye:block so it shows up above the image with half opacity. This div contains some info about the image

the code:

<div class="box col6" 
onmouseover="document.getElementById('onhover').style.display = 'block';" 
onmouseout="document.getElementById('onhover').style.display = 'none';">

<div id="onhover" style="display:none;">THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6</div>

<img src="img/final.png" width="762" height="601">
</div>

This all works fine. But now I want to do this for multiple div with images. It wont work by just copying this div because the onmouseover and out wont know which "onhover" div they got to change.

Does anybody know a solution?

I got a quick question. I'm making some sort of simple image gallery. I got a div with a picture in it. When I hover the div another small div will go from display:none to displaye:block so it shows up above the image with half opacity. This div contains some info about the image

the code:

<div class="box col6" 
onmouseover="document.getElementById('onhover').style.display = 'block';" 
onmouseout="document.getElementById('onhover').style.display = 'none';">

<div id="onhover" style="display:none;">THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6</div>

<img src="img/final.png" width="762" height="601">
</div>

This all works fine. But now I want to do this for multiple div with images. It wont work by just copying this div because the onmouseover and out wont know which "onhover" div they got to change.

Does anybody know a solution?

• javascript
• html

Share Improve this question Follow edited Dec 24, 2012 at 15:32 Naftali 146k4141 gold badges247247 silver badges304304 bronze badges asked Dec 24, 2012 at 15:09 Merijn de KlerkMerijn de Klerk 1,02322 gold badges1212 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use some CSS magic:

<div class="box col6">
    <div class="onhover">
        THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6
    </div>
    <img src="img/final.png" width="762" height="601">
</div>

CSS

.box .onhover {display: none;}
.box:hover .onhover {display: block;}

Demo: http://jsfiddle/maniator/SLfK7/

After copy-pasting the code, have different ids for all your onhover divs.

Example:

<div class="box col6" 
onmouseover="document.getElementById('onhover1').style.display = 'block';" 
onmouseout="document.getElementById('onhover1').style.display = 'none';">

<div id="onhover1" style="display:none;">THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6</div>

<img src="img/final.png" width="762" height="601">
</div>

<div class="box col6" 
onmouseover="document.getElementById('onhover2').style.display = 'block';" 
onmouseout="document.getElementById('onhover2').style.display = 'none';">

<div id="onhover2" style="display:none;">THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6</div>

<img src="img/final.png" width="762" height="601">
</div>

This will work now. Have unique ids.