navigation avec image

Marsh Posté le 11-04-2006 à 10:56:06

Bonjour à tous,

je suis nulle en javascript...
Je souhaite faire une barre de navigation avec 1 seule image. Mon image se découpe en 9 partie (grace à une map)

Je veux que lorsque la souris passe sur mon 1er fragment de map, une image se charge en rollover + quand je clique que mon image change et qu'une frame charge mon document cible.

Dans <body> il faut que je mette quoi?, un truc comme ça??

Code :

<img name="barre" id="barre" src="../commun/image/barre/barre1.gif" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="585,1,675,27" onClick="javascript:clic(bel)" onMouseOver="javascript:roll()">
<area shape="rect" coords="513,1,586,27" onClick="javascript:clic(li)" onMouseOver="javascript:roll()">
<area shape="rect" coords="441,1,514,27" onClick="javascript:clic(ag)" onMouseOver="javascript:roll()">
<area shape="rect" coords="370,1,443,27" onClick="javascript:clic(iso)" onMouseOver="javascript:roll()">
<area shape="rect" coords="298,1,371,27" onClick="javascript:clic(mag)" onMouseOver="javascript:roll()">
<area shape="rect" coords="224,1,298,27" onClick="javascript:clic(ate)" onMouseOver="javascript:roll()">
<area shape="rect" coords="153,1,225,27" onClick="javascript:clic(occ)" onMouseOver="javascript:roll()">
<area shape="rect" coords="80,1,154,27" onClick="javascript:clic(nf)" onMouseOver="javascript:roll()">
<area shape="rect" coords="1,-3,81,25" onClick="javascript:clic(acc)" onMouseOver="javascript:roll()">
</map>

Et dans mon <head> je mets quoi?? une fonction clic() et une autre roll()??

Code :

function clic(name)
{
var name = name;
document.location = "name.htm";
}
function roll(img)
{
var img = img;
img.src = "barre1.gif";
}

Il manque des choses... je n'ai pas la technique pourriez-vous m'éclairer?

Reply

Marsh Posté le 11-04-2006 à 10:56:06

Reply

Marsh Posté le 11-04-2006 à 12:54:32

Ca me semble pas très pratique et un peu lourd de faire ça en une seule image. Parce que si tu veux faire un roll-over sur cette image, ca veut dire que pour chaque bouton il te faut remplacer complètement l'image et pas juste celle du bouton. En plus avec la méthode que tu utilises maintenant, tu restes très dépendante du JS.

Je peux détailler plus comment faire si tu veux utiliser plusieurs images séparées, mais pas maintenant, la j'ai un entretien d'embauche

Message édité par gooopil le 11-04-2006 à 13:04:16

Reply

Marsh Posté le 11-04-2006 à 13:35:27

je te remercie ... pour les images je veux bien plus de détails ...

Bon entretien

Reply

Marsh Posté le 11-04-2006 à 19:43:16

Voilà un exemple de rollover en JS, je te laisse comprendre et adapter ça pour ton usage

Code :

<html>
<head>
<script language="JavaScript">
var boutons = new Array();
boutons[0] = new Array();
boutons[0][0] = new Image();
boutons[0][0].src = "boff.jpg";
boutons[0][1] = new Image();
boutons[0][1].src = "bon.jpg";
boutons[1] = new Array();
boutons[1][0] = new Image();
boutons[1][0].src = "boff.jpg";
boutons[1][1] = new Image();
boutons[1][1].src = "bon.jpg";
function roll(id, switchto)
{
document.getElementById('bout'+id).src=boutons[id][switchto].src;
}
</script>
</head>
<body>
<a href="link.html" onmouseover="javascript:roll(0,1);" onmouseout="javascript:roll(0,0);">
<img src="boff.jpg" id="bout0">
</a>
<a href="link2.html" onmouseover="javascript:roll(1,1);" onmouseout="javascript:roll(1,0);">
<img src="boff.jpg" id="bout1">
</a>
</body>
</html>

:bounce: Cool j'ai un boulot

Message édité par gooopil le 11-04-2006 à 19:43:41

Reply

Marsh Posté le 11-04-2006 à 20:00:35

Nan mais merde
Arrêtez avec vos codes de merde

Goopil me dit pas que à ton boulot tu codes comme un porc de cette manière [:petrus dei]

Message édité par gatsu35 le 11-04-2006 à 20:01:57

Reply

Marsh Posté le 11-04-2006 à 20:32:22

En principe non Déjà je fais pas de rollover en JS, j'en ai pas fait depuis ben longtemps. J'avais ça qui trainais dans un coin, elle m'a semblé pas mal perdue et dans l'euphorie de mon nouveau taff, ben j'ai fait un copié collé
Après je suis d'accord c'est un peu crade mais c'est pas non plus la mort ça si ?