Switch Background Image onClick

  • Resolved Drew Baker

    (@dbaker)


    17 years, 2 months ago

    Hi Guys,
    I am making a theme that will hopefully let you change the pages background image by clicking a link on an image map. The code I am using is this:

    <img src="images/Cactus_Home_Button.jpg" border="0" usemap="#Map1" />
<map name="Map1" id="Map1">
	<area shape="poly" coords="20,40,335,7,339,30,22,64" href="<?php echo get_settings('home'); ?>" alt="Homepage"/>
	<area shape="poly" coords="22,67,111,57,111,77,24,87" href="#" onClick="document.body.background='<?php bloginfo('template_directory'); ?>/images/surfbackdrop1.jpg'" alt="Change to Surf Background Image" />
	<area shape="poly" coords="119,56,120,77,226,67,225,45" href="#" onClick="document.body.background='<?php bloginfo('template_directory'); ?>/images/skatebackdrop1.jpg'" alt="Change to Skate Background Image" />
	<area shape="poly" coords="233,44,233,65,336,55,341,33" href="#" onClick="document.body.background='<?php bloginfo('template_directory'); ?>/images/snowbackdrop1.jpg'" alt="Change to Snow Background Image" />
</map>

    The page is here: https://www.popmag.com.au/cactusblack/

    The problem is it doesn’t work. I’m not sure why. If I put it into a normal HTML page it works fine, so I suspect it is something to do with WordPress and its PHP page constructing. Anyway, it’s over my head so I thought I would ask here.

    There might be a better way to achieve this (like switching the entire style sheet) although this way seems the most efficient, so let me know what you think.

    Thanks,
    Drew

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Drew Baker

    (@dbaker)

    OK, so now I have figured out that it stops working if I use CSS to set what the default background should be. So it doesn’t have anything to do WordPress then. Can anyone help with a way to switch the back ground using a link? Thanks.

    Thread Starter Drew Baker

    (@dbaker)

    I’ve tried using this java script, but again it only works if I don’t use the style sheet.

    <head
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script language="JavaScript">
<!--

// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.

var backImage = new Array(); // don't change this

// Enter the image filenames you wish to use.
// Follow the pattern to use more images.  The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.

// Note how backImage[3] = "" -- which would
// set the page to *no* background image.

backImage[0] = "images/surfbackdrop1.jpg";
backImage[1] = "images/skatebackdrop1.jpg";
backImage[2] = "images/snowbackdrop1.jpg";
backImage[3] = "";

// Do not edit below this line.
//-----------------------------

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>
<img src="images/Cactus_Home_Button.jpg" border="0" usemap="#Map1" />
<map name="Map1" id="Map1">
	<area shape="poly" coords="20,40,335,7,339,30,22,64" href="<?php echo get_settings('home'); ?>" alt="Homepage"/>
	<area shape="poly" coords="22,67,111,57,111,77,24,87" href="javascript:changeBGImage(0)" alt="Change to Surf Background Image" />
	<area shape="poly" coords="119,56,120,77,226,67,225,45" href="javascript:changeBGImage(1)" alt="Change to Skate Background Image" />
	<area shape="poly" coords="233,44,233,65,336,55,341,33" href="javascript:changeBGImage(2)" alt="Change to Snow Background Image" />
</map>
</body>
    Thread Starter Drew Baker

    (@dbaker)

    I found this forum post that could help, but I can’t figure it out:
    https://www.dynamicdrive.com/forums/showthread.php?t=26778

    Thread Starter Drew Baker

    (@dbaker)

    I think this is the answer but I can’t figure it out ether. Any help?
    https://csscreator.com/?q=generator/userpref.php

    Thanks.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    Try using document.body.style.backgroundImage instead of document.body.background.

    Alternatively, give the body a unique id in the html code and then use document.getElementById('your-id').style.backgroundImage instead. This may be more cross-browser compatible.

    Thread Starter Drew Baker

    (@dbaker)

    Thanks Otto for the help.

    I tried this like you suggested and had no luck:

    <head>
</head>
<body id="bodytag">
<img src="images/Cactus_Home_Button.jpg" border="0" usemap="#Map1" />
<map name="Map1" id="Map1">
	<area shape="poly" coords="20,40,335,7,339,30,22,64" href="<?php echo get_settings('home'); ?>" alt="Homepage"/>
	<area shape="poly" coords="22,67,111,57,111,77,24,87" href="#" onClick="document.getElementById('bodytag').style.backgroundImage='<?php bloginfo('template_directory'); ?>/images/surfbackdrop1.jpg'" alt="Change to Surf Background Image" />
	<area shape="poly" coords="119,56,120,77,226,67,225,45" href="#" onClick="document.getElementById('bodytag').style.backgroundImage='<?php bloginfo('template_directory'); ?>/images/skatebackdrop1.jpg'" alt="Change to Skate Background Image" />
	<area shape="poly" coords="233,44,233,65,336,55,341,33" href="#" onClick="document.getElementById('bodytag').style.backgroundImage='<?php bloginfo('template_directory'); ?>/images/snowbackdrop1.jpg'" alt="Change to Snow Background Image" />
</map>
</body>

    (Of course I removed the PHP code first, but I am leaving it in here so you can see the end result I am going for).

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    Do you have a link to an actual page with this code? The link you gave in the first post just returns a 404 error.

    Thread Starter Drew Baker

    (@dbaker)

    Sorry about that, the link is here. I have since changed to use the method described here because it uses cookies and thus the background change will remain until the user changes it again. I have a forum post about it here because I can’t get it working either. I think it due to my onclick syntax being wrong.

    Thanks again for the help.

    Thread Starter Drew Baker

    (@dbaker)

    Got it! I have it working now using the java script found here: https://www.csscreator.com/generator/userpref.php

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Switch Background Image onClick’ is closed to new replies.