Search the Community
Showing results for tags 'rollover'.
Found 6 results
-
Hello, I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works. On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!! <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; } </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720"> </div> </body> </html>
-
Hi Forgive me if this is answered on here. I cant find anything, but that's probably because I don't know the proper terminology to search for. If I explain what I want to do, perhaps a kindly sole might guide me in the right direction. I want to use a (single) picture of me and some buddies. I would like to have the user hover over each person, and have text information displayed while the mouse is within a defined area of the picture. I think I remember, during the stone age, Front page allowed the area to be selected with a mouse. I'm using notepad++ now, so like the wife says "I'm completely without a clue". Many thanks AJ
-
I'm trying to use a sprite for the first time, and I've done something wrong. <head> <style type="text/css">.csstest a{display: block;width: 500px;height: 750px;background: url(http://www.littlevictorian.com/wp-content/uploads/2013/11/SofaRolloverSprite.png);background-position: 0 0;}.csstest a:hover {background-position: -500px 0;} </style></head> <body><div class="csstest"><a href="http://www.littlevictorian.com/?p=1180"></a></div></body> Could someone please let me know what I'm doing wrong? Thanks!
-
Hi, Need some help here. I am trying to create a rollover image with CSS. The code I used is: a.about_hover {display: block;width: 86px;height: 79px;text-decoration: none;background: url("../images/about_button.gif");background-position: 0;} a.about_hover:hover {background-position: -86px;} It works fine, but seems to be showing only about half of the table cell. You can see what I am talking about at: www.pumpernickelpress.com/shop/index.php Any help is greatly appreciated.
-
Forgive me I am very new to HTML... Can anyone work out what is wrong with this code, in red and bold - currently the rollovers do not work. The images are both saved in the same folder and both the image names are correct - Any ideas? <html><head><title>My Party Planner</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body bgcolor="#aacde9" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><style type="text/css">table{border-bottom: 2px solid #6600CC}</style><table id="Table_01" width="1200" height="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="2"><a href="index.html"><img src="logo.gif " width="253" height="200" border="0" alt=""></a></td> <td colspan="15"> <img src="mypartyplannertext.jpg" width="947" height="156" alt=""></td> </tr> <tr> <td><a href="index.html" onMouseOver="homerollover.gif" onMouseOut="home.gif"><img src="home.gif" width="87" height="44" border="0" alt=""></a></td> <td> <img src="blank7.jpg" width="16" height="44" alt=""></td> <td><a href="venues.html"><img src="venues.gif" width="83" height="44" border="0" alt=""></a></td> <td> <img src="blank10.jpg" width="15" height="44" alt=""></td> <td><a href="catering.html"><img src="catering.gif" width="99" height="44" border="0" alt=""></a></td> <td> <img src="blank5.jpg" width="14" height="44" alt=""></td> <td><a href=entertainment.html"><img src="entertainment.gif" width="127" height="44" border="0" alt=""></a></td> <td> <img src="blank4.jpg" width="14" height="44" alt=""></td> <td> <img src="file:///C|/Users/Cat/Documents/Web Page/Web Page Images/images/images/navigationbar_11.gif" width="1" height="44" alt=""></td> <td><a href="decoratiions.html"><img src="decorativetouch.gif" width="113" height="44" border="0" alt=""></a></td> <td> <img src="blank3.jpg" width="14" height="44" alt=""></td> <td> <img src="about.gif" width="85" height="44" alt=""></td> <td> <img src="blank3.gif" width="14" height="44" alt=""></td> <td> <img src="contact.gif" width="114" height="44" alt=""></td> <td> <img src="blank1.jpg" width="151" height="44" alt=""></td> </tr></table></body></html> Many Thanks in AdvanceCatherine
-
I am an experienced programmer but new to web apps including Javascript. An instructor gave our class the code needed to create rollover button effects: In the PAGE HEADER: <head> | | <!-- Following script required for Navigation Bar --> <script type="text/javascript"> <!-- navImage0 = newImage(); navImage1 = newImage(); navImage2 = newImage(); navImage3 = newImage(); navImage4 = newImage(); navImage5 = newImage(); navImage6 = newImage(); //--> </script> | |</head> On the IMAGE/LINK: <body> | | <a href="../services.shtml" title="Go to: Services at Specific Computer Systems" onmouseover="navImage1.src='../img/buttonServicesOver.png';" onmouseout="navImage1.src='../img/buttonServicesNormal.png';" onclick="navImage1.src='../img/buttonServicesDown.png';" onmousedown="navImage1.src='../img/buttonServicesDown.png';" onmouseup="navImage1.src='../img/buttonServicesOver.png';" > <img id="navImage1" src="../img/buttonServicesNormal.png" alt="Button: Go to Services Page"> </img> </a> | |</body> That is ALL of it! This Code Works but I don’t understand why. This became an issue because this code causes an “Object expected” error at the first character of “navImage0 = …” in the header. This error does NOT appear to have any affect on the function of the page including the rollovers. This error appears to occurs only in IE. In trying to diagnose this error I discovered several different (but similar) methods for implementing rollovers. I understand them fine, but they exposed just how much seams to be missing from the solution demonstrated by our instructor. The function “newImage” is NOT defined in any place that I can find. Please can someone tell me why/how does this simple solution work? ThanksRoss
