8768 sujets

Développement web côté serveur, CMS

Submit qui prend toute la place d'un div ?

Bonjour à tous,

Sur mon site web, j'affiche des miniatures des actualités sur la page d'accueil. Actuellement, pour lire l'article qui nous intéresse, on clique sur le petit "Lire la suite..." en bas à droite, qui est en fait un simple input=submit qui se charge d'envoyer l'ID de l'article à la page d'affichage de l'article en entier.

ça fonctionne très bien, là n'est pas le problème. J'aimerais juste permettre à l'utilisateur de pouvoir consulter l'article en cliquant n'importe où sur le conteneur tout entier, pas seulement sur ce "Lire la suite". Vous voyez ce que je veux dire ?

Je joins une petite capture d'écran du rendu pour que ce soit plus clair... Sur la capture, on ne voit que deux miniatures côte a côte, j'espère que ça donne un bon aperçu de ce que je souhaite améliorer.

upload/1518720710-68566-capture.png

Je me doute bien qu'avec PHP ou une mise en forme du submit qui prendrait TOUTE la place par exemple, ce ne sera ni bien ni pas possible de le faire, alors j'imagine que JavaScript pourra m'aider dans ce cas là... Qu'en pensez vous ?

En plus j'ai trouvé un super petit effet d’agrandissement au survol, que j'aimerai bien appliquer sur le conteneur s'il devient entièrement cliquable : https://www.w3schools.com/howto/howto_css_zoom_hover.asp

En bref, comment dire à JS "Si je clique n'importe ou sur le <div> qui contient la miniature, cela exécute le submit ?"

Merci d'avance pour votre précieuse aide !

Loraga

PS : Désolé à l'équipe d'Alsacréations, j'utilise encore des Lorem Ipsum alors que vous en proposez en Alsacien, ça le fait bien en plus... Smiley lol
Modifié par Loraga (15 Feb 2018 - 22:50)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>sans titre</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style>
		#main { position: relative;  margin: 1rem; }
		#main > div:first-of-type { background-color: #eee; padding: 0.5rem; }
		#main > div:last-of-type { position: absolute; top: 0; height: 100%; width: 100%; background-color: transparent; }
		#main > div { border: 2px solid transparent; }
		#main > div:last-of-type:hover { border-color: red; cursor: pointer; }
		.suite { text-align: right; background-color: #444; color: #fff; padding-right: 1rem; }
	</style>
</head><body>
	<div id="main">
		<div>
			<div>
	Lorem Elsass ipsum DNA, Wurschtsalad Verdammi picon bière aliquam ac non
	Richard Schirmeck Pfourtz ! dui leo nüdle  Coopé de Truchtersheim dignissim
	amet, suspendisse libero. hopla habitant munster placerat id, tellus
	Oberschaeffolsheim sed sed wie in, kartoffelsalad geht's ante Hans libero,
	yeuh. Gal ! météor jetz gehts los Gal. schnaps Morbi vielmols, Mauris
	leverwurscht sit Salut bisamme sit porta sagittis Christkindelsmärik knepfle
	turpis und Chulia Roberstau gal et Kabinetpapier quam. Heineken non hopla
	bredele gewurztraminer mamsell lacus wurscht ftomi! merci vielmols hopla nullam
	flammekueche senectus ac messti de Bischheim schpeck tellus id semper libero,
	ch'ai commodo Miss Dahlias s'guelt eleifend varius amet condimentum Salu
	bissame Racing. amet hop ornare leo tristique quam, chambon dolor ornare
	rucksack hoplageiss Yo dû. salu schneck ullamcorper morbi elementum Spätzle
	barapli kougelhopf elit rossbolla Carola mollis gravida sit mänele turpis,
	consectetur blottkopf, auctor, Oberschaeffolsheim lotto-owe rhoncus.
			</div>
			<div class="suite">La suite</div>
		</div>
		<div id="cover">
		</div>
	</div>
	<script>
		(function(id) {
			'use strict';
			document.getElementById(id).addEventListener('click', function(event) {
				alert('Aie');
				event.preventDefault();
			})
		})('cover');
	</script>
</body></html>

Il te reste à ajouter une ligne de code à la place de alert('Aie') pour soumettre ton formulaire.
Sujet clos
Aller à