JavaScript - Problem With Changing Background Using Javascript Onclick

If you wanted to change an ids onclick would int you just do this

document.getElementById("").onclick = "";

Is there a way to do it?

Using onclick=window.open function in js to open a pdf file link in a new popup window.

Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer.

The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage
and the name of the file will be that for the webpage.
Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected,
but I can only use target="-blank" or target="_self" .
I need a popup window to open.

Could use :
oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer')
to advise users how to save the file, and could use
"javascript: void(0)"
to eliminate most mouse context menu options, so the user won't bother try.

So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu?

Any advice massively appreciated!

Hello,

I have a div called pageWrap to wrap my page with the css as
Code:

margin-top:-46px;

I would like to use Javascript onClick on another div.
This Div is called loginButton, the onclick should change the the css of pageWrap to 0px and onclick again should change it back.

If someone could help me with this code, it would be greatly appreciated

Thanks in advance!

I'm doing a school project and I am using JPlayer as a media player. The site is essentially a music jukebox with a search. I have the playlist set up in the jukebox with 5 songs from the start, but I need to make it so that when you do a search and click the plus sign button next to a song, it will change one of the songs in the playlist to that song.

I have the search and everything working but when I click the button it does not actually change the variable in the javascript. Any help or insight to this would be much appreciated.

Below is the javascript (with some PHP, but that shouldn't effect what I need).

Thanks in advance!!

Code:

<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
		<!-- CSS files required for JPlayer -->
		<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
		<link rel="stylesheet" href="skin/jplayeraudio.css" type="text/css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
		<script type="text/javascript">
		<!--
		var nextSet = 1;
		
		<?php
		$songsInDB = 70;
		
		$rand1 = rand(1, $songsInDB);
		$rand2 = rand(1, $songsInDB);
		while($rand2 == $rand1) {
			$rand2 = rand(1, $songsInDB);
		}
		$rand3 = rand(1, $songsInDB);
		while($rand3 == $rand2 || $rand3 == $rand1) {
			$rand3 = rand(1, $songsInDB);
		}
		$rand4 = rand(1, $songsInDB);
		while($rand4 == $rand3 || $rand4 == $rand2 || $rand4 == $rand1) {
			$rand4 = rand(1, $songsInDB);
		}
		$rand5 = rand(1, $songsInDB);
		while($rand5 == $rand4 || $rand5 == $rand3 || $rand5 == $rand2 || $rand5 == $rand1) {
			$rand5 = rand(1, $songsInDB);
		}
		?>
		
		var var1 = <?php echo $rand1; ?>;
		var var1artist = '<?php echo $database->getSongArtist($rand1); ?>';
		var var1title = '<?php echo $database->getSongTitle($rand1); ?>';
		var var2 = <?php echo $rand2; ?>;
		var var2artist = '<?php echo $database->getSongArtist($rand2); ?>';
		var var2title = '<?php echo $database->getSongTitle($rand2); ?>';
		var var3 = <?php echo $rand3; ?>;
		var var3artist = '<?php echo $database->getSongArtist($rand3); ?>';
		var var3title = '<?php echo $database->getSongTitle($rand3); ?>';
		var var4 = <?php echo $rand4; ?>;
		var var4artist = '<?php echo $database->getSongArtist($rand4); ?>';
		var var4title = '<?php echo $database->getSongTitle($rand4); ?>';
		var var5 = <?php echo $rand5; ?>;
		var var5artist = '<?php echo $database->getSongArtist($rand5); ?>';
		var var5title = '<?php echo $database->getSongTitle($rand5); ?>';
		
		
		var playItem = 0;
		
		$(document).ready(function(){

			var myPlayList = [
				{name:var1artist+" - "+var1title, mp3:"music/"+var1+".mp3"},
				{name:var2artist+" - "+var2title, mp3:"music/"+var2+".mp3"},
				{name:var3artist+" - "+var3title, mp3:"music/"+var3+".mp3"},
				{name:var4artist+" - "+var4title, mp3:"music/"+var4+".mp3"},
				{name:var5artist+" - "+var5title, mp3:"music/"+var5+".mp3"},
			];

			// Local copy of jQuery selectors, for performance.
			var jpPlayTime = $("#jplayer_play_time");
			var jpTotalTime = $("#jplayer_total_time");

			$("#jquery_jplayer").jPlayer({
				ready: function() {
					displayPlayList();
					playListInit(false); // Parameter is a boolean for autoplay.
				},
				ended: function() {
					playListNext();
				},
				swfPath:"/js",
				nativeSupport: true,
				supplied: "mp3"
			});

			$("#jplayer_previous").click( function() {
				playListPrev();
				$(this).blur();
				return false;
			});

			$("#jplayer_next").click( function() {
				playListNext();
				$(this).blur();
				return false;
			});

			function displayPlayList() {
				$("#jplayer_playlist ul").empty();
				for (i=0; i < myPlayList.length; i++) {
					var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
					listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
					$("#jplayer_playlist ul").append(listItem);
					$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
						var index = $(this).data("index");
						if (playItem != index) {
							playListChange( index );
						} else {
							$("#jquery_jplayer").jPlayer("play");
						}
						$(this).blur();
						return false;
					});
				}
			}

			function playListInit(autoplay) {
				if(autoplay) {
					playListChange( playItem );
				} else {
					playListConfig( playItem );
				}
			}

			function playListConfig( index ) {
				$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
				$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
				playItem = index;
				$("#jquery_jplayer").jPlayer("setMedia", myPlayList[playItem]);
			}

			function playListChange( index ) {
				playListConfig( index );
				$("#jquery_jplayer").jPlayer("play");
			}

			function playListNext() {
				var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
				playListChange( index );
			}

			function playListPrev() {
				var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
				playListChange( index );
			}
		});
		
		function loadSong(songID, artist, title) {
			if(nextSet == 1){
				var1 = songID;
				var1artist = artist;
				var1title = title;
				nextSet++;
			}

			else if(nextSet == 2){
				var2 = songID;
				var2artist = artist;
				var2title = title;
				nextSet++;
			}

			else if(nextSet == 3){
				var3 = songID;
				var3artist = artist;
				var3title = title;
				nextSet++;
			}

			else if(nextSet == 4){
				var4 = songID;
				var4artist = artist;
				var4title = title;
				nextSet++;
			}

			else if(nextSet == 5){
				var5 = songID;
				var5artist = artist;
				var5title = title;
				nextSet++;
			}

			if(nextSet > 5){
				nextSet = 1;
			}
			
			alert("Song has been queued! "+nextSet)
		}
		
		
		var i = 1;
		$(document).ready(function(){
			$(".search").click(function(){
				$.post("livequery.php", { keywords: $(".keywords").val(), mode: $(".mode").val() }, function(data){
					$("table#content").empty()
					$.each(data, function(){
						var _class = "search_content1";
						if(i % 2 == 0) {
							_class = "search_content2";
						}
						$("table#content").append("<tr class='"+_class+"'><td class='trunc_table' width='4%'><input type='button' value='+' onClick=\"loadSong('"+this.id+"', '"+this.artist+"', '"+this.title+"')\" /></td><td class='trunc_table' width='27%'>" + this.title + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='22%'>" + this.artist + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='16%'>" + this.album + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='14%'>" + this.genre + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='13%'>" + this.mood + "</td></tr>");
						i++;
					});
				}, "json");
			});
		});
		-->
		</script>

Also, the code for the playlist is in the myPlayList array, which I'm referencing the title, artist, and filename with the javascript values. I'm trying to change them in the function loadSong(songID, artist, title). I get the alert popup that I have in there, but no values change as far as the songs.

Hey everyone - got a Q...

I'm having a tabbed panel where the 1st div is originally shown with display: block and the other 3 are display:none to hide, obviously. I want each div to have their own link where if you click the link for div 2 it hides the previous and shows that one etc. Here's what I originally have:

Code:

<script type="text/javascript">
function tab2() {
	document.getElementById('tab-content-2').style.display="block";
	document.getElementById('tab-content-1').style.display="none";
}
</script>

<div id="tab-top">
	<div class="tab-top-l">
	</div>

	<div class="tab-top-main">
		<ul>
			<a href="#" title="Lorem et"><li>Lorem et</li></a>
			<a href="#" title="Lorem et" onclick="tab2()"><li class="not-first">Lorem et</li></a>
			<a href="#" title="Lorem et"><li class="not-first">Lorem et</li></a>
			<a href="#" title="Lorem et"><li class="not-first">Lorem et</li></a>
		</ul>
	</div>
	<div class="tab-top-r">
	</div>
</div>

<div id="tab-content-1" style="display: block;">
	Content 1
</div>
<div id="tab-content-2" style="display: none;">
	Content 2
</div>
<div id="tab-content-3" style="display: none;">
	Content 3
</div>
<div id="tab-content-4" style="display: none;">
	Content 4
</div>

That successfully hides tab 1 and shows tab 2 but I don't know how to do it properly so it hides the previously shown one. One tab should always be shown.

Image attached to show what I mean.

Hi

I am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page.

if(document.images){
var image_array = new Array();
// path to the directory with images
var path = './images/food-drink/food/';
// enumeration of the "active" images
image_array[0] = path + "starters_r.png";
image_array[1] = path + "mains_r.png";
image_array[2] = path + "desserts_r.png";
image_array[3] = path + "childrens_r.png";
image_array[4] = path + "sandwiches_r.png";
image_array[5] = path + "meal_r.png";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++){
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}

function rollover(name, filename){
var fullpath = './images/food-drink/food/' + filename;
document.images[name].src = fullpath;
}

I am trying to change the image with another one, which will change back when a different image is clicked.

The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event.

function swichtabs(wert) {
if (wert=='1'){ /*menu starters tab*/
document.getElementById('tabStarters').className='tab1 tabactive';
document.getElementById('tabMains').className='tab2';
document.getElementById('tabDesserts').className='tab3';
document.getElementById('tabChildrens').className='tab4';
document.getElementById('tabSandwiches').className='tab5';
document.getElementById('tabMeals').className='tab6';
}else if (wert=='2'){
etc...

The html code for the image is:

<a href="#starters"
onmouseout="rollover('btnStarters','starters.png')"
onmouseover="rollover('btnStarters','starters_r.png')"
onClick="this.onMouseOver=null;this.onMouseOut=null;
blendon('starters');
blendoff('mains');etc...;
swichtabs('1');" onclick="return false;" title="Starters"
id="tabStarters">
<img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" />
</a>

I would be grateful if you could point me in the right direction.

Hi all,

I hope that someone can help me with this strange problem I have here.

I have some script which changes a button and changes the onclick event.

The strange thing is that although it is changing it. All the events have the same parameter even though my code is giving each button's onclick event it's own unique parameter.

Here's my Code.
Code:

	var AllocPeople = window.opener.document.getElementById('AllocPeople');
	
	if(AllocPeople.value.length > 0)
	{
		var people = AllocPeople.value.split(",");
		var Controls = new Array();
		for(var P in people)
		{
			var id = people[P];
			Controls[P] = document.getElementById('bt_AP_'+id);
			Controls[P].innerHTML = "Deallocate";
			Controls[P].onclick = function() {Remove_Player(id)};
		}
		
	}

Thanking you all in advance.

Ok, 'nother head-banger for the hardcore!

I have a "contact us" <a> with the id 'contact' on the main page, which is supposed to change the source file of an iframe to the contact page. Except when I click on "contact us" nothing happens.

I've tried to get this to work several different ways, and suspect that the problem is purely syntax, but I just haven't been able to figure it out.

Here's the code:

The snippet on the main page (index.html):

Code:

                <div id="linkListContact" class="LinkList">
				<img id="linkListContactBg" class="SideBarBgImg" src="Assets/Backgrounds/SideBar/ContactBg.png"></img>
                    <span>
                    <ul>
                        <li>
                            <div><a id="contact">Contact Us</a>
                            </div>
                        </li>
                    </ul>
                    </span>
                </div>

... and the relevant Javascript:

Code:

function setIFrame(frameSource)
	{
		document.getElementById('mainWindow').src = frameSource;
	}

function setContactLink()
	{
		var contactURL = "http://katabasis.spreadshirt.com/shop/imprint"
		document.getElementById('contact').onclick = new Function ( "setIFrame( 'contactURL' )" );
	}

The setIFrame function is used to call the content initially when the page loads, and is working beautifully in that context. You can see the problem in action at the actual site: www.katabasis-apparel.com.

Thanks.

Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them,
i need 2 things that they'll make:
1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3
what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3.

2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg

thanks!

Hey guys, So I have a top navigation bar with links in it and when I hoover over a link I want the navigation bars background image to change. The links are actually Images with an <a href=""></a> tag around them. The site isn't live so I can't give you a link. Here is the code:

HTML ( I want the id="Nav" background to change when I hover over the "Home" "Forums" "Downloads" "Contact" Images )
Code:

				<div id="Nav">
					<div id="Splitters" class="clearfix">
						<div id="group1">
							<img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
						</div>
						<div id="group2">
							<img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
						</div>
						<div id="group3">
							<img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" />
						</div>
					</div>
					<div id="Nav_Text" class="clearfix">
						<a href="#">
							<img id="Home" src="images/Home.png" alt="" width="48" height="11" />
						</a>
						<a href="#">
							<img id="Forums" src="images/Forums.png" alt="" width="71" height="11" />
						</a>
						<a href="#">
							<img id="Downloads" src="images/Downloads.png" alt="" width="109" height="11" />
						</a>
						<a href="#">
							<img id="Contact" src="images/Contact.png" alt="" width="80" height="11" />
						</a>
					</div>
				</div>

CSS
Code:

#Nav {
	background: url(images/Main.png) no-repeat;
	left: 0;
	min-height: 70px;
	position: absolute;
	top: 0;
	width: 100%;
}
#Splitters {
	left: 421px;
	position: absolute;
	top: 0;
	width: 334px;
}
#group1 {
	display: inline;
	float: left;
	margin: 0 0 0 107px;
	width: 2px;
}
#Layer_3_copy {
	clear: both;
	float: left;
	margin: 0;
	width: 2px;
}
#group2 {
	float: left;
	margin: 0 0 0 95px;
	width: 2px;
}
#Layer_3_copy_3 {
	clear: both;
	float: left;
	margin: 0;
	width: 2px;
}
#group3 {
	float: right;
	margin: 0;
	width: 2px;
}
#Layer_3_copy_4 {
	clear: both;
	float: left;
	margin: 0;
	width: 2px;
}
#Nav_Text {
	left: 449px;
	position: absolute;
	top: 29px;
	width: 397px;
}

After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly.


Code:

<html>
<title>Welcome :D</title>
<head>

    <style type="text/css">
	body {
		background-color:E6E6E6;	
	}
    </style>
	<script type="text/javascript">
	//Pre loading images to be used with check boxes.
	function preLoad(){
	Eyeball= new Image(400,200)
	Eyeball.src = "Eyeball.jpg"

	Smileys = new Image(400,200)
	Smileys.src = "Smileys.gif"

	goodAfternoon = new Image(400,200)
	goodAfternoon.src = "Good Afternoon.gif"
	
	goodAfternoonFinal = new Image(400,200)
	goodAfternoonFinal.src = "Good Afternoon.gif"
	
	zombies=new Image()
	zombies.src = "Zombies.jpg"
	
	}
	
	function validate(){
		if(document.getElementById("cb1").checked){
		document.goodAfternoon.src=Eyeball.src;
		}else{
		document.goodAfternoon.src=Smileys.src;
		}
	}
	function reset(){
		cb1.checked=false;
		document.goodAfternoon.src=goodAfternoonFinal.src; 
	}
	
	var i=0;
	function myalert(){
		i++
		if(i == 1){
		alert("I dare you to press me again....");
		}
		if(i == 2){
		
		}
		if(i == 3){
		i = 0;
		document.body.background = "zombies.src";
		}
	}
	
</script>
</head>
<body onLoad="javascript:preLoad()">	

This is where I learn a lot of my coding for Java, JavaScript, and HTML
	<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
	
</br>

 "Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
 <img src="Good Afternoon.gif" name="goodAfternoon">
 <input type="button" id="cb2" value="RESET" onClick="reset()"/>

	
	</BR></br></br></br></br>
    Hello, thank you for visiting my webpage I hope you like it.

  <input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>

Hi, I'm working on a site that has a sky as the background, the idea is that the background image will change according the the time of day... Sunrise, day, sunset, night...

I have been using this code...

<!-- JavaScript -->
<script language="JavaScript">
var d = new Date()
var h = d.getHours()
//
if (h < 6) document.write('<body background="sky.jpg" bgcolor="white">')
else if (h < 12) document.write('<body background="day.jpg" bgcolor="white">')
else if (h < 18) document.write('<body background="day.jpg" bgcolor="white">')
else if (h < 24) document.write('<body background="night.jpg" bgcolor="white">')
</script>

This works fine for most hours but when in the hours of 5, 12, 18 and 24 the screen is blank (white background no image) any ideas why this might be happening?

Thanks for any ideas in advance!

Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function.

I think I am overthinking the process - as always!

Any help pointing out my mistake(s) would be greatly appreciated.

Code:

function show_color()

{
var show_prompt = prompt("Please enter a color name");

var change_body = document.getElementById("body");;

show_prompt = change_body;

change_body = change(this.id);


}


function change(id)
    {

        switch (id)
        {
            case 'red':
                document.body.bgColor = "red";
                break;

            case 'green':
                document.body.bgColor = "green";
                break;

            case 'yellow':
                document.body.bgColor = "yellow";
                break;    

            case 'blue':
                document.body.bgColor = "blue";
                break;

             case 'pink':
                document.body.bgColor = "pink";
                break;
        }
    }

I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes.

So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions?

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>Welcome to Whitetail Fantasies</title>
	<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">

		body {
			font-family:Tahoma, Geneva, sans-serif;
			background-color: #000;
			}
			
		#background {
			position:absolute;
			float:left;
			width:1024px;
			height:768px;
			background-image:url(wf_layout/wf_bkgnd-1.jpg);
			z-index:0;
}
		
	</style>
	<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
    </script>
</head>



<body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')">

<div id="background"></div>

<div id="outer">
	
<div id="header"></div>
    	
		<div id="wrapper">
    
  			<div id="left_side"><br /><br /><br /><br /><br /><br /><br />
            	<table width="140" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices"  /></a></td>
  </tr>
  <tr>
    <td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
            </div>
            
        	<div id="content_area">
            <br /><br /><br />
        	  <iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe>
        	</div>
        	iu
        
		</div>
        
</div>
<div id="footer"></div>



<map name="Map" id="Map">
  <area shape="poly" coords="0,100" href="#" />
  <area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" />
</map>
</body>


</html>

Hey all,

I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load.

I'm clueless as to how to do this.

Here's my code for the image attached:

Code:

<div class="colour-picker">
	<div class="tick-off" id="red" onclick="changeclass();">
	</div>
	<div class="tick-off" id="blue" onclick="changeclass();">
	</div>
	<div class="tick-off" id="black" onclick="changeclass();">
	</div>
	<div style="float: right; margin-right: 6px;">Choose colour:</div>
</div>

CSS:

Code:

.colour-picker {
    float: right;
    margin: 0 10px 0 0;
    line-height: 30px;
    text-shadow: #292929 2px 1px 1px;
    font-size: 15px;
    color: #FFF;
    padding: 0px;
    height: 32px;
    font-weight: normal;
}

.colour-picker #red {
	background-color: red;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #blue {
	background-color: blue;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker #black {
	background-color: black;
	width: 20px;
	height: 19px;
	display: block;
	margin: 6px 2px 8px 2px;
	float: right;
}

.colour-picker .tick-off {
	background-image: none;
}

.colour-picker .tick-on {
	background-image: url(images/colour-tick.png);
	background-repeat: no-repeat;
	background-position: center center;
}

Can anyone tell me how to do it?

Thanks!

Adam