|
HTML - Weird Image Problem - Small Lines
This is the page: [edited out link after problem solved]
In Internet Explorer and Opera (not FF as far as I can see), under the 3rd 4th 5th 6th and 7th menu image there is a very small black line between it and the next. I don't know why these are there and how they appeared. I think it is something to do with the stylesheet rather than the page html as they are not there when I exclude it. The style is he [edited out link after problem solved] Can anyone shed some light on this? thanks. Similar TutorialsHi, i got a big problem; If you run this code in Firefox everything is ok - there is one yellow text input; But in Internet Explorer there are two red horizontal 1 pixel lines under and above text input; I have been pulling my hair since 2 days and still i dont know how to get rid of those lines?; Is this IE bug ? Please help me if you can; Thx; HTML Code: <html>
<head>
<style type="text/css">
table.myDrop-table
{
border-collapse: collapse;
background-color: red;
border-style: solid;
border-color: blue;
border-width: 0px;
border-spacing: 0px;
padding: 0px;
margin: 0px;
}
tr.myDrop-tr
{
border-collapse: collapse
border-width: 0px;
padding: 0px;
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
td.myDrop-td
{
border-collapse: collapse
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
input.myDrop-edit
{
border-width: 0px;
border-style: solid;
border-color: black;
background-color: yellow;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body bgcolor=white>
<TABLE class=myDrop-table cellpadding=0 cellspacing=0 border=0><TBODY>
<TR class=myDrop-tr>
<TD class=myDrop-td >
<INPUT class=myDrop-edit>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
After fixing the code for my image maps after my question yesterday, I got an email from a user saying this: "I just noticed one thing when viewing the site using IE. on the pages, IE is shrinking the image and rather than giving me the option to click on a link, it gives me a magnifying glass to enlarge the image. When i enlarge the image, I still can't click on the links. Instead I get the magnifying glass to shrink the image back down." Here is an example of the code: <img src="About.jpg" width="1100" height="825" border="0" usemap="#about" /> <map name="about" /> <area shape="rect" coords="285,29,316,50" href="http://www.com" title="HOME" alt="Home" /> <area shape="rect" coords="383,29,460,50" href="http://www.com/teachers" title="FOR TEACHERS" alt="For Teachers" /> <area shape="rect" coords="469,29,516,50" href="http://www.com/support" title="SUPPORT" alt="Support" /> </map> It works fine with Safari and Firefox. What could be causing that problem with IE? why does my local copy of my site look like this http://img106.imagevenue.com/aAfkjfp...m_122_61lo.JPG but after I upload it to my webserver at http://shellsite.okinawapc.com it looks correct?? I recently developed the following site: www.stripburgerlv.com If you view it in Firefox it may look just fine. However, in Safari, Opera or IE you'll notice that the right side of the white bounding box disappears. I dont understand?! Part of the image file includes that white edge so why would it not show up in those browsers? Thanks! so I have been working on this site trying to make it look like the image below how do I get the large portrait to the right of all the smaller images without messing them up? thanks in advance. http://i46.tinypic.com/64gxew.jpg Can someone tell me why the image isn't zoomed all the way to its max when clicked on? You have to click on the zoomed image to get it to its max dimensions. Why does it do this and how do I fix it so it will max out in a separate window when you click on the thumb? I don't know how to write this Javascript stuff myself. Click on any image to zoom aaaaaaaaaaaaaaa Hi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. Hey everyone I'm new here.. I do have a slight problem, and I'm not sure where to look. I have a .swf file that is using a lot of bandwidth right now, mainly about 4GB of bandwidth a day. I don't mind that it is using that much, but I'm thinking why not put some advertisement links to try to make some money from showing this thing all the time. The link to it is, http://www.mypcgeeks.com/screenclean.swf It's a little pug licking the screen and people are getting a kick out of it, which is great, but what I want ultimately to be done is instead of going just to the .swf, to possibly redirect, or even add just a advertisement table above the .swf Suggestions? Thanks <html><body> <table width="670" height="" cellspacing="0" cellpadding="" border="0" bgcolor="#f9f5f3" align="center"> <tbody> <tr> <td><table width="650" cellspacing="0" cellpadding="6" border="0" bgcolor="#f9f5f3" align="center"> <tbody> <tr> <td colspan="2"><img width="650" height="230" align="middle" src="/assets/images/Tifco Ezine/banner.jpg" alt="" /></td> </tr> <tr> <td colspan="2"><p><span style="color: rgb(193, 139, 92);"><strong><span style="font-size: x-large;">Summer Offers at Parknasilla Resort & Spa</span></strong></span></p> <p><span style="color: rgb(193, 139, 92);"><span style="font-size: large;">Self Catering in Style</span></span></p> <p>Only €200 per night for a 5 night self catering break in one of our two bedroom luxury lodges. Situated just behind the main house the lodges offer a fantastic alternative to staying in the hotel and allow your family absolute freedom to come and go as they choose!</p> <p><span style="font-size: large;">€200 Per Night </span></p> <p><img width="112" height="35" alt="" src="/assets/images/Tifco Ezine/book_now_burlo2.jpg" /></p></td> </tr> </tbody></table> <table width="320" cellspacing="0" cellpadding="" border="0" align="left"> <tbody height="400" background="/assets/images/Tifco Ezine/background.jpg" align="middle" alt="" width="320" img=""><tr valign="top"> <td style=""><p style="text-align: left; margin-left: 15px;"> </p><p style="text-align: left; margin-left: 15px;"><strong><span style="color: rgb(193, 139, 92);"><span style="font-size: large;">Sumptuous Spa Package</span></span></strong></p> <p style="text-align: left; margin-left: 15px;">Relax & unwind in our stunning thermal spa with panoramic views of the Atlantic Ocean and Kerry Mountains!</p> <p style="text-align: left; margin-left: 15px;">Package includes:</p> <ul> <li style="text-align: left;"><p>2 Nights Overnight Accommodation</p></li> <li style="text-align: left;"><p>Full Irish breakfast</p></li> <li style="text-align: left;"><p>Gourmet Dinner in Pygmalion Restaurant</p></li> <li style="text-align: left;"><p>spa treatment</p></li> </ul> <p style="text-align: left; margin-left: 15px;"><span style="font-size: large;"> </span></p> <p style="text-align: left; margin-left: 15px;"><span style="font-size: large;">Only €269 PPS </span></p> <p style="text-align: left; margin-left: 15px;"><img width="112" height="35" alt="" src="/assets/images/Tifco Ezine/book_now_burlo2.jpg" /></p></td> </tr> </tbody></table> <table cellspacing="0" cellpadding="" border="0" bgcolor="#f9f5f3" align="right" style="width: 320px; height: 400px;"> <tbody height="400" > <tr bgcolor="#f9f5f3" background="/assets/images/Tifco Ezine/background.jpg" align="middle" alt="" width="320" height="400" img="" valign="top"> <td style=""><p style="text-align: left;"><strong> </strong></p><p style="text-align: left; margin-left: 15px;"><strong><span style="color: rgb(193, 139, 92);"><span style="font-size: large;">Gourmet Golf Escape</span></span></strong><span style="font-size: large;"> </span></p> <p style="text-align: left; margin-left: 15px;"><span style="font-size: large;"><span style="font-size: small;">Package includes:</span></span></p> <p style="text-align: left; margin-left: 15px;">2 Nights overnight accommodation</p><ul> <li style="text-align: left;"><p> Full Irish breakfast</p></li> <li style="text-align: left;"><p>Gourmet Dinner in Pygmalion Restaurant</p></li> <li style="text-align: left;"><p>Round of Golf</p></li> </ul> <p style="text-align: left; margin-left: 40px;"><span style="font-size: large;">Only €309 PPS</span><span style="font-size: large;"><br /> </span></p> <p style="text-align: left; margin-left: 40px;"><img width="112" height="35" alt="" src="/assets/images/Tifco Ezine/book_now_burlo2.jpg" /></p></td> </tr> </tbody></table> </td></tr></tbody></table> </ html></ body> The two tables in bold I have an image in both these tables as a background it is a rounded rectangle similar to the background color #f9f5f3 but there is white spacing around the image that I cannot take out. Any help is greatly appreciated. Thanks. Here is my CSS: Code: #awardcontainer {
width: 700px;
margin-top: 20px;
margin: auto;
padding: 0;
}
#blueheader {
background: url('http://www.forumbuff.com/fpacolor1top.png') no-repeat;
width: 700px;
height: 50px;
margin: 0;
padding: 5px;
}
#bluecontent {
background: yellow;
max-width: 700px;
margin: 0;
padding: 2;
}
#bluefooter {
background: url('http://www.forumbuff.com/fpacolor1bottom.png') no-repeat;
width: 700px;
height: 50px;
margin: 0;
padding: 5px;
float: left;
}
Here is my HTML: HTML Code: <html> <head> <title>Test</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="awardcontainer"> <div id="blueheader"> </div> <div id="bluecontent"> Testing 1 2 3 </div> <div id="bluefooter"> </div> </div> </body> </html> The error can be found at: http://zenrer.com/fptest/awards.html I have never seen this problem before, the gap between the header and the content. Can someone help me please. Can someone please check my site in IE6? I think the text in the navigation menu on the left doesn't shows up besides "Pictures"... I saw this problem on my client's computer (yikes! ). It was really weird, the boxes were just green with no writing until you hovered over them. I don't have access to 6 myself and I'd really really appreciate it if someone could check this: http://www.salemnhconservation.org Let me know if this problem happens with you! Thanks!!! Hey there, I am having a small problem everytime I try to make a page like this. The navbar will move up when I make the page bigger, and it will act weirdly and create extra pixels and such when I make it smaller. Please help! I validated everything, I would just like to know why it is doing this. Thanks a ton. I really appreciate it! Html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="web.css"> <title>Sample</title> </head> <body> <div id="top"> <img src="samplebanner.png" width="750" height="150" alt="Banner"> </div> <div class="navbar"> <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> </body> </html> Css: .navbar ul { position: absolute; text-decoration: none; background-color: aqua; background-image: none; padding-left: 0px; top: 143px; } .navbar li { list-style-type: none; border-style: solid; border-color: black; border-width: 1px; border-bottom: 0px; } img { border-style: solid; border-color: black; border-width: 1px; position: absolute; } Thank you so much for your help! Hello Ive got a bit of a problem which is really doing my head in trying to figure it out. It could be related to a script ive just used to produce a small slideshow/gallery, or could be to do with the tables. Ive highlighted the two areas with a red box in the attachment below, the main problem is the yellow line in the top left corner. on the other pages its not there... I noticed that there is a gap between the top page and the design of the site (which isnt meant to be like that), the whole design should be a little higher. Ive also attached the site code, im hoping someone can look and apologies if the code is messy (which it may well be..) thanks for any help Hello guys I am having problems with how my site looks in IE relative to other browsers. This is the problem --> http://www.triplestarnews.com/needhelp.jpg the url of the source is http://www.triplestarnews.com/main. Any ideas/help would be greatly appreciated. -Victor I dont know what happened but all of a sudden I have no "layout view" and it looks like all code is in head section. Please help me, I cant figure it out. I used golive 7.0 for this crap code. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Room additions.</title> <meta name="keywords" content="san diego bath remodeling, san diego room additions, san diego remodeling contractor, san diego room addition contractor,san diego kitchen & bath remodeling" <meta name="author" content="http://www.hdr.com"> <meta name="copyright" content="hd"> <meta name="revisit-after" content="7 days"> <meta name="robot" content="All"> <link href="main.css" rel="stylesheet" type="text/css" media="all"> <csscriptdict import> <script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script> </csscriptdict> <csactiondict> <script type="text/javascript"><!-- var preloadFlag = true; // --></script> </csactiondict> </head> <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <table width="1235" border="0" cellspacing="0" cellpadding="0" align="center" background="images/bg.jpg" cool gridx="10" gridy="10" height="1014" showgridx showgridy usegridx usegridy> <tr height="78"> <td width="252" height="550" rowspan="5" valign="top" align="left" xpos="0"><img src="images/bg_top_L.jpg" alt="" height="434" width="252" border="0"></td> <td width="220" height="78" colspan="5" valign="top" align="left" xpos="252"><img src="images/logo.jpg" alt="" height="78" width="220" border="0"></td> <td width="507" height="78" colspan="3" valign="top" align="left" xpos="472"><img src="images/phone_head.jpg" alt="" height="78" width="507" border="0"></td> <td width="255" height="550" rowspan="5" valign="top" align="left" xpos="979"><img src="images/bg_top_r.jpg" alt="" height="434" width="255" border="0"></td> <td width="1" height="78"><spacer type="block" width="1" height="78"></td> </tr> <tr height="26"> <td width="194" height="935" rowspan="5" valign="top" align="left" xpos="252"><csobj h="935" occur="5" t="Component" w="194" csref="menu.html"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/but1.jpg" alt="" height="16" width="194" border="0"></td> </tr> <tr> <td><a onmouseover="changeImages('but2','images/but2_over.jpg');return true" onmouseout="changeImages('but2','images/but2.jpg');return true" href="index.html"><img id="but2" src="images/but2.jpg" alt="" name="but2" height="26" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but3','images/but3_over.jpg');return true" onmouseout="changeImages('but3','images/but3.jpg');return true" href="#"><img id="but3" src="images/but3.jpg" alt="" name="but3" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but4','images/but4_over.jpg');return true" onmouseout="changeImages('but4','images/but4.jpg');return true" href="#"><img id="but4" src="images/but4.jpg" alt="" name="but4" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but5','images/but5_over.jpg');return true" onmouseout="changeImages('but5','images/but5.jpg');return true" href="#"><img id="but5" src="images/but5.jpg" alt="" name="but5" height="22" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but6','images/but6_over.jpg');return true" onmouseout="changeImages('but6','images/but6.jpg');return true" href="#"><img id="but6" src="images/but6.jpg" alt="" name="but6" height="22" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but7','images/but7_over.jpg');return true" onmouseout="changeImages('but7','images/but7.jpg');return true" href="#"><img id="but7" src="images/but7.jpg" alt="" name="but7" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but8','images/but8_over.jpg');return true" onmouseout="changeImages('but8','images/but8.jpg');return true" href="#"><img id="but8" src="images/but8.jpg" alt="" name="but8" height="24" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but9','images/but9_over.jpg');return true" onmouseout="changeImages('but9','images/but9.jpg');return true" href="#"><img id="but9" src="images/but9.jpg" alt="" name="but9" height="23" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but10','images/but10_over.jpg');return true" onmouseout="changeImages('but10','images/but10.jpg');return true" href="#"><img id="but10" src="images/but10.jpg" alt="" name="but10" height="25" width="194" border="0"></a></td> </tr> <tr> <td><a onmouseover="changeImages('but11','images/but11_over.jpg');return true" onmouseout="changeImages('but11','images/but11.jpg');return true" href="#"><img id="but11" src="images/but11.jpg" alt="" name="but11" height="26" width="194" border="0"></a></td> </tr> <tr> <td><img src="images/menu_low.jpg" alt="" height="235" width="194" border="0"></td> </tr> <tr> <td><img src="images/special1.jpg" alt="" height="130" width="194" border="0"></td> </tr> <tr> <td><img src="images/special2.jpg" alt="" height="126" width="194" border="0"></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </csobj></td> <td width="533" height="26" colspan="7" valign="top" align="left" xpos="446"><img src="images/frame_top.jpg" alt="" height="26" width="533" border="0"></td> <td width="1" height="26"><spacer type="block" width="1" height="26"></td> </tr> <tr height="221"> <td width="16" height="221" colspan="3" valign="top" align="left" xpos="446"><img src="images/frame_left.jpg" alt="" height="221" width="16" border="0"></td> <td width="501" height="221" colspan="2" valign="top" align="left" xpos="462"><img src="images/main_pic.jpg" alt="" height="221" width="501" border="0"></td> <td width="16" height="221" colspan="2" valign="top" align="left" xpos="963"><img src="images/frame_rt.jpg" alt="" height="221" width="16" border="0"></td> <td width="1" height="221"><spacer type="block" width="1" height="221"></td> </tr> <tr height="38"> <td width="533" height="38" colspan="7" valign="top" align="left" xpos="446"><img src="images/frame_bottom.jpg" alt="" height="29" width="533" border="0"></td> <td width="1" height="38"><spacer type="block" width="1" height="38"></td> </tr> <tr height="187"> <td width="8" height="187" colspan="2"></td> <td content csheight="177" width="517" height="187" colspan="4" valign="top" xpos="454"><span class="h1b">Welcome & Remodeling.</span><span class="h1"><br> </span>Thank you for taking the time to <a class="test" href="index.html">look</a> around. <p>Remodeling kitchen .</p> <p>Remodeling bathrooms</p> </td> <td width="8" height="187"></td> <td width="1" height="187"><spacer type="block" width="1" height="187"></td> </tr> <tr height="463"> <td width="252" height="463"></td> <td width="1" height="463"></td> <td width="787" height="463" colspan="7" valign="top" align="left" xpos="447"><img src="images/line.jpg" alt="" height="16" width="533" border="0"></td> <td width="1" height="463"><spacer type="block" width="1" height="463"></td> </tr> <tr height="1" cntrlrow> <td width="252" height="1"><spacer type="block" width="252" height="1"></td> <td width="194" height="1"><spacer type="block" width="194" height="1"></td> <td width="1" height="1"><spacer type="block" width="1" height="1"></td> <td width="7" height="1"><spacer type="block" width="7" height="1"></td> <td width="8" height="1"><spacer type="block" width="8" height="1"></td> <td width="10" height="1"><spacer type="block" width="10" height="1"></td> <td width="491" height="1"><spacer type="block" width="491" height="1"></td> <td width="8" height="1"><spacer type="block" width="8" height="1"></td> <td width="8" height="1"><spacer type="block" width="8" height="1"></td> <td width="255" height="1"><spacer type="block" width="255" height="1"></td> <td width="1" height="1"></td> </tr> </table> <csobj h="240" occur="30" t="Component" w="1260" csref="footer.html"> <table width="1234" border="0" cellspacing="0" cellpadding="0" align="center" background="images/foot.jpg" height="240"> <tr height="51"> <td width="261" height="51"></td> <td width="130" height="51"></td> <td width="138" height="51"></td> <td width="155" height="51"></td> <td width="260" height="51"></td> <td width="50" height="51"></td> <td width="241" height="51"></td> </tr> <tr height="125"> <td width="261" height="125"></td> <td valign="top" width="130" height="125"><a href="index.html">Home</a><br> <a href="about%3ehtml">About Us</a><br> <a href="services.html">Services</a><br> <a href="gallery.html">Gallery</a><br> <a href="clients.html">Clients</a><br> <a href="contact.html">Contact Us</a></td> <td valign="top" width="138" height="125"><a href="design.html">Design Services</a><br> <a href="kitchens.html">Kitchen Remodeling</a><br> <a href="baths.html">Bath Remodeling</a><br> <a href="room_additions.html">Room Additions</a><br> <a href="home_repairs.html">Home Repairs</a><br> <p></p> </td> <td valign="top" width="155" height="125"></td> <td width="260" height="125"></td> <td width="50" height="125"></td> <td width="241" height="125"></td> </tr> <tr> <td width="261"></td> <td width="130"></td> <td width="138"></td> <td width="155"></td> <td align="right" width="260">Copyright © HDR 2009</td> <td width="50"><img src="images/logo_vg.jpg" alt="" height="35" width="50" align="right" border="0"></td> <td width="241"></td> </tr> </table> </csobj> </body> </html> I am just about to ship this template off to a customer but I am having a problem with my footer. The footer is supposed to expand the width of the page at the very bottom of the page. However, the footer is cramming itself in below the content on the right side panel. However, if I add 2 </div> tags in the HTML code directly above the footer code than it works perfect. The problem is that this invalidates the code and I can't figure out why. The validator claims these </div> tags aren't matched with enough <div> tags. Im going nuts and I know this is a really simple issue. Can anybody see what is going on?! Here is the page I am talking about: http://current-post.com/refractive/inner.html Hello, I've got a weird problem that I've never come across before... I've created a page with a hidden div on it that is displayed at certain times (after a button is clicked). The div is displayed on top of a semi opaque div that covers the whole of the page (this is created and added to the page when the hidden div is shown). The effect is very similar to the lightbox technique. To prevent select boxes showing through the opaque overlay in IE6 I'm also using an iframe shim. The only problem I have is that in FireFox, the text input fields on my lightbox div do not have the flashing carat in them. You can select the inputs and enter text into them, it just looks a little odd not having a carat in them when they are selected. Anyone else come accross this? Wzup Got a little issue on my site. is showing everything great in firefox. IE is a little off but i'm still working on that. but in safari i doesn't show anything. This is the site try it out. click on the Events button in the nav bar. in FFX my stuff shows up safari it doesn't i used div tags to show it and css sheets site created in dreamweaver. checked with w3 validator thanks for any help greetz robin Hi I've got a weird problem. Basically, I've created an effect where an image (designed to look like the front of a record sleeve) flips when clicked, and then shows a different image (which looks like the reverse of the same sleeve). There are nine "albums" on the page, however, the effect only works on one image at any one time (by default "album1", but delete this album and the effect will work exclusively on "album2" and so on). Changing "div id" to "div class" throughout the HTML document, style sheet etc. doesn't help, it only rearranges the images. I've pasted the relevant code below. I can't understand the problem, and it's creating a serious roadblock. Any ideas? Thanks - Chris HTML: <!-- Album pictures (front sleeve on left, zig-zag sleeve reverse on right) --> <div id="album1"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album1.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div> <div id="album2"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album2.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div> <div id="album3"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album3.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div> <div id="album5"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album5.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album6"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album6.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album7"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album7.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album9"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album9.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album10"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album10.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album11"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album11.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> CSS: /* Image flip code (applies to album divs, decreases then increases width and opacity, hiding one image then the other, producing a "flipping" optical illusion) */ #flip1{ position:absolute; cursor:pointer; width:104px; height:104px; } #flip2{ display:none; position:absolute; cursor:pointer; } |
|||||||