Image-mouseover, button appears

Question

Hi,

please look at my test-page:

Test

What I like to create:

If you hover over the image, the black button with the text and the links will appear. If you leave the image with the mouse, the button (with the text and links) will disappear.

How can I create this? It should be work with IE6-7. Please help. THX

PS: I used this, to center the button over the image: css-vertical-center-solution

Answer 1

you can do this in css or in javascript

javascript:

<img onmouseover="document.getElementById('div12').style.display = 'block';"
onmouseout="document.getElementById('div12').style.display = 'none';" src='img.jpg'/>

the problem will be when you move your mouse over the div, so img fireup onmouseout event.

Answer 2

Thx Dobiatowski.

Here is my css solution (menue technique). Link to the last version: link text

The mouseover works fine with IE6, and all modern browsers. But I have some Display errors. Is there a way to fix them?

IE 8/9 an all modern browsers (optimal)

youmethem.com/01.png

IE 7 (the Button appears behind the right image — error)

youmethem.com/03.png

IE 6 (the Button appears behind the right image, the border is broken — error)

youmethem.com/02.png