Rollover effect

[lerrie]

Ik wil graag een effect creëren als mensen over bepaalde plaatjes heen gaan dat er een kleine ballon boven komt met info zoals hier gedaan is http://www.kathryncorneli.us/about bij de social media buttons.

Groeten

 

[That Guy]

Okay, dat's goed om te weten.



Ofwel: wat is nu precies je vraag?

 

[lerrie]

Sorry vergeten er neer te zetten maar lijkt me vrij duidelijk Hoe dit ik dit?

 

[That Guy]

Dat staat gewoon in de code:[JS] $(".social-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-90"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-100"}, "fast");
});
[/JS]

<div class="social-popup">
	<ul>
		<li>
			<a href="http://www.facebook.com/kathryncornelius" id="fb" target="_blank">Facebook</a><em>Learn more about me on Facebook.</em></li>
		<li>
			<a href="http://www.twitter.com/kcornelius" id="twitter" target="_blank">Twitter</a><em>Follow me on Twitter &amp; keep up with my tweets.</em></li>

		<li>
			<a href="http://forrst.com/people/kcornelius/" id="forrst" target="_blank">Forrst</a><em>Visit the site where I share code with my peers.</em></li>
		<li class="last">
			<a href="http://www.andadv.com" id="anderson" target="_blank">Anderson</a><em>Learn about where I work, Anderson Marketing.</em></li>
	</ul>
</div>

/* CSS */



div.social-popup {
	float: left;
	width: 674px;
	margin: 25px 0;
	position: relative;
	z-index: 1000000;
}
div.social-popup ul {
	margin: 0px; 
	padding: 0px !important;
	width: 674px;
	float: left;
}
div.social-popup ul li {
	list-style-type: none;
	margin: 0 10px 0 0;
	padding: 0px !important;
	float: left;
	display: inline;
	position: relative;
	line-height: 14px !important;
	width: 159px;
}
div.social-popup ul li a {
	border-bottom: 0 none !important;
}
div.social-popup ul li.last {
	margin: 0px;
}
div.social-popup em {
	background: url(../i/tooltip.png) no-repeat;
	width: 119px;
	height: 68px;
	position: absolute;
	top: -100px;
	left: -0px;
	text-align: center;
	/*text-indent: -9999px;*/
	z-index: 2;
	display: none;
	color: #fff;
	/*text-shadow: 1px 1px 1px #000	;*/
	padding: 15px 20px 10px 20px;
}
.social-popup #fb {
	width: 159px;
	height: 31px;
	background: url(../i/facebook.jpg) no-repeat;
	text-indent: -9999px;
	margin: 0 auto;
	display: block;
}
.social-popup #twitter {
	width: 159px;
	height: 31px;
	background: url(../i/twitter.jpg) no-repeat;
	text-indent: -9999px;
	margin: 0 auto;
	display: block;
}
.social-popup #forrst {
	width: 159px;
	height: 31px;
	background: url(../i/forrst.jpg) no-repeat;
	text-indent: -9999px;
	margin: 0 auto;
	display: block;
}
.social-popup #digett {
	width: 159px;
	height: 31px;
	background: url(../i/digett.jpg) no-repeat;
	text-indent: -9999px;
	margin: 0 auto;
	display: block;
}
.social-popup #anderson {
	background: url(../i/anderson.jpg) no-repeat;
	width: 159px;
	height: 31px;
	text-indent: -9999px;
	margin: 0 auto;
	display: block;
	
}

Ohja, en dit script gebruikt jQuery. Dus dat heb je er ook nog bij nodig.


[edit]damn. Dit is echt een verschrikkelijk slechte site. 21+ css files, 11+ js files? En ook nog allemaal JS in de html? Dubbele tracking code? T_T[/edit]

 

[lerrie]

Bedankt man! Whaha ja zag het al in de code Aardig veel css files wtf