Rollover Images, Rollover not working |
Rollover Images, Rollover not working |
johnny.isaacs |
Dec 7 2011, 09:17 AM
Post
#1
|
Group: Members Posts: 2 Joined: 7-December 11 Member No.: 16,017 |
Hi guys,
I am working on a site for a friend and created this sliding shooting gallery type page. I would like to get a rollover image to appear when the user hovers over the main imgs in the sliderGallery (I think that is how it is named). But every time that I do it, it causes something to go wrong with my nav bar down the bottom. It is probably something really obvious but I can't see it. Any help would be really really appreciated. I have pasted the code as I could not upload the file for some reason. Sorry it is a bit messy, I put it in one html file so you could see everything. Thank you in advance. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>The Pistolettos</title> <style type="text/css" media="screen"> <!-- body { padding: 0; font-size: 100%; background-color: #212121; margin: 0; font-family: "Courier New", Courier, monospace; color: #FFF; } h1 { margin-bottom: 2px; } #container { background-color: #fff; width: 1020px; margin: 0px auto; padding: 0px; height: 800px; background-repeat: no-repeat; } /* slider specific CSS */ .sliderGallery { overflow: hidden; position: relative; padding: 0px; height: 800px; width: 1020px; background-image: url(img/mainBG.jpg); background-repeat: no-repeat; } .sliderGallery UL { position: absolute; list-style: none; overflow: none; white-space: nowrap; padding: 0; margin: 0; top: 97px; } .sliderGallery UL LI { display: inline; margin-left: 25px; margin-right: 25px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .slider { width: 935px; height: 35px; margin-top: 750px; margin-left: 40px; position: relative; background-image: url(img/navBar_BG.png); background-repeat: no-repeat; } .handle { position: absolute; cursor: move; height: 30px; width: 130px; top: 3px; z-index: 100; left: 12px; background-image: url(img/handle.png); background-repeat: no-repeat; } .slider span { color: #bbb; font-size: 80%; cursor: pointer; position: absolute; z-index: 110; top: 11px; left: 860px; } .slider .slider-lbl1 { left: 60px; } .slider .slider-lbl2 { left: 197px; } .slider .slider-lbl3 { left: 356px; } .slider .slider-lbl4 { left: 520px; } .slider .slider-lbl5 { left: 705px; } .slider .slider-lbl6 { left: 850px; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } .logo { position:absolute; margin-left: 25px; font-size: 40px; line-height: 30px; color: #000; top: -30px; } .socialIcons { float: right; margin-left: 25px; margin-top: 5px; padding-right: 25px; } --> </style> <!-- updated to jQ 1.2.6 and UI 1.5.2 2008-11-28 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var container = $('div.sliderGallery'); var ul = $('ul', container); var itemsWidth = ul.innerWidth() - container.outerWidth(); $('.slider', container).slider({ min: 0, max: itemsWidth, handle: '.handle', stop: function (event, ui) { ul.animate({'left' : ui.value * -1}, 1000); }, slide: function (event, ui) { ul.css('left', ui.value * -1); } }); }; </script> </head> <body> <div id="container"> <div class="sliderGallery"> <span class="socialIcons"><img src="img/facebook.png" width="70" height="72" alt="facebook" /> <img src="img/twitter.png" width="70" height="72" alt="twitter" /> <img src="img/youtube.png" width="70" height="72" alt="youtube" /></span> <div id="logo"><p class="logo">The<br />Pistolettos</p></div> <ul> <li><a href="bio.html"><img class="pb-airportexpress" src="img/bio.png" /></a></li> <li><a href="gigs.html"><img src="img/gigs.png" /></a></li> <li><a href="news.html"><img src="img/news.png" /></a></li> <li><a href="listen.html"><img src="img/listen.png" /></a></li> <li><a href="gallery.html"><img src="img/gallery.png" /></a></li> <li><a href="contact.html"><img src="img/contact.png" /></a></li> </ul> <div class="slider"> <div class="handle"></div> <span class="slider-lbl1">Bio</span> <span class="slider-lbl2">Gigs</span> <span class="slider-lbl3">News</span> <span class="slider-lbl4">Listen</span> <span class="slider-lbl5">Gallery</span> <span class="slider-lbl6">Contact</span> </div> </div> </div> </body> </html> This post has been edited by johnny.isaacs: Dec 7 2011, 09:25 AM |
pandy |
Dec 7 2011, 02:14 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Can you post the link to the page so we can see what it looks like?
|
johnny.isaacs |
Dec 12 2011, 04:58 AM
Post
#3
|
Group: Members Posts: 2 Joined: 7-December 11 Member No.: 16,017 |
Can you post the link to the page so we can see what it looks like? Hi Pandy, The page isn't live yet but I can send you the files. Rather annoyingly it seems that it also affects all other rollover images within the page so the social icons that I have put at the top of the page are just static and this is not very user friendly in my opinion. Very aggravating. Couldn't upload the files on here but I can send them via we transfer or something if you would like to see them. Johnny |
Lo-Fi Version | Time is now: 23rd April 2024 - 09:12 PM |