navigation avec image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : navigation avec image

jenny50

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?

Publicité

gooopil

pfiew

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

jenny50

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

Bon entretien

gooopil

pfiew

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

gatsu35

Blablaté par Harko

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

gooopil

pfiew

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 ?

Message édité par gooopil le 11-04-2006 à 20:32:48

gatsu35

Blablaté par Harko

moche comme c'est si
donc tu fais quoi alors si tu fais plus de rollover
et sinon tu les fais comment autrement ? un indice : CSS

gooopil

pfiew

Ben ouais CSS
Et pis souvent ben j'ai des boutons imposés en falsh

FORUM HardWare.fr

Programmation

HTML/CSS

navigation avec image

Sujets relatifs
Fonction HTML to BMP gratuite ? Convertir une page Web en image...	Cellule d'un tableau avec image étirable en background ?
javascript:history.back et image	associer un texte à une image dans une galerie photo
lien image dans db sql please	modifier une image
[Image de fond fixe] Différence entre IE et firefox	Comment empêcher la récupération d'une image sur une page web.
image: elimination de bruit	Image qui comporte plusieurs liens
Plus de sujets relatifs à : navigation avec image

Page générée en 0.069 secondes