Faire un lien dans une image

Fermé
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 - 13 mai 2010 à 10:26
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 - 13 mai 2010 à 23:09
Bonjour,

J'ai crée avec un logiciel de dessin une barre de navigation (comme ce que vous voyez en haut avec "accueil", "astuces" etc...). Le problème c'est que ça fait un seul block, c'est assez tordu et j'ai fait aucun lien donc si je fait un lien img évidemment j'aurai qu'un seul lien.
Alors voilà, exite-t-il une méthode pour transformer un morceau de l'image et pas l'image entière en lien ?
Ou suis-je obligé de découper l'image ?

Merci !

14 réponses

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 12:26
Tu peux faire ça avec les "map" en (x)HTML.
Mais je te conseil de faire un vrai découpage en XHTML/CSS, avec des motifs qui peuvent se répéter.
Tu dois avoir deux images ayant une largeur de 1px : une pour l'état "normal" et une pour l'état "survolé".

Si tu veux des exemples :
https://css.developpez.com/galerie/?page=menus-horizontaux#barre-navigation
1
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 13:49
" Et savez vous comment faire par exemple pour que les lettres du nom de mon groupe disparaissent quand on clique dessus pour laisser place à la présentation du groupe ? Où faut-il utiliser le flash ? "
C'est possible en Javascript, inutile de sortir Flash.

Pour les maps, utilise plutôt ce site :
https://www.image-maps.com/
1
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 19:43
C'est, comme je l'ai déjà dit, faisable en JS.
Et quand c'est faisable en JS, autant éviter le Flash (qui est lourd, propriétaire, mal référencé, qui n'est pas un standard du Web et qui nécessite un plugin).
Pour l'effet de déroulement, on peut le faire avec des frameworks comme JQuery.
Je vais te coder un exemple.
1
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 19:49
ok merci !
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
Modifié par avion-f16 le 13/05/2010 à 20:16
À mettre dans l'entête de ta page (entre <head> et </head>) :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".presentation div").hide();
	$(".presentation h3 a").click(function() {
		var div = $(this).parent().parent().children('div');
		if(div.is(':visible'))
			div.slideUp("fast");
		else
			div.slideDown("fast");
		
		return false;
	});
});
</script>


Et le code HTML :
<div class="presentation">
	<h3><a href="#">Guitariste</a></h3>
	<div>
		Blabla
	</div>
</div>

Tu n'as que "Guitariste" et "Blabla" à changer.
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
1
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 20:33
Ok génial je sens que je ça va être bien... Par contre juste histoire de dormir moins bête ce soir, comment ça marche ce petit bout de code ? Vous avez appelé un script déjà existant non ? Et il existe d'autres fonctions ? Comment les appeler et comment les trouver ?
En tous cas merci beaucoup !!
0
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 20:35
Par contre maintenant est-ce qu'il est possible de combiner les maps et ce script de déroulement, afin que lorsque je clique sur le guitariste de la photo sa présentation se mette à dérouler ? Et comment faire pour que le déroulement ne se produise que lorsque la souris passe par dessus, sans lien ?
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 22:47
Le mieux est, je pense, que tu apprennes le Javascript :-)
0
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 23:09
ok je vais m'y mettre. en tous cas merci pour tout !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
Modifié par Suan le 13/05/2010 à 12:43
Merci pour cette réponse rapide, mais le découpage risque de s'avérer compliqué car ma barre ne navigation n'est pas un rectangle, en fait comme c'est pour mon groupe de rock c'est un mot sur un fond où on voit le groupe et je voudrais que lorsque que l'internaute clique par exemple sur un membre du groupe il accède à la page du membre du groupe.
Par contre ça m'intéresse l'histoire d'état normal et survolé, j'ai jamais compris comment ça marchait.
Et savez vous comment faire par exemple pour que les lettres du nom de mon groupe disparaissent quand on clique dessus pour laisser place à la présentation du groupe ? Où faut-il utiliser le flash ?
Parce qu'après je me demandais étant donné que la page présentation est situées sur une autre page comment faire pour qu'elle apparaisse ainsi sur la même page sans utiliser de frame ?
Par contre pour les map j'ai essayé avec openoffice mais qu'en j'exporte en html ça marche pas !

Merci !
0
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
Modifié par Suan le 13/05/2010 à 14:02
Ok merci beaucoup pour le lien !
Et sinon pour faire disparaitre le nom du groupe quand on clique dessus et faire apparaître le contenu d'une autre page sans quitter la page et sans utiliser de frame, comment on fait ?
Je ne connais pas javascript donc si vous connaissez un site ou un logiciel...
Merci !!
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 14:08
Je ne connais pas de site ni de logiciel permettant de faire ça.
0
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 16:26
ah... Mais y a pas un script spécial ?
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 16:34
Non ...
0
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 16:35
Alors comment on fait ?!
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 16:36
Bah en Javascript, en codant ...
0
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 16:38
Justement, il doit y avoir un script spécial non ?
Ou alors c'est que des fonctions compliquées de 80000 lignes qu'il faut inventer soi-même ?
0
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
13 mai 2010 à 17:05
Ce que tu cherches à faire, c'est que quand on clique sur un texte, il soit remplacer par un autre ? Si ce n'est que ça, c'est faisable en même pas une dizaine de lignes ...
0
Suan Messages postés 59 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 14 mai 2010 12
13 mai 2010 à 17:27
Non pas vraiment... En fait c'est assez proche du flash...
Bah je voudrais juste que quand on clique par exemple sur le guitariste,
sa présentation apparaisse, de préférence avec un effet de déroulement, quelque chose comme ça avec le fond qui s'allonge pour s'adapter à la taille de la présentation...
0