HTML : insérer une image différente selon le support
Résolu
Caetera
Messages postés
234
Date d'inscription
Statut
Membre
Dernière intervention
-
Caetera Messages postés 234 Date d'inscription Statut Membre Dernière intervention -
Caetera Messages postés 234 Date d'inscription Statut Membre Dernière intervention -
Bonjour à toutes et à tous,
Je débute en codage
Pour les besoins d'un site internet j'aimerais insérer une image dans une page,
Je connais le tag <img> cependant j'aimerais que l'image diffère (2 images différentes) selon la version du site consultée (desktop ou mobile)
Est-ce possible ? Savez-vous comment faire ?
Je débute en codage
Pour les besoins d'un site internet j'aimerais insérer une image dans une page,
Je connais le tag <img> cependant j'aimerais que l'image diffère (2 images différentes) selon la version du site consultée (desktop ou mobile)
Est-ce possible ? Savez-vous comment faire ?
A voir également:
- HTML : insérer une image différente selon le support
- Editeur html - Télécharger - HTML
- Word html - Télécharger - Bureautique
- Html executable - Télécharger - Divers Web & Internet
- Html tidy - Télécharger - Web Design
- Espace en html ✓ - Forum HTML
2 réponses
Comment je peux savoir comment squarespace gère les 2 versions du site ?
J'ai essayé ce code ci avec IF/ELSE :
Mais sans succès, , c'est peut-être trop simpliste ?
Je ne sais pas comment déterminer la condition initiale,
Dans l'idéal j'aimerais que la page détermine si l'utilisateur/trice utilise un mobile,
Si oui : image mobile
Si non : image desktop
J'ai essayé ce code ci avec IF/ELSE :
<img if(navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
)
{
src="image mobile"
}
else {
src="Image desktop"
}
>
Mais sans succès, , c'est peut-être trop simpliste ?
Je ne sais pas comment déterminer la condition initiale,
Dans l'idéal j'aimerais que la page détermine si l'utilisateur/trice utilise un mobile,
Si oui : image mobile
Si non : image desktop
Alors..... le Javascript.. ça ne se place pas comme ça n'importe comment dans une page....
Il faut les mettre dans des balises <script>
Dans ton cas ça ressemblerait d'avantage à
Il faut les mettre dans des balises <script>
Dans ton cas ça ressemblerait d'avantage à
<img id="toto" src="Image desktop"/>
<script type="text/javascript">
var monimage = document.getElementById('toto');
if( navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
monimage.src="image mobile";
} else {
monimage.src="Image desktop";
}
</script>
J'utilise spacequare mais la plateforme ne me permet de faire ce que je voudrais, alors j'utilise l'option qui m'est laissée, c'est-à-dire, injecter mon propre code