Hælp til jquery hover.
Jeg sidder og arbejder på at lave en hover på mine billeder, og har brugt denne side: http://jobyj.in/adipoli/#how-to-useJeg kan dog ikke få det til at virke..
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CCC - Carnival Cruise</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="jScrollbar.jquery.css" media="screen" />
<link href="adipoli.css" rel="stylesheet" type="text/css"/>
<script src="jquery.adipoli.js" type="text/javascript"></script>
<script src="jquery.adipoli.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mousewheel.js"></script>
<script type="text/javascript" src="jScrollbar.jquery.js"></script>
<script type="text/javascript">
$('#billedhøjreccc1').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
</script>
<script>
$('#billedhøjreccc1').adipoli();
</script>
<script type="text/javascript">
$(document).ready(function(){
// simple jScrollbar plugin call
$('.jScrollbar4').jScrollbar();
// more complex jScrollbar plugin call
$('.jScrollbar').jScrollbar({
scrollStep : 25,
position : 'left',
showOnHover : true
});
});
</script>
</head><!--header-->
<body>
<div id="master">
<div id="logo">
<a href="ccc.html"><img src="billeder/ccc.png" border="0" alt="logo" width="370" height="459" title="Til forsiden" /></a>
</div><!--logo-->
<div id="menu">
<ul>
<li><a href="ccc.html" id="selected">Carnival Cruise</a></li><!--
--><li><a href="video.html" id="menu2">Video</a></li><!--
--><li><a href="flyers.html" id="menu3">Flyers</a></li><!--
--><li><a href="omcoma.html" id="menu4">Om Coma</a></li><!--
--><li><a href="tilmelding.html" id="menu5">Tilmelding</a></li><!--
--><li><a href="kontakt.html" id="menu6">Kontakt</a></li>
</ul>
</div><!--menu-->
<div id="boxforside"></div><!--boxforside-->
<div id="ikoner">
<a href="http://www.comaclub.dk/" target="_blank"><img src="billeder/kontaktcoma.png" height="44" width="44" border="0" alt="kontaktcoma" title="Coma Clubs website" /></a>
<a href="https://www.facebook.com/?ref=tn_tnmn#!/groups/477487178959067/" target="_blank"><img src="billeder/kontaktface.png" height="44" width="44" border="0" alt= "kontaktface" title="Coma Clubs Facebook" /></a>
<a href="https://twitter.com/ComaClubCph" target="_blank"><img src="billeder/kontakttwit.png" height="44" width="44" border="0" alt="kontakttwit" title="Coma Clubs Twitter" /></a>
</div><!--ikoner-->
<div id="musik">
<audio controls="controls">
<source src="millionvoices.mp3" type="audio/mpeg">
<embed height="50" width="100" src="millionvoices.mp3">
</audio>
</div><!--musik-->
<div id="cccoverskrift">
<img src="billeder/overskrift.png" height="70" width="298" border="0" alt="cccoverskrift" />
</div><!--cccoverskrift-->
<!-- Main container -->
<div class="jScrollbar4">
<!-- Scrolling content container -->
<div class="jScrollbar_mask">
<p>
<!-- Your long content here -->
Kom med på Noahs Party Ark, når vi lufter dig og alle dyrene til en farverig og anderledes (på den gode måde) karnevalsfest. Der vil være eksotiske dansere, dværge og så meget gak og gøgl at du tror det er løgn!<br /><br />
Hele hærligheden kommer til at foregå på partyskibet Spectrum. Temaet er derfor Noahs Ark, og det er derfor et krav, at du skal være klædt ud som et dyr, så vær kreativ og overrask - skil dig ud blandt Danmarks mest fantasifulde eksistenser. Vær ekstrem, afprøv grænser og slip hæmningerne! Føler vi, at du ikke har taget Coma's dresscode seriøst, forbeholder vi os retten til at hjælpe dig på vej i døren! Ønsker du ikke dette, gives pengene retur for billetten. Og så er du ytte og ikke inde! 'Du er ikke med til en Coma fest, du er en del af en Coma fest'.
<br /><br /><b>Line Up:</b><br />Nabiha - Lou Van - Peter Visti - Boy George - Tre'mendez<br />Sorte Slyngel - Leo Zero (UK) - Valentin Huedo (Space, Ibiza)<br />Allan skov & Casper Christensen - DJ Er Du Dum Eller Hvad<br />Kenneth Bager feat. mc Ena (Fagget Fairys) & Pelle (P6 Beat)<br /><br />
<b>Adgangskrav:</b> Du SKAL være klædt ud som et dyr på den ene eller den anden måde, ellers ingen adgang.
<br /><b>Location:</b> <a href="https://www.facebook.com/spektrumscandinavia#!/spektrumscandinavia?fref=ts" target="_blank">Skibet Spektrum.</a> Havnegade 39, 1058 København K, Danmark
<br /><b>Pris:</b> 250,- Køb billet på billetlugen <a href="http://www.billetlugen.dk/forside/" target="_blank">www.billetlugen.dk/coma</a>
<br /><b>Sponsorer:</b> <a href="https://www.facebook.com/spektrumscandinavia#!/spektrumscandinavia?fref=ts" target="_blank">Spektrum,</a><a href= "https://www.facebook.com/tempt?fref=ts#!/tempt?fref=ts" target="_blank">Tempt</a> og <a href="http://www.heineken.com/dk/AgeGateway.aspx" target="_blank">Heineken.</a>
<br /><b>Destinationen:</b> HEMMELIG.
<br /><b>Alder:</b> 18+
</p>
</div>
<!-- slider container -->
<div class="jScrollbar_draggable">
<!-- slider -->
<a href="#" class="draggable"></a>
</div>
<!-- don't forget to clear the floats -->
<div class="clr"></div>
</div>
<div id="billedhøjreccc1">
<img src="billeder/billedhøjreccc1.png" height="129" width="135" border="0" alt="billedhøjre" />
</div><!--billedhøjreccc1-->
<div id="billedhøjreccc2">
<img src="billeder/billedhøjreccc2.png" height="129" width="135" border="0" alt="billedhøjre" />
</div><!--billedhøjreccc2-->
<div id="billedhøjreccc3">
<img src="billeder/billedhøjreccc3.png" height="129" width="135" border="0" alt="billedhøjre" />
</div><!--billedhøjreccc3-->
</div><!--master-->
</body><!--body-->
</html><!--html-->
CSS:
@charset "utf-8";
/* CSS Document */
body {
background-image: url(billeder/bg.png);
background-repeat: no-repeat;
background-position: right;
}
#master {
width: 1024px;
height: 758px;
margin: auto;
padding: 0;
}
#indexmaster {
width: 1024px;
height: 600px;
margin: auto;
padding: 0;
}
#logo {
width: 370px;
height: 459px;
margin-left: auto;
margin-right: auto;
margin-top: -93px;
}
#startlogo {
width: 460px;
height: 571px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#menu {
margin-top: -105px;
text-align: center;
font-family: calibri, tahoma, verdana, arial;
font-size: 16px;
width: 800px;
padding: 0;
margin-left: auto;
margin-right: auto;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #000000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0.8;
}
#menu li {
display: inline-block;
}
#menu li a {
width: 120px;
padding-top: 3px;
padding-bottom: 4px;
display: block;
}
#menu1:hover,#menu2:hover,#menu3:hover,#menu4:hover,#menu5:hover,#menu6:hover,#menu7:hover {
color: #FFFFFF;
border-radius: 15px;
background-color: #FF0099;
}
#selected {
padding-bottom: 2px;
background-color: #FF0099;
color: #FFFFFF;
border-radius: 15px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
#boxforside {
background-color: #000000;
width: 990px;
height: 470px;
margin-left: auto;
margin-right: auto;
margin-top: 12px;
border: 3px solid #000000;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
#ikoner {
margin-top: -467px;
margin-left: 860px;
}
#boxkontakttekst {
height: 200px;
width: 378px;
color: #FFFFFF;
font-family: calibri, tahoma, verdana, arial;
font-size: 16px;
margin-top: 143px;
margin-left: 50px;
margin-right: auto;
}
#flyerforside {
margin-left: 50px;
margin-top: 75px;
}
#flyerbagside {
margin-top: -408px;
margin-left: 365px;
}
.videogallery {
margin-top: 74px;
margin-left: 45px;
}
.videogallery2 {
margin-top: 45px;
margin-left: 45px;
}
#musik {
margin-left: 611px;
margin-top: -130px;
}
b {
color: #FF0099;
}
#cccoverskrift {
position: absolute;
margin-left: 45px;
margin-top: 60px;
}
#omcomaoverskrift {
position: absolute;
margin-left: 46px;
margin-top: 74px;
}
#kontaktoverskrift {
position: absolute;
margin-left: 35px;
margin-top: 71px;
}
#billedhøjreccc1 {
margin-top: -368px;
margin-left: 863px;
}
#billedhøjreccc2 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjreccc3 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjrevideo1 {
margin-top: -377px;
margin-left: 863px;
}
#billedhøjrevideo2 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjrevideo3 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjreflyer1 {
margin-top: -375px;
margin-left: 863px;
}
#billedhøjreflyer2 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjreflyer3 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjrecoma1 {
margin-top: -368px;
margin-left: 863px;
}
#billedhøjrecoma2 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjrecoma3 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjretilmelding1 {
margin-top: 108px;
margin-left: 863px;
}
#billedhøjretilmelding2 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjretilmelding3 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjrekontakt1 {
margin-top: -235px;
margin-left: 863px;
}
#billedhøjrekontakt2 {
margin-top: 4px;
margin-left: 863px;
}
#billedhøjrekontakt3 {
margin-top: 4px;
margin-left: 863px;
}
Håber der er nogle der kan hjælpe! :)
