2 images de fond avec lien et auto size

Résolu/Fermé

steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018 - 26 août 2014 à 02:47
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 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>

A voir également:

2 images de fond avec lien et auto size
Lien url - Guide
Verifier un lien - Guide
Créer un lien pour partager des photos - Guide
Tree size - Télécharger - Gestion de fichiers
2 comptes whatsapp - Guide

4 réponses

Réponse 1 / 4

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
26 août 2014 à 04:05

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 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
26 août 2014 à 05:13

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 26/08/2014 à 20:05

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 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 26/08/2014 à 22:14

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 mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
26 août 2014 à 19:46

merci beaucoup, ca fonctionne super bien

merci merci!!!

Réponse 4 / 4

steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
26 août 2014 à 22:32

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 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
26 août 2014 à 23:04

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

Retrouver l'image originale après avoir fait des modifications ?

Rajout de lien sur plusieurs pages

lien copié

Comment retrouver des lien copier sur sont téléphone

Discussions similaires

Newsletters