High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

CARTE DE FRANCE ANIMEE

Dernière réponse le 17 jui 2009 à 11:51:01 bakkus, le 2 jui 2009 à 16:04:02 
 Signaler ce message aux modérateurs

Bonjour,

je cherche à faire sur mon site internet une carte qui ressemblerait à ce qui est dans ce site:http://www.ebcmedical.com/ , cliquer sur Réseau national .

Je crois que leur site est fait en flash du cout l'animation avec la carte aussi .

Je veux faire la même chose ,mais pas avec du flash.

VOUS SAVEZ COMMENT FAIRE,??

le code m'aiderait beaucoup

MERCI

Configuration: Windows XP
Firefox 3.0.11

Posez votre question Répondre

1

Dalida, le 2 jui 2009 à 16:15:58

Salut,

tu peux le faire avec une <img/>, une <map> et du Javascript.

un exemple, y aura que le texte avec la photo de la personne à ajouter en plus.
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

2

bakkus, le 2 jui 2009 à 17:39:29

Merci de m'avoir répondu rapidement.

j'ai vu le liens ,il y a effectivement ce qui correspond à ce que je veux faire ,notamment le deuxième exemple.

Mais pour un débutant comme moi je crois que ça va être vraiment délicat de mettre en place ça .

tu n'as pas quelque chose de plus précis qui m'enlèverait le soucis de la programmation ?.


Merci

   
Répondre à bakkus

3

Dalida, le 2 jui 2009 à 17:44:39

tu n'as pas quelque chose de plus précis qui m'enlèverait le soucis de la programmation ?
ben les codes sources sont accessibles, si tu as des questions plus précises je peux t'aiguiller.
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

4

bakkus, le 12 jui 2009 à 16:39:05

Bonjour ,

j'ai essayer de faire quelque chose avec ton code mais je n'ai rien qui s'affiche sur ma page .
Mon code est le suivant:
===================================================
<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
html {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 100%;
margin : 0;
padding : 2em 0;
}
body {
width : 772px;
margin : 0 auto;
padding : 0;
font-size : 0.8em;
}
img {
border-style : none;
}
object {
background-color : #fff;
color : #666;
border : 1px dashed #666;
overflow : auto;
}
</style>
<script type="text/javascript">
if (document.images)
{
preload = false;

url = new Array();
url[0] ="../images/images_page_produit/produits/images_gf/101K.jpg"
url[1] = "../images/images_page_produit/produits/images_gf/102K.jpg";
url[2] = "../images/images_page_produit/produits/images_gf/103K.jpg";
url[3] = "../images/images_page_produit/produits/images_gf/104K.jpg";

var i = 0;
for(i=0; i<4; i++)
{
tmp = new Image(640, 480)
tmp.src = url[i];
}
preload = true;
}
function changeImage(img_index) {

if (document.images && (preload == true)) {
document.getElementById("plan").src = url[img_index];
}

}
</script>

</body>
</html>

===================================================

je ne sais pas où se trouve le pb ?

Merci .

   
Répondre à bakkus

5

Dalida, le 14 jui 2009 à 13:43:34
  • +1

Salut,

je ne sais pas où se trouve le pb ?
pour l'instant y a pas de problème !
-;o)

le principe c'est une image HTML (<img/>) avec une carte des zones actives (<map><area/>[...]</map>).
en plus, on ajoute le comportement (l'affichage d'autres images) avec du Javascript.

pour l'instant tu as le comportement mais pas l'image de base !

il faut en premier faire afficher ton image par défaut avec quelque chose du genre (si c'est bien le fichier "100K.jpg" et il faudra ajouter les dimensions et le texte alternatif) : 

<body>
	<p><img id="plan" usemap="#map" src="../images/images_page_produit/produits/images_gf/101K.jpg" width="" height="" alt=""/></p>
</body>

en deuxième il faut ajouter les zones réactives, commence par une seule, on va prendre un rectangle de 60×20 en haut à gauche (enfin je crois parce que je tape ça en "live"…) : 
<body>
	<p>
		<map name="map" id="map">
			<area shape="rect" coords="0, 0, 60, 20"
			alt="" href=""
			onmouseover="changeImage(1); return false;"
			onmouseout="changeImage(0); return false;" />
		</map>
	</p>
	<p><img id="plan" usemap="#map" src="../images/images_page_produit/produits/images_gf/101K.jpg" width="" height="" alt=""/></p>
</body>

est-ce que tu commences à voir la technique ?
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

6

 bakkus, le 17 jui 2009 à 11:51:01

Merci infiniment pour ton aide ,je vais essayer d'appliquer ce que tu m'a dit.

Je te tiens au courant

Encore merci.

   
Répondre à bakkus
Posez votre question Répondre
Ils ont besoin de votre aide