Visual Answer/title> <style type="text/css"> body { /*font: 13px arial; color: #000; background-color: #fff; padding: 10px; margin: 0px;*/ } #pic { width: 11%; height: 200px; float:left; padding: 10px; position: relative; z-index=1;} #container { height:auto; position: relative; margin-left: auto; margin-right: auto; width: 80%; } A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} img { border-style: none; } @-moz-document /* url-prefix(http://), url-prefix(https://), url-prefix(file://), url-prefix(chrome://) */ { html > body:not(:only-child) img:hover { /* z-index: 2; !important; max-height: none !important; max-width: none !important; height: auto !important; width: auto !important;*/ } } </style> <script type="text/javascript"> // <![CDATA[ var glbInc, glbDec; function decreaseSizeImage(image,div) // will get back to its normal default size { var id = image; var idDiv = div; document.getElementById(idDiv).style.zIndex = 1; if(glbInc != null) {clearTimeout(glbInc); glbInc = null;}; if (document.getElementById(id).width > 100) { //document.getElementById(id).height -= 10; document.getElementById(id).width = 100; //glbDec = setTimeout("decreaseSizeImage('"+id+"','"+div+"')", 32); }; } function increaseSizeImage(image,div) { var id = image; var idDiv = div; document.getElementById(idDiv).style.zIndex = 10; if(glbDec != null) {clearTimeout(glbDec); glbDec = null;}; if (document.getElementById(id).width < 220) { //document.getElementById(id).height += 10; document.getElementById(id).width = 300; //glbInc = setTimeout("increaseSizeImage('"+id+"','"+div+"')", 32); }; } // ]]> </script> <body> <div container style ="width:80%; margin: auto;"> <br> <p> 1. What is your location?<br> 2. What do you do for a living?<br> 3. What gives you hope?<br> 4. What is your greatest accomplishment?<br> 5. What do you love?<br> 6. What gives you anxiety?<br> 7. What is the best representation of your life [in general]?<br> </p> </div> <div id="container"> <div id="pic"> <div id="pic11" style="position: absolute; height=100px"> location <a href="#" onmouseover="increaseSizeImage('image11','pic11');" onmouseout="decreaseSizeImage('image11','pic11');"><img id="image11" src="http://www.findlocalbanks.com/images/states/new-hampshire.gif" width="100%" height="auto"/></a> </div> </div> <div id="pic"> <div id="pic12" style="position: absolute";> work <a href="#" onmouseover="increaseSizeImage('image12','pic12');" onmouseout="decreaseSizeImage('image12','pic12');"><img id="image12" src="http://www.perrypl.okpls.org/computer.jpg" width = "100%"></a> </div> </div> <div id="pic"> <div id="pic13" style="position: absolute";> hope <a href="#" onmouseover="increaseSizeImage('image13','pic13');" onmouseout="decreaseSizeImage('image13','pic13');"><img id="image13" src="http://www.arthritis.org/media/JA/children3.jpg" width = "100%"></a> </div> </div> <div id="pic"> <div id="pic14" style="position: absolute";> accomplishment <a href="#" onmouseover="increaseSizeImage('image14','pic14');" onmouseout="decreaseSizeImage('image14','pic14');"><img id="image14" src="http://www.nickyclarke.com/wp-content/uploads/2010/08/pregnant.jpg" width = "100%"></a> </div> </div> <div id="pic"> <div id="pic15" style="position: absolute";> love <a href="#" onmouseover="increaseSizeImage('image15','pic15');" onmouseout="decreaseSizeImage('image15','pic15');"><img id="image15" src="http://partners.visitrenotahoe.com/assets/508/sushi.jpg" width = "100%"></a> </div> </div> <div id="pic"> <div id="pic16" style="position: absolute";> anxiety <a href="#" onmouseover="increaseSizeImage('image16','pic16');" onmouseout="decreaseSizeImage('image16','pic16');"><img id="image16" src="http://intoxicologist.files.wordpress.com/2009/01/beer-styles.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic17" style="position: absolute";> life <a href="#" onmouseover="increaseSizeImage('image17','pic17');" onmouseout="decreaseSizeImage('image17','pic17');"><img id="image17" src="http://handsonblog.org/wp-content/uploads/2010/06/FamilyStudies.jpg" width = "100%"></a> </div></div> </div> <div style="clear:both;"></div> <div id="container"> <div id="pic"> <div id="pic21" style="position: absolute; height=100px""> location <a href="#" onmouseover="increaseSizeImage('image21','pic21');" onmouseout="decreaseSizeImage('image21','pic21');"><img id="image21" src=" http://www.mapsofindia.com/maps/gujarat/roads/ahmedabad_road.jpg" width="100%"/></a> </div> </div> <div id="pic"> <div id="pic22" style="position: absolute";> work <a href="#" onmouseover="increaseSizeImage('image22','pic22');" onmouseout="decreaseSizeImage('image22','pic22');"><img id="image22" src="http://t1.gstatic.com/images?q=tbn:BQNxcKhBEILNsM:http://img129.imageshack.us/img129/1259/bloggerwd4.png&t=1" width = "100%"></a> </div></div> <div id="pic"> <div id="pic23" style="position: absolute";> hope <a href="#" onmouseover="increaseSizeImage('image23','pic23');" onmouseout="decreaseSizeImage('image23','pic23');"><img id="image23" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQEkJ-BXlKHP7tdqizSMixTFaDxmmQGTvegI-X5jx893UFfO14&t=1&usg=__ZfHOsOBuHZ2heAvtyLS8M6MfDnI=" width = "100%"></a> </div></div> <div id="pic"> <div id="pic24" style="position: absolute";> accomplishment <a href="#" onmouseover="increaseSizeImage('image24','pic24');" onmouseout="decreaseSizeImage('image24','pic24');"><img id="image24" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSxgdfm2oKdwIsAYaP4PMAYsAC_Ea3l2LG7kXk6JQCjokd0y6o&t=1&usg=__EFofopHJ7BW6GusmgMmXp8ByjsY=" width = "100%"></a> </div></div> <div id="pic"> <div id="pic25" style="position: absolute";> love <a href="#" onmouseover="increaseSizeImage('image25','pic25');" onmouseout="decreaseSizeImage('image25','pic25');"><img id="image25" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT_z8AU8gRMPJx1L1T9qzmummKhWDkrI4jYbNf7XusTFrULUgU&t=1&usg=__RXJ12tpVjO1bWAOK8mvb0Pu1aMs=" width = "100%"></a> </div></div> <div id="pic"> <div id="pic26" style="position: absolute";> anxiety <a href="#" onmouseover="increaseSizeImage('image26','pic26');" onmouseout="decreaseSizeImage('image26','pic26');"><img id="image26" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTghHgk1aV9WCXURV9EhCqoPUz4lfAEV_x-FlMjGYmdSnKaC-w&t=1&usg=__Cz5muC7GdP3C0WxvFuKXgmAsdFo=" width = "100%"></a> </div></div> <div id="pic"> <div id="pic27" style="position: absolute";> life <a href="#" onmouseover="increaseSizeImage('image27','pic27');" onmouseout="decreaseSizeImage('image27','pic27');"><img id="image27" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRE4OnK4ZceXX9YF24sV-4LG_F0y_GGGTUvzHEAtDo4fmG1A04&t=1&usg=__Z7lgy8COUoTioDrEJp4OG5Hu6dA=" width = "100%"></a> </div></div> </div> <div style="clear:both;"></div> <div id="container"> <div id="pic"> <div id="pic31" style="position: absolute";> location <a href="#" onmouseover="increaseSizeImage('image31','pic31');" onmouseout="decreaseSizeImage('image31','pic31');"><img id="image31" src="http://www.corporatesuitesinc.com/bangalore/india-bangalore.gif" width="100%"/></a> </div></div> <div id="pic"> <div id="pic32" style="position: absolute";> work <a href="#" onmouseover="increaseSizeImage('image32','pic32');" onmouseout="decreaseSizeImage('image32','pic32');"><img id="image32" src="http://sharondrewmorgen.com/wp-content/uploads/2009/11/work-from-home-mum.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic33" style="position: absolute";> hope <a href="#" onmouseover="increaseSizeImage('image33','pic33');" onmouseout="decreaseSizeImage('image33','pic33');"><img id="image33" src="http://relationary.files.wordpress.com/2009/06/lords-prayer.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic34" style="position: absolute";> accomplishment <a href="#" onmouseover="increaseSizeImage('image34','pic34');" onmouseout="decreaseSizeImage('image34','pic34');"><img id="image34" src="http://www.anonymousfatgirl.com/wp-content/uploads/2010/06/pregnancy-2.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic35" style="position: absolute";> love <a href="#" onmouseover="increaseSizeImage('image35','pic35');" onmouseout="decreaseSizeImage('image35','pic35');"><img id="image35" src="http://www.womansavers.com/images/cheating_husband.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic36" style="position: absolute";> anxiety <a href="#" onmouseover="increaseSizeImage('image36','pic36');" onmouseout="decreaseSizeImage('image36','pic36');"><img id="image36" src="http://www.funny-potato.com/images/bikes/accident/bikes-accident.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic37" style="position: absolute";> life <a href="#" onmouseover="increaseSizeImage('image37','pic37');" onmouseout="decreaseSizeImage('image37','pic37');"><img id="image37" src="http://imagecache6.allposters.com/LRG/27/2753/IA7TD00Z.jpg" width = "100%"></a> </div></div> </div> <div style="clear:both;"></div> <div id="container"> <div id="pic"> <div id="pic41" style="position: absolute";> location <a href="#" onmouseover="increaseSizeImage('image41','pic41');" onmouseout="decreaseSizeImage('image41','pic41');"><img id="image41" src="http://www.columbia.edu/itc/mealac/pritchett/00maplinks/modern/pakadmin/pakadmin.jpg" width="100%"/></a> </div></div> <div id="pic"> <div id="pic42" style="position: absolute";> work <a href="#" onmouseover="increaseSizeImage('image42','pic42');" onmouseout="decreaseSizeImage('image42','pic42');"><img id="image42" src="http://s3.hubimg.com/u/176334_f520.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic43" style="position: absolute";> hope <a href="#" onmouseover="increaseSizeImage('image43','pic43');" onmouseout="decreaseSizeImage('image43','pic43');"><img id="image43" src="http://www.machka.net/usa/Last%20Chance.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic44" style="position: absolute";> accomplishment <a href="#" onmouseover="increaseSizeImage('image44','pic44');" onmouseout="decreaseSizeImage('image44','pic44');"><img id="image44" src="http://t3.gstatic.com/images?q=tbn:FekfSzW7yHX2bM:http://uv-blog.uio.no/mt/flexlearn/fake_degree_example.gif&t=1" width = "100%"></a> </div></div> <div id="pic"> <div id="pic45" style="position: absolute";> love <a href="#" onmouseover="increaseSizeImage('image45','pic45');" onmouseout="decreaseSizeImage('image45','pic45');"><img id="image45" src="http://christophermattix.files.wordpress.com/2009/05/mother-and-child.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic46" style="position: absolute";> anxiety <a href="#" onmouseover="increaseSizeImage('image46','pic46');" onmouseout="decreaseSizeImage('image46','pic46');"><img id="image46" src="http://www.racialicious.com/wp-content/uploads/2010/02/confusion-new.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic47" style="position: absolute";> life <a href="#" onmouseover="increaseSizeImage('image47','pic47');" onmouseout="decreaseSizeImage('image47','pic47');"><img id="image47" src="http://exchristian.net/exchristian/uploaded_images/i%27m-humble-722111.png" width = "100%"></a> </div></div> </div> <div style="clear:both;"></div> <div id="container"> <div id="pic"> <div id="pic51" style="position: absolute";> location <a href="#" onmouseover="increaseSizeImage('image51','pic51');" onmouseout="decreaseSizeImage('image51','pic51');"><img id="image51" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Leaning_Tower_of_Pisa.jpg/450px-Leaning_Tower_of_Pisa.jpg" width="100%"/></a> </div></div> <div id="pic"> <div id="pic52" style="position: absolute";> work <a href="#" onmouseover="increaseSizeImage('image52','pic52');" onmouseout="decreaseSizeImage('image52','pic52');"><img id="image52" src="http://logos.cs.uic.edu/reed/Wordle%20Computer%20Science.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic53" style="position: absolute";> hope <a href="#" onmouseover="increaseSizeImage('image53','pic53');" onmouseout="decreaseSizeImage('image53','pic53');"><img id="image53" src="http://handsonblog.org/wp-content/uploads/2010/06/FamilyStudies.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic54" style="position: absolute";> accomplishment <a href="#" onmouseover="increaseSizeImage('image54','pic54');" onmouseout="decreaseSizeImage('image54','pic54');"><img id="image54" src="http://momentsound.com/part/part2.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic55" style="position: absolute";> love <a href="#" onmouseover="increaseSizeImage('image55','pic55');" onmouseout="decreaseSizeImage('image55','pic55');"><img id="image55" src="http://www.watchmojo.com/blogs/images/pizza.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic56" style="position: absolute";> anxiety <a href="#" onmouseover="increaseSizeImage('image56','pic56');" onmouseout="decreaseSizeImage('image56','pic56');"><img id="image56" src="http://momentsound.com/part/part1.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic57" style="position: absolute";> life <a href="#" onmouseover="increaseSizeImage('image57','pic57');" onmouseout="decreaseSizeImage('image57','pic57');"><img id="image57" src="http://endanxietydisorder.com/blog/images/overcome_anxiety.jpg" width = "100%"></a> </div></div> </div> <div style="clear:both;"></div> <div id="container"> <div id="pic"> <div id="pic61" style="position: absolute";> location <a href="#" onmouseover="increaseSizeImage('image61','pic61');" onmouseout="decreaseSizeImage('image61','pic61');"><img id="image61" src="http://www.ohiobiz.com/maps/images/wayne_county_ohio.jpg" width="100%"/></a> </div></div> <div id="pic"> <div id="pic62" style="position: absolute";> work <a href="#" onmouseover="increaseSizeImage('image62','pic62');" onmouseout="decreaseSizeImage('image62','pic62');"><img id="image62" src="http://jenniferhr.files.wordpress.com/2010/07/writing.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic63" style="position: absolute";> hope <a href="#" onmouseover="increaseSizeImage('image63','pic63');" onmouseout="decreaseSizeImage('image63','pic63');"><img id="image63" src="http://www.getintouch.dk/data/media/Children_Church.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic64" style="position: absolute";> accomplishment <a href="#" onmouseover="increaseSizeImage('image64','pic64');" onmouseout="decreaseSizeImage('image64','pic64');"><img id="image64" src="http://www.runohio.com/files/marathon-logo_0.png" width = "100%"></a> </div></div> <div id="pic"> <div id="pic65" style="position: absolute";> love <a href="#" onmouseover="increaseSizeImage('image65','pic65');" onmouseout="decreaseSizeImage('image65','pic65');"><img id="image65" src="http://www.sas.usace.army.mil/lakes/thurmond/images/camping%20at%20clark%202.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic66" style="position: absolute";> anxiety <a href="#" onmouseover="increaseSizeImage('image66','pic66');" onmouseout="decreaseSizeImage('image66','pic66');"><img id="image66" src="http://www.examiner.com/images/blog/wysiwyg/image/money(113).jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic67" style="position: absolute";> life <a href="#" onmouseover="increaseSizeImage('image67','pic67');" onmouseout="decreaseSizeImage('image67','pic67');"><img id="image67" src="http://www.destination360.com/australia-south-pacific/australia/images/s/australia-bondi-beach.jpg" width = "100%"></a> </div></div> </div> <div style="clear:both;"></div> <div id="container"> <div id="pic"> <div id="pic71" style="position: absolute";> location <a href="#" onmouseover="increaseSizeImage('image71','pic71');" onmouseout="decreaseSizeImage('image71','pic71');"><img id="image71" src="http://whoyoucallingaskeptic.files.wordpress.com/2009/10/vancouver-bc.jpg" width="100%"/></a> </div></div> <div id="pic"> <div id="pic72" style="position: absolute";> work <a href="#" onmouseover="increaseSizeImage('image72','pic72');" onmouseout="decreaseSizeImage('image72','pic72');"><img id="image72" src="http://www.newyorkconstructionaccidentlaw.com/uploads/image/Concrete.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic73" style="position: absolute";> hope <a href="#" onmouseover="increaseSizeImage('image73','pic73');" onmouseout="decreaseSizeImage('image73','pic73');"><img id="image73" src="http://www.thechristianonline.co.uk/images/categories/Freefoto-ChristianCrossAtSunsetHD117.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic74" style="position: absolute";> accomplishment <a href="#" onmouseover="increaseSizeImage('image74','pic74');" onmouseout="decreaseSizeImage('image74','pic74');"><img id="image74" src="http://img.timeinc.net/time/olympics2002/dailyphotos/images/day13_05.jpg" width = "100%"></a> </div></div> <div id="pic"> <div id="pic75" style="position: absolute";> love <a href="#" onmouseover="increaseSizeImage('image75','pic75');" onmouseout="decreaseSizeImage('image75','pic75');"><img id="image75" src="http://whsword.files.wordpress.com/2010/03/vancouver-canucks-playoff-tickets.png" width = "100%"></a> </div></div> <div id="pic"> <div id="pic76" style="position: absolute";> anxiety <a href="#" onmouseover="increaseSizeImage('image76','pic76');" onmouseout="decreaseSizeImage('image76','pic76');"><img id="image76" src="http://cdn.picapp.com/ftp/Images/0272/e5d138f6-9832-4733-81b6-12d12c05c7b6.jpg?adImageId=2091004&imageId=275937" width = "100%"></a> </div></div> <div id="pic"> <div id="pic77" style="position: absolute";> life <a href="#" onmouseover="increaseSizeImage('image77','pic77');" onmouseout="decreaseSizeImage('image77','pic77');"><img id="image77" src="http://www.voga.org/hiking1.jpg" width = "100%"> </div></div> </div> </body> </html>