IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Comment redimensionner un fond d’écran ?


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Mai 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Lycéen
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Mai 2013
    Messages : 3
    Points : 1
    Points
    1
    Par défaut Comment redimensionner un fond d’écran ?
    Bonjour,

    Je suis un débutant en java et je n’arrive pas à faire redimensionner mon font d’écran.

    Mon but c'est qu'il doit être immobile sur tous les Zoom possibles et que à chaque enter ou actualisation de la page, l'image change.

    Bref... pour le changement d'image, OK, mais pour les redimensionner, ça je n'y arrive pas.


    Voici mon code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script type="text/javascript">
        function changeImg(imgNumber) {
            var myImages = [
                "img/backgrounds/bg_001.jpg",
                "img/backgrounds/bg_002.jpg",
                "img/backgrounds/bg_003.jpg",
                "img/backgrounds/bg_004.jpg",
                "img/backgrounds/bg_005.jpg",
                "img/backgrounds/bg_006.jpg",
            ];
            var imgShown = document.body.style.backgroundImage;
            var newImgNumber =Math.floor(Math.random()*myImages.length);
            document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
            }
        window.onload=changeImg;
    </script>

    Merci d’avance.

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    Janvier 2013
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2013
    Messages : 141
    Points : 98
    Points
    98
    Par défaut
    J'aimerais bien t'aider mais je comprend pas ce que tu veut faire

    Soit de un tu parle que ta fenetre de navigation reste fixer, à ce moment là ben suffit de pas y toucher.

    Si maintenant tu souhaite que ton images reste à une taille fixe quelque soit les dimensions de ta fenêtre de navigation ben un simple CSS comme ceci suffit:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    //ton image aura toujours la valeur de 100px par 100px ici
    .monimage{
    width:100px;
    height:100px;
    }
    Et qu'entend tu par zoom ?

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    ça sera peut etre implémenté en css3 ...
    pour le moment les backgrounds ne sont pas dimensionnables
    tu peux passer par une balise image positionnée en z-index...

  4. #4
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Mai 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Lycéen
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Mai 2013
    Messages : 3
    Points : 1
    Points
    1
    Par défaut resize
    Voila en faite j'ai pue faire un resize avec un font d’écran.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <script type="text/javascript">
    Home_Ready("img/backgrounds/bg_1.jpg");
    $(resize);
    $(window).resize(resize);
    </script>
    je souhaite sollement faire en sorte que lorsque je actualise ou change de page,
    l'image change tout en gardent le rezise possible.

    pour le zoom je parle surtout d'un "Ctrl+roulette de la souris"

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Mai 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Lycéen
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Mai 2013
    Messages : 3
    Points : 1
    Points
    1
    Par défaut aide
    a oui j'ai oublier de mentionner se code dessoler

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    Le HTML
    <script src="js/Common.js"></script>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    /* HOME */
    /*
    function Home_Ready(backUrl) {
    	$(document).ready(function () {
    		$("#q").focus();
    		var backId = Math.floor((Math.random() * 26) + 1);
    		if (backUrl == null || backUrl == "") {
    			backUrl = "/img/backgrounds/" + ZeroFill(backId, 3) + ".jpg";
    		}
    		Debug($("#img_home_back").attr("src"));
    		Debug(backUrl);
    		$("#img_home_back").attr("src", backUrl);
    	})
    }
    */
    function Home_Ready(backUrl) {
    	$(document).ready(function () {
    		$("#q").focus();
    		/*
    		var backId = Math.floor((Math.random() * 40) + 1);
    		if (backUrl == null || backUrl == "") {
    			backUrl = "/img/backgrounds/" + ZeroFill(backId, 3) + ".jpg";
    		}
    		*/
    		$("div.home_content").css("background", "url('" + backUrl + "')");
    		if ($.browser.msie && $.browser.version < 9) {
    			$(".home_content").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + backUrl + "', sizingMethod='scale')");
    		}
    	})
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    function resize() {
    	var playerContainer = $(".bottom_fixed");
    	var playerSize = playerContainer.is(":visible") ? playerContainer.height() : 0;
     
    	var navContainer = $(".navbar");
    	var navSize = navContainer.height();
     
    	_scrHeigth = $(window).height();
    	_scrWidth = $(window).width();
     
    	_imgRatio = _imgBackW / _imgBackH;
     
    	var footerSize = $(".footer_common_page").height();
    	var contentSize = _scrHeigth - playerSize - navSize;
     
    	_scrRatio = _scrWidth / contentSize;
     
    	if (_imgRatio < _scrRatio) {
    		_imgBackW = _scrWidth;
    		_imgBackH = Math.round(_scrWidth / _imgRatio);
     
    	}
    	else {
    		_imgBackH = contentSize;
    		_imgBackW = Math.round(contentSize * _imgRatio);
    	}
     
    	$("div.home_content").height(contentSize);
    	$("div.home_content").css("background-repeat", "no-repeat");
    	$("div.home_content").css("background-size", _imgBackW + "px " + _imgBackH + "px");
     
    	//Home	
    	$(".content-fixed").css("bottom", playerSize + "px");
    	if (playerContainer.is(":visible")) {
    		$("footer").css("padding-bottom", playerSize + "px");
    	}
    	//Main
    	$("div.all_content").css("min-height", contentSize);
    	$("#pusher").css("height", footerSize + playerSize);
    	$(".footer_common_page").css("bottom", playerSize);
    }
    et un énorme dossier concernent le windows resize

    car j'ai pris idée sur l’ancien version d’accueil de radionomy.com

    http://www.radionomy.com/js/jquery-1.7.2.js

Discussions similaires

  1. Réponses: 3
    Dernier message: 11/08/2009, 09h40
  2. redimensionner un fond d'écran
    Par augustus dans le forum wxPython
    Réponses: 3
    Dernier message: 07/06/2007, 09h44
  3. Réponses: 2
    Dernier message: 26/10/2006, 16h13
  4. Réponses: 10
    Dernier message: 12/09/2006, 18h11
  5. Comment ajouter un fond d'écran??
    Par Jayceblaster dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 07/04/2006, 18h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo