28172 sujets

CSS et mise en forme, CSS3

Superposer des images sur une image background permutée ??

Bonjour !!

Je crée actuellement un site et je bloque sur la page d'accueil...
J'ai placé une première image dans un calque puis une seconde dans un deuxième calque avec le comportement permuter on click. Mes deux images sont en plein écran.

J'aimerais placer des images sur ma deuxième image (donc l'image qui apparait après la permutation ).
J'ai essayée avec l'image btn_portfo.png, mais elle ne s'affiche pas dans le navigateur. J'ai essayé avec différents z-index .

Pour l'instant j'ai ca :

[code=css]<style type="text/css">
#calque1 {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:4;
}
#calque2 {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0;
}
#bienvenue { 
    position:fixed; 
	top:0; 
	left:0; 
	z-index:4; 
	width:100%; 
	height:100%;
}
#portfolio {
	position: absolute;
	z-index: 1;
	height: 8%;
	width: 16%;
	left: 17%;
	top: 80%;
}
#home {
	position: fixed;
	z-index: 0;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
}


</style>


<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  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) { //v4.01
  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);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  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>


<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('bienvenue/home.jpg')">
 
<div id="calque1"><a href="javascript:;" onclick="MM_swapImage('bienvenue','','bienvenue/home.jpg',1)"><img src="bienvenue/bienvenue.jpg" alt="bienvenue" width="1999" height="936" id="bienvenue" /></a></div>
  
<div id="calque2">[#darkred]<img src="bienvenue/btn_portfo.png" alt="portfolio" width="425" height="142" id="portfolio" />[/#]<img src="bienvenue/home.jpg" alt="home" width="1999" height="936" id="home" /></div>/code]


[/i][/i][/i][/i][/i][/i]


Merci d'avance pour votre aide Smiley biggrin
Modifié par mmlle (29 Sep 2014 - 19:01)
Sujet clos
Aller à