Sujet Précédent Sujet Suivant

Aide à creer une page Web

Fermé
max.02 - 23 nov. 2007 à 16:10
sunbest Messages postés 1 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 18 juin 2008 - 18 juin 2008 à 13:36
Bonjour,

Je concois une page web avec Webexpert 6 , je n'arrive pas a trouver la technique pour terminer ma page , je m'explique :
j'ai creer une page qui represente la carte de france et je voudrais que lorsque la souris passe sur un point precis de la carte (sur une ville) cela mette un texte et une photo en surbrillance c'est a dire sans changer la page qui doit rester en fond d'ecran.
J'ai bien trouver la maniere d'integrer la photo sous des coordonnees x et y de pointer les endroits precis mais le soucis est , que je dois cliquer sur l'endroit et cela m'envoit sur une autre page ce que je ne veux pas ( je crois que cela s'appele un rollover ce que je veux faire).

Je vous remercie par avance de vos reponses en esperant qu'il y est sur le forum un pro utilisant Webexpert 6

Max
A voir également:

17 réponses

Réponse 1 / 17
Irresistibledemon Messages postés 97 Date d'inscription mardi 31 mai 2005 Statut Membre Dernière intervention 3 décembre 2011 9
23 nov. 2007 à 16:17
L'evenement s'appelle effectivement RollOver mais dans le Web on parlera plus de onmouseover onmouseout
Est ce que ta carte est entierment découpé ?
Utilises tu une map ?
0
Réponse 2 / 17
max.02
23 nov. 2007 à 16:48
bonjour

merci de m'aider

c'est ma premiere réalisation et je decouvre Webexpert 6 , ma carte est en JPG faites avec paint shop pro je l'ai inseré dans une page
Entierement decoupé , il y a 22 villes représentées par un point , donc 22 decoupages , si j'ai bien compris la question .

Utiliser un map c'est a dire ?
0
Réponse 3 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
26 nov. 2007 à 15:11
SOS je ne trouve pas la commande pour faire un rollover , pourtant ca me parait assez simple a faire !!! ..
si un pro pouvez me poster un exemple pour une de mes villes , sachant que ma carte en fond de plan s'appele "carte.jpg" et que pour la ville ex : lille.jpg .
Faut il que j'insere ma carte sous forme de coordonnées et que pour chaque ville je donne des coordonnées precises ( ca je sais faire )

c'est ma premiere page je suis plus que novice dans ce domaine , vous remerciant par avance.
0
Réponse 4 / 17
Irresistibledemon Messages postés 97 Date d'inscription mardi 31 mai 2005 Statut Membre Dernière intervention 3 décembre 2011 9
26 nov. 2007 à 16:52
Si elle est découpé tant mieux !!
c'est exactement ça qu'il fallait faire !
Maintenant chaque image doit être appelé 
<img src="chemin_vers_image" name="img+_num_de_limage_" title="nom_de_la_ville" onmouseover="javascript:fonction_qui_affiche("img+_num_de_limage_");" onmouseout="javascript:fonction_qui_cache();" />


fonction_qui_affiche(...) étant la fonction que tu as déjà crée
fonction_qui_cache() est la fonction qui cache toute les descriptions + photo
0

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

Posez votre question
Réponse 5 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
27 nov. 2007 à 16:12
aie aie , je crois que j'ai pas compris le decoupage comme toi tu l'entends ..
voila ce que j'ai dans mon fichier , uniquement le fond de plan et c'est tout .

<head>
<img src="carte.jpg" border="0" width="866" height="785" alt="" />
<title></title>
</head>
<body>
</body>
</html>

maintenant comment placer les images sur ce fond de plan sachant que si j'ai tout compris :

je place " point1.gif " sur le fond de plan , je passe la souris sur point1 et j'ai " ville.jpg " qui apparait sans que le fond de plan bouge ..

maintenant faut il un plan en coordonnées x y comme ce qui suit .
head>
<map name="carte">
<img src="carte.jpg" border="0" width="866" height="785" alt="" align="middle" / usemap="#carte">
<area shape="circle" coords="435,243,10" href="lille.jpg"></map>
<title></title>
</head>
<body>
</body>
</html>

le probleme c que je dois cliquez sur le cercle et je passe sur une autre page

<img src="carte.htlm" name="img+point1.gif" title="lille.jpg" onmouseover="javascript <== c'est ca la bonne ligne une fois les " pointgif creer "

ca fait que 3 jours que je me suis lancé ds le webmastering y a pas de soucis c'est un metier .. loll

merci
0
Réponse 6 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
28 nov. 2007 à 15:19
SALUT

je suis arrivé a placer ma carte en fond de plan , ce que j'ai posté en haut est faux .. loll je decouvre .
par contre j'ai créer un " bouton1.gif " que je veux placer a des coordonnées precises pour pouvoir par la suite faire mon rollover a cet endroit , j'arrive pas le placer il reste en haut a gauche border "0".

merci
0
Réponse 7 / 17
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
28 nov. 2007 à 15:27
Bonjour,

Pour placer précisément une image (ton bouton1.gif, en l'occurence) :
<img src="bouton1.gif" style="position:absolute; left:125px; top:50px;" />

A répéter autant de fois que tu as de villes (22, donc), en changeant à chaque fois les valeurs de left et top qui représentent respectivement la distance, en pixel, avec le bord gauche de la page et le bord du haut.

Et c'est sur cette image que tu appliques, comme le préconise IrresistibleDemon, les événements onmouseover et onmouseout.

Xavier
0
Réponse 8 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
29 nov. 2007 à 13:02
ok merci ca fonctionne nickel, seulement quand je lance le visionneur interne le point gif est nickel a sa place par contre quand je lance le navigateur externe la je suis completement a coté .
Que faut il faire ? Qui est le bon externe ou interne

merci

max
0
Réponse 9 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
29 nov. 2007 à 14:32
j'ai bcp de mal à m'en sortir , je post mon fichier, le rollover veut pas fonctionner .
je post ce que j'ai fait


<head>
<img src="puce.gif" style="position:absolute; left:645px; top:302px;"/>
<img src="puce1.gif" style="position:absolute; left:396px; top:632px;"/>
<style type="text/css">

script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "images/b1.jpg";
end -->
</script>

<!--
body {
color:black;
background-color:silver;
background-image: url(carte.jpg);
background-repeat: no-repeat;
background-position:center center;
background-attachment:fixed;
}
-->

<a href="#" onmouseover="bouton.src"='images/b1.jpg';"onmouseout="bouton.src"='images/puce.gif';"></a>

</style>

</head>

</body

</body>

le tout c'est que je vais avoir 22 puce.gif à mettre ( puce1 , puce 2 puce 3 ect...) qui corresponderont en rollover à ( b1 , b2 ,b3 .jpg )

qui peut me donner un exemple sur les 3 premiers je me debrouillerais pour les 20 autres

merci , merci , merci

max.02 ou un mec qui se noie dans webexpert6 ...( balancez moi une bouée tête de canard)
0
Réponse 10 / 17
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
29 nov. 2007 à 16:18
Bonjour,

Le problème, je pense, vient de là :

background-position:center center;

En effet, si l'image est centrée, alors elle va bouger en fonction de la taille de la fenêtre ! Fais l'expérience, dans internet explorer, redimensionne ta fenêtre et tu verras...

Je te conseille plutôt de figer l'image en haut à gauche, tu devrais avoir nettement moins de problèmes.

Ensuite, si toutes les "puces" sont en fait la même image, tu n'es pas obligé de la dupliquer 22 fois, tu peux appeler tout le temps la même.

Voilà donc le code que cela ferait : 
<html>
    <head>
        <script language="JavaScript">
                function show(fichier)
                {
                    var img = document.getElementById("image_ville");
                    img.src = fichier;
                    img.style.display = "";
                }

                function hide()
                {
                    document.getElementById("image_ville").style.display="none";
                }
        </script>

        <style type="text/css">
            body {
                color:black;
                background-color:silver;
                background-image: url(carte.jpg);
                background-repeat: no-repeat;
                background-position:top left;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <img src="puce.gif" style="position:absolute; left:645px; top:302px;" onmouseover="show('lille.jpg');" onmouseout="hide()"/>
        <img src="puce.gif" style="position:absolute; left:396px; top:632px;" onmouseover="show('rennes.jpg');" onmouseout="hide()"/>
        <img src="puce.gif" style="position:absolute; left:226px; top:632px;" onmouseover="show('paris.jpg');" onmouseout="hide()"/>
        <img src="puce.gif" style="position:absolute; left:396px; top:500px;" onmouseover="show('marseille.jpg');" onmouseout="hide()"/>
        <img src="puce.gif" style="position:absolute; left:600px; top:632px;" onmouseover="show('nice.jpg');" onmouseout="hide()"/>
<!-- etc. -->

        <img id="image_ville" src="" style="display:none; position:absolute; left:50px; top:50px; z-index:10;" />
    </body>
</html>
En gros, pour rajouter une ville, il te suffit de rajouter une ligne de ce type :
<img src="puce.gif" style="position:absolute; left:600px; top:632px;" onmouseover="show('nice.jpg');" onmouseout="hide()"/>

En ne modifiant que le nom de la photo et la position.

Qu'en penses-tu ?

Xavier
0
Réponse 11 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
29 nov. 2007 à 17:35
merci Xavier

je vais tester ce des Lundi car je suis en conges . je suis arrivé a faire un rollover mais ca rester dans le coin en haut à gauche

bon week end , merci encore , je te tiens au courant.

Max
0
Réponse 12 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
29 nov. 2007 à 17:38
re Xavier

j'oubliais qu'entends tu par " image_ville " ?

merci
0
Réponse 13 / 17
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
30 nov. 2007 à 13:48
"image_ville" est le nom, arbitraire, que je donne à l'objet Image (<img>) qui va afficher les différentes images des villes.
Le principe est le suivant :
lorsque la souris passe sur une ville, l'objet image_ville change d'url et s'affiche (fonction show() )
lorsque la souris quitte une ville, l'objet en question disparait. (fonction hide() )
0
Réponse 14 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
3 déc. 2007 à 13:58
salut Xavier

ca fonctionne impec , je te remercie enormement , juste 2 questions

1) ca fonctionne nikel quand je lance le visionneur interne mais ca ne fonctionne pas quand je lance le navigateur
externe

2) j'ai voulu mettre 2 banieres pour combler le vide en bas et sur le coté droit de ma page , a priori en background ca ne fonctionne pas j'ai qu'un fichier qui s'affiche , pour resoudre le pb j'ai rajouter 2 lignes comme ca

<img src="images/baniereverti.jpg" style="position:absolute; left:0px; top:790px;" />

est ce que cela va fonctionner ?

je te remercie bcp de ton aide

a bientot

Max
0
Réponse 15 / 17
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
3 déc. 2007 à 15:33
Quand tu dis « ça ne fonctionne pas », c'est à dire ? Il se passe quoi ? Tu as un message d'erreur, un comportement différent ?
Si tu utilises Internet Explorer, est-ce que tu as un petit panneau jaune tout en bas à gauche de la fenêtre ? Si oui, clique dessus pour voir quelle est l'erreur.
Si tu utilises Firefox, ouvre la console d'erreur, située dans le menu « outils ».

Si tu as la possibilité de mettre tout ça sur internet, fais-le et donne-moi l'adresse, ce sera encore le plus simple !

Xavier
0
Réponse 16 / 17
max.02 Messages postés 15 Date d'inscription vendredi 23 novembre 2007 Statut Membre Dernière intervention 13 juin 2008 2
3 déc. 2007 à 17:21
en fait j'ai pas testé la page reellement sur le net via un site , je viens d'installer filezilla je vais le faire
en fait quand je lance le navigateur externe , la page s'affiche mais le rollover ne fonctionne pas ce qui est normal d'ailleurs puisque c'est une page de visualisation loll ...

desolé je debute , je suis un tantinet paumé

merci de ta patience

Max
0
Réponse 17 / 17
sunbest Messages postés 1 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 18 juin 2008
18 juin 2008 à 13:36
Bonjour a tous. Je suis présentement en train de fabriquer ma premiere page web ( comme projet d'été ) et j'utilise web expert6. je sais que se n'est pas le bon programe mais bon. Je voudrait savoir comment on fait pour mettre les vidéo que mon frere fabrique avec le programe windows movie maker sur ma page web. Merci
0

Discussions similaires

créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses