Results 1 to 4 of 4

Thread: Changing background image with a button

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Changing background image with a button

    I am trying to make a button that would change the background image of the whole document whenever somebody clicks it.

    I have tried something along the lines of this:

    <input type="button"
    value="Pattern1"
    onClick="background-image: url(background.png);background-repeat: no-repeat;">
    and,

    <input type="button"
    value="Pattern2"
    onClick="background: url(background.png);background-repeat: no-repeat;">
    as you can see, I am a beginner at coding in general so any help is appreciated.

    My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong.

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Yea, I think you want something like

    Code:
    <input type="button" value="Pattern1" onClick="document.body.style.backgroundImage = 'url(background.png) no-repeat;'">
    Last edited by bluewalrus; 09-13-2010 at 08:10 PM.
    Corrections to my coding/thoughts welcome.

  3. The Following User Says Thank You to bluewalrus For This Useful Post:

    hankthetank (09-14-2010)

  4. #3
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default

    How's this? (It was on here)
    Insert this in the <HEAD>:
    Code:
    <meta name="Author" content="Ronald H. Jankowsky">	
    <meta name="Description" content="Slider-Script">
    <style>.drag {position: relative; cursor: hand}</style>
    <SCRIPT LANGUAGE="JavaScript1.2"> 
    // Slider script by Ronald H. Jankowsky (http://rj-edv-beratung.de), parts of code (draglayer, movelayer) by DynamicDrive.com
    // This script is free for use, please leave this notice intact
    var sPosition;
    var showPerc=100;
    document.onmousedown=dragLayer
    document.onmouseup=new Function("dragMe=false")
     
    var Color= new Array();
    Color[0] = "00";
    Color[1] = "11";
    Color[2] = "22";
    Color[3] = "33";
    Color[4] = "44";
    Color[5] = "55";
    Color[6] = "66";
    Color[7] = "77";
    Color[8] = "88";
    Color[9] = "99";
    Color[10] = "AA";
    Color[11] = "BB";
    Color[12] = "CC";
    Color[13] = "DD";
    Color[14] = "EE";
    Color[15] = "FF";
     
    // Demofunction to change bg-color by moving slider
    var rVal,gVal,bVal, cCol
    function chgBg() {
    	cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
    	ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
    // If more sliders are used, each of them has to be handled separately
    	if (kObj.id =="knobImg") document.bgColor="#"+Color[ind]+gVal+bVal;
    	if (kObj.id =="knobImg1")  document.bgColor="#"+rVal+Color[ind]+bVal;
    	if (kObj.id =="knobImg2")  document.bgColor="#"+rVal+gVal+Color[ind];
    }
     
    // Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated
    var dragMe=false, kObj, yPos,direction
    function moveLayer() {
    if (event.button==1 && dragMe) {
    	oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; 
    // Limit movement of knob to stay inside layer
    	if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
    	if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
    	if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
    // Set working variable 'showPerc' depending on 100 or 250 scaling
    	sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; 
    // The following line should be replaced by the function-call with the actual task to perform
    	chgBg(); 
    	return false; }
    }
    function dragLayer() {
    if (!document.all) return;
    if (event.srcElement.className=="drag")	{dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }
    }
    </script>
    And this into the <BODY>:
    Code:
    <body bgcolor="#FFFFFF">
    <!-- Each of the 'outerLyr#'-divs creates a slider element. 
    There can be as much sliders as needed. Just make sure, 
    they have different names, especially the img (knob is referred and acted on by name)-->
     
    <div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 155px; top: 111px; background-color: #000000"> 
    	<img id="knobImg" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px">
      <div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
        <div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
      </div>
    </div>
    <div id="outerLyr1" style="position:absolute; width:23px; height:120px; z-index:1; left: 185px; top: 111px; background-color: #000000"> 
    	<img id="knobImg1" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px">
      <div id="innerLyr1" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
        <div id="barLyr1" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
      </div>
    </div>
    <div id="outerLyr2" style="position:absolute; width:23px; height:120px; z-index:1; left: 215px; top: 111px; background-color: #000000"> 
    	<img id="knobImg2" src="knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px">
      <div id="innerLyr2" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
        <div id="barLyr2" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
      </div>
    <!-- This would be a way to configure if slider range is 0-100 or 0-255 -->
    </div>
    	<input type="radio" name="perCent" value="false">Prozent
    	<input type="radio" name="perCent" value="true" checked>255
    Had to 'steal' the source code, code wasn't available.
    Last edited by [Nicolas]; 09-13-2010 at 08:17 PM.

  5. The Following User Says Thank You to [Nicolas] For This Useful Post:

    hankthetank (09-14-2010)

  6. #4
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you both, I thanked both your posts.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •