The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Rollover Images, Rollover not working
johnny.isaacs
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
johnny.isaacs
post Dec 12 2011, 04:58 AM
Post #3





Group: Members
Posts: 2
Joined: 7-December 11
Member No.: 16,017
QUOTE(pandy @ Dec 7 2011, 02:14 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 09:59 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC