SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change background style image

    HI Folks...ive no idea with js...so,

    Is it possible to change the background image via js on button click?

    ive seen

    Code:
     <script>
    function changeImage(filename)
    {
       document.mainimage.src = filename;
    }
    </script>
    however can it be applied to the style element. What i use i the moment is;

    Code:
    <div id="picholder4" style="background-image: url(<?php echo $row_pages['image']; ?>);">
      <img src="sitefiles/projettop.png" width="600" height="375" alt=" <?php echo $row_pages['title']; ?>" />  </div>
    ...and i want to change the background- image url and maintain the img source (png)

    thanks in advance

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Barney, try the following. I have used a hex rather than an image but the principle is the same

    Code:
    <script>
    function switchBg(divid, filename) {
    	
    	var divTgt = document.getElementById(divid);
    	divTgt.style.background = filename;
    	
    }
    </script>
    
    <div id="tgt" style="">
    <p>div</p>
    </div>
    <button name="change" value="change" onclick="switchBg('tgt', '#ff9900')">change</button>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers spike, so just to clarify ( before i get in a mess!), i would use

    Code:
    <script>
    function switchBg(divid, filename) {
    	
    	var divpicholder4 = document.getElementById(divid);
    	divpicholder4.style.background = filename;
    	
    }
    </script>
    Code:
    <div id="picholder4" style="background-image: url(<?php echo $row_pages['image']; ?>);">
    <p>div</p>
    </div>
    <button name="change" value="change" onclick="switchBg('picholder4', '<?php echo $row_pages['imagelarge']; ?>')">change</button>

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    yes, that looks ok *crosses fingers*
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sory, im a bit confused about the onclick bit...

    ive used;

    Code:
    <a href="#" onclick="switchBg('picholder4', '<?php echo $row_imagesthunbs['path']; ?>')"><img src="<?php echo $row_imagesthunbs['path']; ?>" width="100" height="51" /></a></div>
    ...is that totally wrong?

    b

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    The reason I used the onclick event handler was because I didnt want the link or button to submit at the same time.

    What
    the # will do is submit the link as if you actually click it as you would any normal null link.

    change to:
    Code:
    <a href="javascript:void(0)" onclick="switchBg('picholder4', '<?php echo $row_imagesthunbs['path']; ?>')"><img src="<?php echo $row_imagesthunbs['path']; ?>" width="100" height="51" /></a></div>
    or use a <span> tag with styling for the hand cursor.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers, ok i doesnt work!..

    The source is below. It pulls down the image files fine, however it doesnt change the bk image. I tried with your hex example and that worked.....After changing th bk image (using the hex colour) i looked at the source and the original image was still there.

    Any thoughts?

    Many thanks b

    HTML Code:
    <a href="javascript:void(0)" onclick="switchBg('picholder4', '../public/imagelarge/bf14a74f917761e41d6060d72ed1a10d.png')"><img src="../public/imagelarge/bf14a74f917761e41d6060d72ed1a10d.png" width="100" height="51" /></a></div>
            
            
            </td>
                    <td><div class="eventwrap">
            
           <a href="javascript:void(0)" onclick="switchBg('picholder4', '../public/imagelarge/37e6af39eba9b323ed48d426a615480c.png')"><img src="../public/imagelarge/37e6af39eba9b323ed48d426a615480c.png" width="100" height="51" /></a></div>
    
            
            
            </td>
                    <td><div class="eventwrap">
            
           <a href="javascript:void(0)" onclick="switchBg('picholder4', '../public/imagelarge/ed901aa934c23654b5df393abf4683bf.png')"><img src="../public/imagelarge/ed901aa934c23654b5df393abf4683bf.png" width="100" height="51" /></a></div>
            
            
            </td>

    ps, excuse the td's, but its part of the horizontal looper...

  8. #8
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    If you view the source then the original image SHOULD still be there.
    With javascript you are modifying the elements of the page rather than the actual page itself.

    Do you use Firefox/flock etc? if so then download the excellent "Web developers Toolbar" add-on and view the generated source AFTER clicking the link.

    If you want the change to be permanent then you would have to refresh the page and set it that way.

    What is it for?!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, have a look here

    If you scroll down, youll see some images (that ive just dumped there). What i would like to do is to replace or change the image behind the png file at the top of the page when the images are clicked...

    thanks spike

  10. #10
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    My mistake Barney, Images need a url....

    Change the function too
    Code:
    <script type="text/javascript">
    function switchBg(divid, filename) {
    	
    	var divpicholder4 = document.getElementById(divid);
    	divpicholder4.style.background='url('+filename+')';
    	
    }
    </script>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Spike...its working....however..

    Ill leave you alone after this !

    when the image is replaced, it seems to disregard the css

    for the div i have

    Code:
    #picholder4 {
    
    	background-repeat: no-repeat;
    	background-position: center center;
    
    		
    }
    ...however online, it repeats and isnt centered...

    cheers

  12. #12
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    alter the background properties inside the javascript.
    Code:
    <script type="text/javascript">
    function switchBg(divid, filename) {
    	
    	var divpicholder4 = document.getElementById(divid);
    	divpicholder4.style.background='url('+filename+') no-repeat center ';
    	
    }
    </script>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  13. #13
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Spike..alls working well

    Thanks for your help

    b


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
  •