Tables With Mouseover

[machone]

I'm a complete newbie, so please bear with me. I need to create a webpage with html and a table, putting images in each division. When the user rolls the mouse over each division, a description has to appear. Any help or examples someone can point me to?

[Guest FirefoxRocks]

The mouseover effect must be done with JavaScript unless you mean a simple tooltip like "title".Here is a very simple table with images:

<table border="1" rules="all"><tr><td><img src="picture.jpeg" alt="Some pic"></td><td><img src="picture2.jpeg" alt="Another pic"></td></tr><tr><td><img src="picture3.jpeg" alt="A picture in a new row"></td><td><img src="picture4.jpeg" alt="Another pic"></td></tr></table>

[dsonesuk]

this shows a description box when hovered over, but needs a fix for IE(description behind images)<style type="text/css">.picdiscrip{ list-style:none; height: 75px; position: relative; z-index: -0; padding:0; margin:0;}.picdiscrip ul{ list-style:none; }.picdiscrip li {background-color:#0000CC; width:100px; height:75px; position:relative; z-index:-1;}.picdiscrip img{ border-width: 0px; position:relative; z-index:-1;}.picdiscrip li ul li{ position: absolute; left: -99em; top: 10px; width: 200px;}.picdiscrip:hover{ z-index: 999;}.picdiscrip li:hover ul li {left: 105px; background-color:#CCCCFF; height:auto;z-index: 999;}.picdiscrip li:hover ul li.picright{ left:-205px; z-index: 999; }table{ }table tr td{width:100px; height:75px;}</style><table border="1" cellspacing="0" cellpadding="0"> <tr> <td> <ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image1.gif" alt="image1" width="100" height="75" /></a> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul> </td> <td><ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image2.gif" alt="image2" width="100" height="75" /></a> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul></td> <td><ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image3.gif" alt="image3" width="100" height="75" /></a> <ul> <li class="picright">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul></td> <td><ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image4.gif" alt="image4" width="100" height="75" /></a> <ul> <li class="picright">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul></td> </tr> <tr> <td> <ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image5.gif" alt="image5" width="100" height="75" /></a> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul> </td> <td><ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image6.gif" alt="image6" width="100" height="75" /></a> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul></td> <td><ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image7.gif" alt="image7" width="100" height="75" /></a> <ul> <li class="picright">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul></td> <td><ul class="picdiscrip"> <li> <a href="java script:void(null);"><img src="image8.gif" alt="image8" width="100" height="75" /></a> <ul> <li class="picright">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li> </ul> </li> </ul></td> </tr> </table>

[dsonesuk]

Now, i gladly present with IE Fix (well except for IE6)<style type="text/css">.picdiscrip{ list-style:none; height: 75px; padding:0; margin:0;}.picdiscrip ul{ list-style:none; }.picdiscrip li, .picdiscrip img{width:100px; height:75px;border-width: 0px;}.picdiscrip li:hover, .picdiscrip img:hover {position: relative; z-index: 0;}.picdiscrip li ul li{ position: absolute; left: -999em; top: 10px; width: 200px;}.picdiscrip li:hover ul li {left: 105px; background-color:#CCCCFF; height:auto;z-index: 99;}.picdiscrip li:hover ul li.picright{ position: absolute; left:-205px; z-index: 99; }table tr td{width:100px; height:75px;}</style>

[machone]

Wow! Thanks a bunch! What if I use Firefox? Also, there is one part where the user has to click the image to get a message--I think I can use "onclick"???

Now, i gladly present with IE Fix (well except for IE6)<style type="text/css">.picdiscrip{ list-style:none; height: 75px; padding:0; margin:0;}.picdiscrip ul{ list-style:none; }.picdiscrip li, .picdiscrip img{width:100px; height:75px;border-width: 0px;}.picdiscrip li:hover, .picdiscrip img:hover {position: relative; z-index: 0;}.picdiscrip li ul li{ position: absolute; left: -999em; top: 10px; width: 200px;}.picdiscrip li:hover ul li {left: 105px; background-color:#CCCCFF; height:auto;z-index: 99;}.picdiscrip li:hover ul li.picright{ position: absolute; left:-205px; z-index: 99; }table tr td{width:100px; height:75px;}</style>

[machone]

Thanks--this really helps!!!

The mouseover effect must be done with JavaScript unless you mean a simple tooltip like "title".Here is a very simple table with images:

<table border="1" rules="all"><tr><td><img src="picture.jpeg" alt="Some pic"></td><td><img src="picture2.jpeg" alt="Another pic"></td></tr><tr><td><img src="picture3.jpeg" alt="A picture in a new row"></td><td><img src="picture4.jpeg" alt="Another pic"></td></tr></table>

[dsonesuk]

yes!, this method which uses the css hover to show text, works in most browser (tested in firefox, chrome, safari, opera, and ie7) without javascript being required to be enabled. using javascripts onclick can be used to show text,luckily there are several examples for this method, within the w3schools forum.

[machone]

yes!, this method which uses the css hover to show text, works in most browser (tested in firefox, chrome, safari, opera, and ie7) without javascript being required to be enabled. using javascripts onclick can be used to show text,luckily there are several examples for this method, within the w3schools forum.

Good deal--thanx...you may be hearing alot from me!!! AAAAAAHHHHHHHH!!!!MINDMELT!!!!!!