[Résolu] Infobulles personnalisées sur ImageMap

Bonjour @ tous !

Je dois créer sur une imageMap des info-bulles de une ou plusieurs lignes sur le survol des zones réactives de la carte et qui se placent près de ma zone réactive. Les zones réactives sont faites. Mais je ne souhaite pas que mes infobulles aient l'aspect classique de bulles bien carrées à fond jaune. Je cherche à faire des bulles pourvues d'une couleur transparente qui soient agréables à l'oeil... Tout mon problème vient du fait que je n'ai ni le droit d'utiliser Java ni CSS 3.0. En effet, le site intranet sur lequel je dois faire la carte est géré grâce au fameux gestionnaire de contenu SPIP. Egalement, je ne peux pas modifier ou créer une nouvelle feuille pour l'intégrer ensuite dans les squelettes de SPIP....

Celà fait un certain moment que je cherche un moyen de faire ceci, mais jusqu'à maintenant rien ne fonctionne vraiment lorsque j'ouvre ensuite la page sous SPIP....

Pourriez-vous m'aider s'il vous plaît ? D'avance, merci beaucoup @ tous.
Modifié par Zhebulhon (29 Jan 2010 - 07:59)

Zhebulhon a écrit :
Tout mon problème vient du fait que je n'ai ni le droit d'utiliser Java ni CSS 3.0.

Il te reste donc JavaScript (à moins que par JAVA (langage de programmation côté serveur) tu n'ai voulu parlé de JavaScript, auquel cas, il faut faire attention car ce sont deux langages totalement différents).

Sans ni JS, ni CSS3, tu aura du mal à faire les infobulle que tu souhaites. Normalement SPIP permet de rajouter des scripts (ou feuilles de styles) dans les templates des pages.

Bonjour Laurie-Anne et merci pour ta réponse rapide...

Effectivement, je me suis fourvoyée, je voulais dire JavaScript.... l'animal n'en veut pas, il me met les codes incriminés au dessus de ma carte....

N'aurais-tu pas un petit code d'exemple sur une carte de ce genre d'infos-bulles STP, car je ne suis pas très fortiche en CSS, et oui, je débute timidement, cela me permettrait de m'en inspirer, car je n'ai trouvé que des exemples la plupart du temps pour des infos-bulles sur des liens placés dans des paragraphes... Ce serait vraiment très gentil....

Merci beaucoup d'avance.

Bonsoir,

Il est sans doute trop tard pour te répondre mais je t'ai mis un exemple en ligne (CSS 2.1) pour des info-bulles simulant les area-shapes à cette adresse. Tu peux récupérer l'exemple complet en zip ici (images comprises). C'est pas super mais c'est une bonne base de réflexion. J'ai pas mis de commentaires car le code source coule… de source ! Y'a 6 étapes (donc 6 pages).

Salut

Bonjour Auréance !

Ohhhh ! Absolument génial ! C'est exactement ce que je recherche... Merci beaucoup Auréance, du soin et de la patience que tu as pris pour me répondre... Je vais de ce pas adapter les merveilleux codes si précieux à ma carte et enrichir par la même occasion le peu de connaissances que j'ai en la matière....

Encore merci !

Salut Zhebulhon,

Content que ça te plaise.

Heureusement qu'une petite fée est venue me rappeler durant mon sommeil qu'avant j'arrivais à avoir le haut et le bas des infos-bulles. Ça y'est, l'étape 6 est corrigée. Si tu as téléchargé des choses… tu peux jeter et remplacer par la nouvelle mouture. Les adresses restent inchangées.

Sinon, je voulais te dire qu'il existe dans la précieuse barre d'outil 'Web Developer" un menu "Divers" dans lequel on trouve un outil de mesure très pratique pour réaliser ce genre de chose (même indispensable).

<édit
Quand les liens pointent nulle part on peut mettre <a> seulement au lieu de <a href="">. En tout cas, le validateur ne m'indique pas d'erreur.
/>
Modifié par Aureance (27 Jan 2010 - 16:47)

Merci beaucoup pour tes corrections !

Mais j'ai encore une petite question :

a écrit :
Sinon, je voulais te dire qu'il existe dans la précieuse barre d'outil 'Web Developer" un menu "Divers" dans lequel on trouve un outil de mesure très pratique pour réaliser ce genre de chose (même indispensable).

De quel logiciel parle-tu (et version) lorsque tu me signale cette fameuse barre d'outils ? j'avoue que je n'ai pas trouvé....

Merci beaucoup d'avance !

Je parlais d'une barre d'outils qui s'ajoute aux navigateurs Mozilla et FireFox.
Attention - Cette barre d'outils n'est pas encore adaptée à la toute dernière version FireFox (la Version 6)

C'est un truc INDISPENSABLE pour coder ou analyser des pages web. Ça se trouve ici : Web Developer : http://joliclic.free.fr/mozilla/webdeveloper/

Super ! Merci beaucoup !

http://gilloo.com/forums/images/zebulon.jpg
De rien, je ne l'ai pas fait que pour toi : ça m'a fait un bon exercice !

Je ne suis pas modérateur mais je te conseille malgré tout d'éditer le titre de ton premier post : indiquer [Résolu] devant le sujet. Bye Bye !
Modifié par Aureance (27 Jan 2010 - 16:54)

Bonjour Auréance !

Après avoir bien étudié tous tes documents et exemples, j'essaie d'adapter le code à mon image.... Rien qu'au niveau du placement sur la carte des balises li id, je m'arrache les cheveux avec Dreamweaver CS3. J'en déplace une pour la mettre correctement sur la carte, les autres se déplacent en même temps. Comment les as -tu placées, ne faudrait-il pas mettre une position relative ? Je vais essayer, mais si tu as des infos, elles seront les bienvenues....

Merci beaucoup d'avance....

Bonjour,

Extrait du CSS de l'étape 1 :

		/*=======================( commun à tous les liens : a
		*/
		li a {
			display: block;
			position: absolute; /* par rapport à UL */
			width: 25px; height: 25px;
			font-weight: bold;
			text-decoration: none;
			outline: 1px dashed white;
		}
		li a .info_bulle {
			display:none;
		}



		/*=======================( positionnements particuliers : a
		*/
		li#info_1 a {
			margin-top: 15px;
			margin-left: 73px;
		}
		li#info_2 a {
			margin-top: 157px;
			margin-left: 186px;
		}
		li#info_3 a {
			margin-top: 115px;
			margin-left: 427px;
		}

C'est là qu'est utile l'outil de mesure de la barre WebDeveloper pour savoir où se trouvent les angles supérieurs gauche des liens.

Bonjour Auréance...

Finalement, j'ai repris hier tout mon code à zéro, ait trouvé quelques boulettes au passage et j'ai réussi laborieusement à replacer mes info-bulles avec Dreamweaver.... Ce ne fut pas sans quelques efforts certains mais j'ai réussi.... Excuses-moi de t'avoir dérangé....

Merci beaucoup pour ton aide salvatrice....

Bonjour. Tout d'abord merci pour votre discussion qui m'a été très utile ayant la même problématique. La proposition d'Auréance me convenait parfaitement (merci beaucoup) sauf que...

Après avoir programmé toute ma page HTML, je me rends compte que les info-bulles n'apparaissent que sous Firefox, cela ne fonctionne pas sous Internet Explorer (testé sous IE 7) .

Auriez-vous une solution pour rendre ces infos bulles compatibles sous IE ?

Merci d'avance !