Jump to content

Tables With Mouseover


machone
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!!!!!!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...