11487 sujets

JavaScript, DOM et API Web HTML5

Afficher une bulle à une "image-url" ?

bonjour,

j'ai trouvé sur le Net un jquery-tutorials que je n'arrive pas à adapter à mon blog

celui-ci permet de faire apparaitre de façon esthétique une bulle contenant le "title" d'un lien

voici le code en question


<!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 2</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

	$(".menu2 a").append("<em></em>");
	
	$(".menu2 a").hover(function() {
		$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
		var hoverText = $(this).attr("title");
	    $(this).find("em").text(hoverText);
	}, function() {
		$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});


});
</script>

<style type="text/css">
body {
	margin: 10px auto;
	width: 570px;
	font: 80%/120% Arial, Helvetica, sans-serif;
}
.menu2 {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;
}
.menu2 li {
	padding: 0;
	margin: 0 2px;
	float: left;
	position: relative;
	text-align: center;
}
.menu2 a {
	padding: 14px 10px;
	display: block;
	color: #000000;
	width: 144px;
	text-decoration: none;
	font-weight: bold;
	background: url(images/button.gif) no-repeat center center;
}
.menu2 li em {
	font-weight: normal;
	background: url(images/hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	left: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none;
}
</style>
</head>

<body>
<ul class="menu2">
	<li>
		<a href="http://www.webdesignerwall.com" title="Go to homepage">Home</a>		
	</li>
	<li>
		<a href="http://www.webdesignerwall.com/about/" title="Find out who I am">About</a>
	</li>
	<li>
		<a href="http://feeds.feedburner.com/WebDesignerWall" title="Subscribe RSS feeds">Subscribe RSS</a>
	</li>
</ul>
</body>
</html>


Mon problème est que je souhaiterai utiliser ce code sur un image qui n'est pas dans un <li>

voici mon code


<div id="widget">

		<a href="<?php echo get_option('home'); ?>" title="accueil" ><img src="./wp-content/themes/blueprint/images/home.png" alt="acceuil"/></a> 		
		<a href="./wp-admin/post-new.php" title="ecrire" ><img src="./wp-content/themes/blueprint/images/ecrire.png" alt="ecrire"/></a> 
		<a href="./wp-admin/edit.php?page=s2_posts" title="Mail" ><img src="./wp-content/themes/blueprint/images/mail.png" alt="mail"/></a> 
		<a href="<?php echo wp_logout_url(); ?>" title="deconnexion" ><img src="./wp-content/themes/blueprint/images/deconnexion.png" alt="deconnexion"/></a> 

	</div>


pensez vous qu'il est possible d'adapter le tutorial à ma demande ?

merci pou votre aide

++
Modifié par billboc (29 Sep 2010 - 15:36)
Je verrais bien un 
#widget a {
directement, à la place de 
.menu2 li {
mais je ne suis pas sûre (je fais de manière théorique, en remplaçant les éléments du tuto par ceux de ton code. Et surtout cela poserait problème, vu qu'il y a un 
.menu2 li a {
également.
Mais je suis en train de me dire que tu as dû tester...

Apparemment tu utilises Wordpress : pas moyen de mettre tes a dans d'autres objets ? Est-ce le widget Liens par défaut ? A quoi est-ce ça ressemble actuellement Smiley cligne (c'est-à-dire, as-tu un lien à nous fournir) ?
salut merci pour ta réponse !

je développe le blog en local donc pas de lien à proposer hélas
pour le moment je laisse tomber car ma structure est trop éloignée de l'exemple donné et je n'ai pas le temps de tout changé... (il faudrait placer des "em" il semblerait... enfin bref ! on verra ça lors d'une longue soirée d'hiver tranquille au coin du feu... Smiley cligne )
Sujet clos
Aller à