creating rollovers to show text & images

[kilo3000]

I want to create a page that has a set of button rollovers; so that when each is hovered over they would show a different set of text and images in the same area of the page.


I've seen this done using dynapi, and obviously it can be done in flash. I was just wondering what other ways I can achieve this, and what is the best and easiest way??

Thanks!

 

[royweb]

You can use css to create the rollover.

On the style sheet:
1. Set the visibility to "hidden" to hide all the text and images.
2. Set the position to "absolute" so the content will appear in the same area.

<style type="text/css">
.hide {visibility: hidden; position: absolute; top: 0px; left: 0px;}
</style>

On the body:
1. Create buttons with the "onmouseover" and "onmouseout" events

<!--button1-->
<button onmouseover="text1.style.visibility='visible'" onmouseout="text1.style.visibility='hidden'">Rollover</button>

<!--button2-->
<button onmouseover="text2.style.visibility='visible'" onmouseout="text2.style.visibility='hidden'">Rollover</button>


2. Insert your content within the <div> tags.

<!--content1-->
<div class="hide" id="text1">TEXT AND IMAGES</div>

<!--content2-->
<div class="hide" id="text2">TEXT AND IMAGES</div>


Good luck!

 

[kilo3000]

Thanks for your reply royweb

would this work with links as well? Because the content I would like to put in is basically like a mini html page.

 

[kilo3000]

I just tried it and it works perfectly in IE
but it didnt work at all in Netscape 7.1
and I need it to work in both....

 

[royweb]

Yes, as long as you insert them within the <div> tag.

 

[kilo3000]

Is there a Netscape compatible solution?

 

[royweb]

Can you post your codes?