[Résolu]Problème javascript lors du changement d'orientation sur tél

Bonjour, j'ai réalisé un script javascript permettant de changer l'image de titre de mon site web en fonction de la largeur de l'écran. Tout fonctionne nickel lors de redimensionnements de fenêtre sur ordinateur.
En revanche, sur portable, lorsque je passe d'une largeur inférieure à une largeur supérieur (rotation portrait --> paysage) le titre est bien modifié, mais l'inverse (rotation paysage --> portrait) ne fonctionne pas.

Voici le code :

function titleSize()
	{
		if (window.innerWidth <= 614) {
			var titre = document.getElementById('logo');
			var src = titre.getAttribute('src');
			titre.setAttribute('src', '../images/titre-small.png');
		} else {
			var titre = document.getElementById('logo');
			var src = titre.getAttribute('src');
			titre.setAttribute('src', '../images/titre.png');
		}
	}

window.onload = function(){ titleSize()};
window.onresize = function(){ titleSize()};

Comment faire pour résoudre ce problème ?

Merci de votre aide
Modifié par msrollet (06 Aug 2014 - 20:22)

Bonjour,

Pourquoi ne pas utiliser les requêtes media (media queries en anglais dans le texte) ?
Plus d'infos sur :
Alsacréations
MDN

J'utilise en effet des media queries, mais je ne pense pas que ce soit possible pour modifier l'attribut d'une balise : ici changer le chemin de l'image en fonction de la résolution, mais je suis preneur si vous connaissez des méthodes CSS pour faire quelque chose de similaire.

Hello,

Je suis allé un peu vite effectivement, j'étais arbitrairement parti sur une image d'arrière plan, et non sur un titre/image

Il y a bien l'attribut srcset mais le support est loin d'être satisfaisant

Peut-être du côté de matchMedia ("La méthode matchMedia ou les Media Queries pour JavaScript") ?

Concernant ton script, je serai bien incapable de t'apporter une réponse satisfaisante, désolé

L'attribut srcset est effectivement intéressant, dommage qu'il soit encore trop récent.

Je vais voir ce que je peux essayer de faire avec matchMedia, merci du lien
Modifié par msrollet (04 Aug 2014 - 21:26)

En attendant un meilleur support natif de srcset, tu peux te tourner vers la solution de filamentgroup: https://github.com/scottjehl/picturefill

jacqueminv a écrit :
En attendant un meilleur support natif de srcset, tu peux te tourner vers la solution de filamentgroup: https://github.com/scottjehl/picturefill

En effet ça marche niquel, simple et efficace, merci. Pour ceux que ça intéresserait, il m'a suffit d'ajouter les lignes suivantes dans mes pages :

<script src="../js/picturefill.min.js"></script>
<picture>
        <source srcset="../images/titre-small.png" alt="logo-site" id="logo" media="(max-width: 599px)" />
	<img srcset="../images/titre.png" alt="logo-site" id="logo" />
</picture>

Modifié par msrollet (06 Aug 2014 - 20:22)