[newbie] comment faire des "boutons" avec plusieurs aspect?

comment faire des "boutons" avec plusieurs aspect? [newbie] - Graphisme

Marsh Posté le 20-01-2002 à 12:35:01    

euh c dur a expliker....
en fait je voudrai ke l'image prenne un autre aspect des ke le curseur de la souris est dessus.. ms en html
un peu com ds flash.....
merci

 

[edtdd]--Message édité par totalgloogloo--[/edtdd]

Reply

Marsh Posté le 20-01-2002 à 12:35:01   

Reply

Marsh Posté le 20-01-2002 à 14:22:38    

En fait en HTML tu ne peut pas faire ca... C'est du javascript...
Si tu utilises un éditeur comme Dreamweaver il peut te générer ca tout seul ....

Reply

Marsh Posté le 20-01-2002 à 14:25:51    

techniquement, va voir ici, tu auras les réponses que tu veux

Reply

Marsh Posté le 20-01-2002 à 14:25:55    

vi merci
entretps g trouvé comment faire :)

Reply

Marsh Posté le 20-01-2002 à 14:38:05    

Facile ...
tu rajoutes ça au début de ton fichier html
 
<script language="JavaScript1.2">
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) {
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
 
 
Et ensuite quand tu veux changer une image tu suis le schéma suivant :
 
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bidule[
/#ff0000]','','image2.gif
',1)"><img src=image1.gif name="[#ff0000]Bidule
" border=0></a>
 
où image1.gif et image2.gif sont tes deux images ... à noter que tu ne dois pas avoir 2 noms de borne img identique dans ton fichier html (dans le cas ici, l'image porte le nom Bidule)


---------------
/dev/null
Reply

Marsh Posté le 20-01-2002 à 16:57:54    

get@fix a écrit a écrit :

Facile ...
tu rajoutes ça au début de ton fichier html
 
<script language="JavaScript1.2">
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) {
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
 
 
Et ensuite quand tu veux changer une image tu suis le schéma suivant :
 
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bidule[
 
/#ff0000]','','image2.gif

 

',1)"><img src=image1.gif name="[#ff0000]Bidule" border=0></a>
 
où image1.gif et image2.gif sont tes deux images ... à noter que tu ne dois pas avoir 2 noms de borne img identique dans ton fichier html (dans le cas ici, l'image porte le nom Bidule)  



Compliqué ton rollover :(
 
Voilà le mien :

Citation :

<Script Language="JavaScript">
isamap = new Object();
isamap[0] = "_df"
isamap[1] = "_ov"
isamap[2] = "_ot"
isamap[3] = "_dn"
function isimgact(id, act)
{
 if(document.images) document.images[id].src = eval( "isimages." + id + isamap[act] + ".src" );
}
 
if (document.images) { // ensure browser can do JavaScript rollovers.
isimages = new Object();
isimages.Inscription_df = new Image();
isimages.Inscription_df.src = "images/inscription_grey.png";
 
isimages.Inscription_ov = new Image();
isimages.Inscription_ov.src = "images/inscription_blue.png";
 
isimages.Themes_df = new Image();
isimages.Themes_df.src = "images/themes_grey.png";
 
isimages.Themes_ov = new Image();
isimages.Themes_ov.src = "images/themes_blue.png";
 
isimages.Proposer_df = new Image();
isimages.Proposer_df.src = "images/proposer_grey.png";
 
isimages.Proposer_ov = new Image();
isimages.Proposer_ov.src = "images/proposer_blue.png";
 
isimages.Infos_df = new Image();
isimages.Infos_df.src = "images/infos_gris.png";
 
isimages.Infos_ov = new Image();
isimages.Infos_ov.src = "images/infos_bleu.png";
 
isimages.Vip_df = new Image();
isimages.Vip_df.src = "images/vipgrey.png";
 
isimages.Vip_ov = new Image();
isimages.Vip_ov.src = "images/vipgreen.png";
 
}
</Script>


 
Pour l'image :
 

Code :
  1. <a Href="page.htm" OnMouseOut="isimgact( 'Inscription',0)" OnMouseOver="isimgact( 'Inscription',1)" ><Img Src="images/inscription_grey.png" Border="0" Name="Inscription" Alt="Inscription" width="134" height="21"></a>


 
Tout ce qui est en gras est personnalisable.
 
A+


---------------
“I'll thank you very much.”
Reply

Marsh Posté le 20-01-2002 à 21:36:36    

fais tout ca avec adobe image ready c simpe comme creer deux calques et le code est baleze ( chargement dse images dans el cache avant affichage de la page) voila :D

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed