Redimensionner le Logo en fonction de la taille de l'affichage

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Redimensionner le Logo en fonction de la taille de l'affichage

Message par Cool-84 le Dim 30 Mar 2014 - 9:41

Bonjour à toutes et tous
Mon problème est relativement simple à énoncer, mais difficile pour moi à régler.
J'ai installé un logo de 1000 px de large en tête du forum, pour qu'il passe un peu partout.
Sur les smartphones, une partie de l'image est amputée, mais bon, au final ce n'est pas trop grave.
Sur les ordi avec une définition de 2014, le logo est nickel, par contre lorsque la définition des ordis est en 1600 alors là, le logo est tout petit.
J'ai cherché sur le FdF une solution, j'ai vu que pour le background il existe une instruction Javascript pour adapter l'image à la définition (en fait chargement d'une image différente en fonction de la définition).
C'est ce que je voudrais faire pour le logo d'entête, mais je n'ai rien trouvé.
Existe t-il aussi un javascript pour le faire
Merci de vos retours


Dernière édition par Cool-84 le Mar 8 Avr 2014 - 14:54, édité 1 fois

Cool-84
**

Messages : 98
Inscrit(e) le : 21/06/2011

http://passion-essais.forumactif.org
Cool-84 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Redimensionner le Logo en fonction de la taille de l'affichage

Message par Cool-84 le Mer 2 Avr 2014 - 14:52

petit UP
il n'y a pas de solution ?
merci 

Smile 

Cool-84
**

Messages : 98
Inscrit(e) le : 21/06/2011

http://passion-essais.forumactif.org
Cool-84 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Redimensionner le Logo en fonction de la taille de l'affichage

Message par Self le Jeu 3 Avr 2014 - 22:37

Bonjour,

En reprenant le code du tutoriel, on peut essayer comme ça:
Code:
$(function(){

    var logo= "Adresse image (largeur plus grande que 1600px)";

    if(screen.width < 801) logo="Adresse image (largeur 800px)";
    else if(screen.width < 1025) logo="Adresse image (largeur 1024px)";
    else if(screen.width < 1281) logo="Adresse image (largeur 1280px)";
    else if(screen.width < 1601) logo="Adresse image (largeur 1600px)";

    document.getElementById('i_logo').src=logo;

});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Redimensionner le Logo en fonction de la taille de l'affichage

Message par Cool-84 le Ven 4 Avr 2014 - 5:30

Merci SeLfde4Th7
Je viens d'essayer, mais çà ne fonctionne pas
A+

Cool-84
**

Messages : 98
Inscrit(e) le : 21/06/2011

http://passion-essais.forumactif.org
Cool-84 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Redimensionner le Logo en fonction de la taille de l'affichage

Message par Self le Ven 4 Avr 2014 - 14:34

Bonjour,

Peux-tu me montrer quel code tu as mis dans tes javascript exactement ?
L'as-tu bien mis sur toutes les pages ?
Possède tu d'autre javascript et si oui, lesquels ?

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Redimensionner le Logo en fonction de la taille de l'affichage

Message par Cool-84 le Ven 4 Avr 2014 - 19:21

J'ai repris ton JS et ai inséré les liens des hébergeurs pour les images selon les tailles

$(function(){   
           var logo= "http://www.........................."
           if(screen.width < 801) logo="http://www................................;
           else if(screen.width < 1025) logo="http://www.........................";
           else if(screen.width < 1281) logo="http://........................";
           else if(screen.width < 1601) logo="http://www........................";
         document.getElementById('i_logo').src=logo;    
       });

Oui, j'ai d'autres JS
- espace pour les milliers
- mentions bas de page
- catégories rétractables
- Mention "qui est en ligne"

A+

Cool-84
**

Messages : 98
Inscrit(e) le : 21/06/2011

http://passion-essais.forumactif.org
Cool-84 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Redimensionner le Logo en fonction de la taille de l'affichage

Message par Self le Ven 4 Avr 2014 - 20:12

Bonjour,

Pardonnez moi, j'ai cru que vous étiez sous phpBB2 et est testé sur mon forum.
Comme cela ça devrait être mieux :
Code:
$(function(){
    var logo= $('#logo img');
    if(screen.width < 801){
        $(logo).attr('src', 'Adresse image (largeur 800px)');
    }else if(screen.width < 1025){
        $(logo).attr('src', 'Adresse image (largeur 1024px)');
    }else if(screen.width < 1281){
        $(logo).attr('src', 'Adresse image (largeur 1280px)');
    }else if(screen.width < 1601){
        $(logo).attr('src', 'Adresse image (largeur 1600px)');
    }else{
        $(logo).attr('src', 'Adresse image (largeur plus grande que 1600px)');
    };
});

Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Redimensionner le Logo en fonction de la taille de l'affichage

Message par Cool-84 le Sam 5 Avr 2014 - 6:09

Cela marche nickel
Merci SeLfde4Th7, c'était vraiment sympa
A+

Cool-84
**

Messages : 98
Inscrit(e) le : 21/06/2011

http://passion-essais.forumactif.org
Cool-84 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum