2 images de fond avec lien et auto size

Résolu

steve-elipz Messages postés 148 Date d'inscription Statut Membre Dernière intervention -
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention - 26 août 2014 à 23:04

Bonjour,

j'aimerai divisé ma page en deux verticalement avec 2 images (width 50% et height 100%)

image a.png et image b.png

a savoir: il faut que les deux images en background s'adaptent a l ecran...

en plus de tout cela il faudrait que quand on clic sur image a.png ou b.png cella ouvre un lien sur une nouvelle page...

j ai essayé des dizaines de soluces

index.html avec frameset cols 50,50
dans une frame = a.png (html) et l autre frame = b.png (html) avec du css pour l adaptation de l image

seulement pas de lien href possible... quelqu un pourrait il m aider svp?

voici mon code css pour l adaptation auto des images


<html> 
 <head> 
  <style type="text/css"> 
   head, body{height:100%; width:100%; margin:0; padding:0;} 
   img{position:absolute; top:0; left:0; width:100%; height:100%; z-index:-10;} 
   p{margin:0; padding:0;} 
  </style> 
 </head> 
 <body> 
  <img src="http://www.satkal.org/SATKAL_INDEX/My%20Albums/SATKAL%20NEWS/album/res/bg.gif"/> 
  <div id="header"> 
   
  </div> 
  <div id="content"> 
  </div> 
 </body> 
</html>

Afficher la suite

A voir également:

2 images de fond avec lien et auto size
Partager des photos avec un lien - Guide
Lien url - Guide
Verificateur de lien - Guide
Lien copié ✓ - Forum Google Chrome
Lien copié presse papier smartphone Samsung - Forum Mobile

4 réponses

Réponse 1 / 4

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

salut

voici la solution

<html>
<head>
<style type="text/css">
html {
height:100%;
}

body {
height:100%;
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:0;
}

#gauche {
display:inline-block;
width:50%;
height:100%;
background: url(a.png);
background-size:cover;
}

#droite {
display:inline-block;
width:50%;
height:100%;
background: url(b.png);
background-size:cover;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
document.getElementById("gauche").onclick = function() {
document.location.href="http://www.tonsite.com/page1";
}; 
document.getElementById("droite").onclick = function() {
document.location.href="http://www.tonsite.com/page2";
}; 
}
</script>
<div id="gauche"></div>
<div id="droite"></div>
</body>
</html>

Réponse 2 / 4

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

peut etre que ce code va t'aider :


<html> 
 <head> 
  <style type="text/css"> 
   head, body{height:100%; width:100%; margin:0; padding:0;} 
   img{position:absolute; top:0; left:0; width:100%; height:100%; z-index:-10;} 
   p{margin:0; padding:0;} 
   
   
   
	#lien1
	{
		background-image: url(http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg);
	}
	
	#lien2
	{
		background-image: url(http://www.bristolhackneytaxi.com/images/test1.jpg);
		
	}
	
	a
	{
		position: relative;
		display: inline-block;
		margin-left:auto;
		margin-right:auto;
		width: 49%;
		height: 80%;
		background-repeat: no-repeat;
		background-size: 99% 99%;
	}
  </style> 
 </head> 
 <body> 
	 <a id="lien1" href="https://www.w3schools.com/cssref/css3_pr_background-size.asp">
	 </a>
	 <a id="lien2" href="https://www.zonecss.fr/proprietes-css/display-css.html">
	 </a>
 </body> 
</html>

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

ton code marche pas
au lieu de
head, body{height:100%; width:100%; margin:0; padding:0;}
fais plutot
html, body{height:100%; width:100%; margin:0; padding:0;}

head ne s'affiche pas sur une page donc y mettre des attribut css ......
de plus mettre un height à 100% sur body sans mettre un height 100 % sur html ne sert a rien

d'autre par pour eviter le white space avec inline block il suffit de mettre font-size:0; sur le parent des inline-block (donc les inline-block peuvent être à 50 %)

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

j'ai proposer d'aider, pas de fournir une solution. Le code a été testé sur chrome, il fonctionne.
Mon code n'as pas de javascript contrairement au tient ...

Réponse 3 / 4

steve-elipz Messages postés 148 Date d'inscription Statut Membre Dernière intervention

merci beaucoup, ca fonctionne super bien

merci merci!!!

Réponse 4 / 4

steve-elipz Messages postés 148 Date d'inscription Statut Membre Dernière intervention

ah j ai parlé trop vite.... lorsque l'ecran est reduit ou en affichage plus petit... l'image se coupe...

une solution?

<html>
<head>
<style type="text/css">
html {
height:100%;
}

body {
height:100%;
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:0;
}

#gauche {
display:inline-block;
width:50%;
height:100%;
background: url(background2.png);
background-size:cover;
position:relative;
}

#droite {
display:inline-block;
width:50%;
height:100%;
background: url(background3.png);
background-size:cover;
position:relative;
z-index:1;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
document.getElementById("gauche").onclick = function() {
document.location.href="test1.html";
};
document.getElementById("droite").onclick = function() {
document.location.href="test2.html";
};
}
</script>
<div id="gauche"></div>
<div id="droite"></div>
</body>
</html>

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

Avec mon code les images ne ce chevauche cependant les erreurs que animostab a relevée sont a suivre pour avoir un code plus propre.

Discussions similaires

Copier un lien instagram

Rajout de lien sur plusieurs pages

PIX

Retrouver liens copiés sur le téléphone

Msg d'erreur je dois envoyer par mail

Votre réponse

Discussions similaires