|
Sujet : [newbie] comment faire des "boutons" avec plusieurs aspect? |
| leboss |
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 |
| Pinzo |
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 :
- <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+ |
