Mettre une image sur toute la page cliquable
mcrash
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
weetabix40 Messages postés 9583 Date d'inscription Statut Contributeur Dernière intervention -
weetabix40 Messages postés 9583 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je débute dans le HTML et le CSS j'ai essayé plein de façon jusqu'à présent mais il y a toujours un soucis.
Dans un premier temps
Je souhaiterai donc que mon image soit en pleine page et qu'elle soit cliquable mais qu'elle puisse se redimensionner de façon proportionnel ainsi que la zone cliquable.
Dans un deuxième temps
Je souhaiterai avec un texte fixe en bas de la page et centré et au milieu des textes qui apparaissent aléatoirement mais avec des effets de transition.
Enfin dans un troisième temps
Je souhaiterai que lorsque l'on clique sur la page il y ai un effet de remonter et ma nouvelle page apparait.
Je sais que c'est assez complexe mais j'espère que vous m'aiderez à trouver une solution.
En vous remerciant par avance.
Cordialement,
Michael
Je débute dans le HTML et le CSS j'ai essayé plein de façon jusqu'à présent mais il y a toujours un soucis.
Dans un premier temps
Je souhaiterai donc que mon image soit en pleine page et qu'elle soit cliquable mais qu'elle puisse se redimensionner de façon proportionnel ainsi que la zone cliquable.
Dans un deuxième temps
Je souhaiterai avec un texte fixe en bas de la page et centré et au milieu des textes qui apparaissent aléatoirement mais avec des effets de transition.
Enfin dans un troisième temps
Je souhaiterai que lorsque l'on clique sur la page il y ai un effet de remonter et ma nouvelle page apparait.
Je sais que c'est assez complexe mais j'espère que vous m'aiderez à trouver une solution.
En vous remerciant par avance.
Cordialement,
Michael
A voir également:
- Mettre une image sur toute la page cliquable
- Comment supprimer une page sur word - Guide
- Imprimer tableau excel sur une page - Guide
- Mettre google en page d'accueil - Guide
- Mettre une image en fond sur word sur une seule page - Guide
- Image iso - Guide
2 réponses
Salut,
Je comprends pas trop ce que tu veux faire exactement, mais cela ne me paraît pas être le mieux pour débuter...
Je comprends pas trop ce que tu veux faire exactement, mais cela ne me paraît pas être le mieux pour débuter...
Salut,
Pour ton besoin il faut utiliser du html, css, jquery :
Ton code html :
Ton code CSS :
Ton code JQuery :
Cordialement,
Pour ton besoin il faut utiliser du html, css, jquery :
Ton code html :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de ta page | IDECLIK Webagency</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<a href="#"><img src="image/bg.jpg" class="imgfull" /></a>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>
</body>
</html>
Ton code CSS :
img.imgfull {
position:fixed;
top:0;
left:0;
z-index:-1;
}
Ton code JQuery :
function redimensionnement(){
var $image = $('img.imgfull');
var image_width = $image.width();
var image_height = $image.height();
var over = image_width / image_height;
var under = image_height / image_width;
var body_width = $(window).width();
var body_height = $(window).height();
if (body_width / body_height >= over) {
$image.css({
'width': body_width + 'px',
'height': Math.ceil(under * body_width) + 'px',
'left': '0px',
'top': Math.abs((under * body_width) - body_height) / -2 + 'px'
});
}
else {
$image.css({
'width': Math.ceil(over * body_height) + 'px',
'height': body_height + 'px',
'top': '0px',
'left': Math.abs((over * body_height) - body_width) / -2 + 'px'
});
}
}
$(document).ready(function(){
// Au chargement initial
redimensionnement();
// En cas de redimensionnement de la fenêtre
$(window).resize(function(){
redimensionnement();
});
});
Cordialement,