tool tip pop up text when hovering over an image?

mwg

New Member
links should be 1em sans-serif font with padding of 5 and 10 pixels and margins of 0 0 1 pixels(hint: use shorthand properties); the right border should be 5 pixels and color #ff1828b. when user hovers over a link, the right border should be style double with 5 pixels in whitec. At start-up, there should be no display of text beneath any of the three images of pasta; use the tags to control the display text pop-up upon the hovering; position the block of text as absolute with a top margin of 220 pixels and left margin of 550 pixels; the width of the block should be 180 pixels at a minimum, depending on how much text you find in your research; use padding of 5 pixels and margins of 10 pixels; the text should be white on a black background.I have been trying everything and this is what I have so far and nothing is working. I'm not quite sure what I'm doing wrong? If anybody could help I would surely appreciate it. here is my code so far:\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Lab 7-3</title<style type="text/css"><!--#links {font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px color: #ff1828}div.links:hover {border-right: double 5px; color:white}<span>div#sizes a:hover img.large {position: absolute; top: 220px; left: 550px; width: 180px; border:none; padding: 5px; margin: 10px background-color: #000000; color: #ffffff}</span> --></style> </head><body><img src="http://stackoverflow.com/questions/15467250/sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" /><p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p> <div id="links" "demo"><table style="text-align: center"> <tr> <td> <a><img class="picture" src="http://stackoverflow.com/questions/15467250/fettuccine.jpg" width="200" height="200" alt="Fettucine" title="Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron"/> </td> <td> <a><img class="picture" src="http://stackoverflow.com/questions/15467250/lasagna.jpg" width="200" height="200" alt="Lasagna" title=" Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium" /> </td> <td> <a><img class="picture" src="http://stackoverflow.com/questions/15467250/ravioli.jpg" width="200" height="200" alt="Ravioli" title=" Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium" /> </td> </td></table></div></body></html>\[/code\]
 
Back
Top