Moin,
hab eine Frage zu einem Script:
Und zwar möchte ich eine Grafik als Hover Effekt in einer bestimmten Position über dem Button plazieren.
Leider versagen meine Künste und ich bekomme es nicht hin, das Image richtig zu positionieren...
Weiß jemand wodran ich schrauben muss?
Danke schon mal!
Matthias
hab eine Frage zu einem Script:
Code:
<!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>Animated Menu Hover 1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-450"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-450"}, "fast");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
margin: 500px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(button.gif) no-repeat center center;
}
.menu li em {
width: 701px;
height: 401px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
background-image: url(biere.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="http://www.irgendwas.com">Irgendwas</a><em></em></li>
</ul>
</body>
</html>
Und zwar möchte ich eine Grafik als Hover Effekt in einer bestimmten Position über dem Button plazieren.
Leider versagen meine Künste und ich bekomme es nicht hin, das Image richtig zu positionieren...
Weiß jemand wodran ich schrauben muss?
Danke schon mal!
Matthias