|
JavaScript - Toggle Button (image) To Change Background`
Hi
Complete novice with Java so need some help please! I want to put a button on a website that when clicked changes the background. The button needs to be an image. For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off") I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click. I guess it needs an if/else statement but not sure. Thanks for any help!!!! Similar TutorialsI'm trying to make a page where you can change a page's layout through 2 separate CSS's via a button. i want to button to change text when it toggles the layouts as well. i have no clue how to do this with an entire CSS file, but here is something i made to change the background. could i use this logic to change the CSS of a page? HTML <in Code: <input type="button" value="change layout" onclick="toggle()" /> JavaScript Code: var flag = 0; function toggle(){
if(flag==0){
document.getElementById("container").style.backgroundImage="blah.jpg";
flag=1; } else if(flag==1){
document.getElementById("container").style.backgroundImage="blah2.jpg";
flag=0; } }
Hello guys, first post so please be kind. Usually try and find a solution and edit to work for me but this time its a little trickier. I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page. ideally what I want is say 3 buttons. button1img button2img button3img <// that when clicked control <div id=target><this target content is now set to 2></div> //and toggle between options and only one at a time can be on. The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page. if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently. i understand this is a little trickier, im hoping it is possible. cheers steve Hi, Im using a toggle script on my site. Im trying to add functionality. Currently, when you click on a toggle, that particular toggle expands and changes the toggle image. Ive made it so when you click the text on the top left, all the toggles open or close. However, the toggle image doesnt change (+ / -) Here is my code: Code: $(document).ready(function(){
$(".toggle_container").hide();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("h2.trigger2").toggle(function(){
$(".toggle_container").slideDown();
}, function () {
$(".toggle_container").slideUp();
});
});
Here is my site: http://www.zombiemod.com/sm/test6.html Just to explain it better. When you click on the center toggles, the background image changes. When you click on "Web Design and Development" on the left, the background images dont change. Im trying to get it so it changes as well. Can anyone help with this? Pleas how can i change div bg color with active chcecked radio button <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div> - if checked, change color from #fff to #ccc For checkboxes i find this <span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span> Thnx for help in advance I am wondering if it would be possible to add a Cookie to this code i found, i am wanting the browser to remember the chosen background image and save it when the user closes the browser. Currently when the option is selected it does not remember the choice when you then go back to the page, any help on this would be much appreciated! Many Thanks Code: <script type="text/javascript">
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
</script>
<body id="shelf"> <select id="themes" onChange="changeTheme()"> <option value="images/background1.jpg">Default</option> <option value="images/background2.jpg">Oriental</option> </select> Could anyone show me a script that would allow the user whos on my site change the background image from the default color to an image from a URL? And then it would have to save their choice in a cookie. 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! hello everyone. i am new to this forum and new with webdesigning.. i was wondering if anyone can help guide me to get the right coding im trying to make it so that when clicking thumbnails it will change the full screen background to its respective picture along with continuing its automatic slideshow www.petpawfurry.com is the website in which im working on. also, is there anyway to make the slider, slide to the right, instead of fading in and out? thanks so much, hope someone can help Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ Hi, I have a button with a class name as below: <input type="button" class="test" value="Add" onclick=Dothis(this);> class test { background-image: url("test.png"); } I would like to disable the button when clicked function Dothis (element) { element.disabled = 'true'; } This is working fine (i'm seeing it as disabled(grayedout)) when i wont set any class. But when i set the class to "test" i'm not seeing any change. Can you please let me know how i can resolve this. I am trying to make a button that would change the background image whenever somebody clicks it. I have tried something along the lines of this: Quote: <input type="button" value="Pattern1" onClick="background-image: url(background.png);background-repeat: no-repeat;"> and, Quote: <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. Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again. Code: <script type="text/javascript">
$(document).ready(function(){
$('.accordion-content').hide();
//toggle the componenet with class accordion
$('.accordion-toggle').click(function(){
//$(this).toggleClass('toggle-accordion-active');
$(this).next('.accordion-content').slideToggle(300);
});
$('#accordion-expand-all').click(function(){
$('.accordion-content').slideToggle(300);
});
});
</script>
Code: <p><a id="accordion-expand-all" href="#">Show</a></p> i am trying to change my background image after click on given in grid option. any body show me complete code in java script. resource: HP Laptop Repair and Solution Service Center in Delhi Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! Basically I want to have a different background image for every time of the day. The function by itself works okay with onclick or onload placed in body. Code: function changesky()
{
document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x";
}
What I want to do is have my background change in addition to a message. So instead of just "Good Morning" text I also want the background to change. Code: if (time>=4 && time<12)
{
document.write ("<p>Good Morning!</p>");
document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x";
}
Tried this, but it didn't work so what's the format for calling a function inside of an if statement? Or what other method should I use to do this? I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image. I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click". The only code sources i have found will swap images in the same table area and not to any image existing in the entire document. thanx Hi, I have a textual "link" that, when clicked, I want the text to change, and I want a number of checkboxes to be toggled on or off. Here's my code. Currently, I just have the text changing - I don't know how to simultaneously check/uncheck checkboxes. Code: <head>
<script language="JavaScript" type="text/JavaScript">
<!-- toggle off and on, currently unused -->
function checkAll(checkname, exby)
{
for (i = 0; i < checkname.length; i++)
checkname[i].checked = exby.checked? true:false
}
<!-- changes text on click, currently used -->
function exp(obj)
{
if(obj.oldText)
{
obj.innerHTML = obj.oldText;
obj.oldText = null;
}
else
{
obj.oldText = obj.innerHTML;
obj.innerHTML = 'Check All';
}
}
</script>
</head>
<body>
<div id="checkboxes">
<table bgcolor="#DCDCDC" cellpadding="10">
<tr><th colspan="11" align="left">
<a href="#" onclick="javascript:exp(this);">Clear All</a><br/>
</th></tr>
<tr align="center">
<td>Check1
<br><input type="checkbox" name="checkGroup" value="chk-1" checked="yes" /></td>
<td>Check2
<br><input type="checkbox" name="checkGroup" value="chk-2" checked="yes" /></td>
<td>Check3
<br><input type="checkbox" name="checkGroup" value="chk-3" checked="yes" /></td>
</tr>
</table>
</div>
</body>
Thanks for reading! Kevin Delete.
Hi, Hit a snag creating code for toggling with radio buttons, alert debugs return undefined for the radio button values. Would someone assist? HTML Code: <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" />
<label for="is_new0" class="artist_radio_label">Yes</label>
<input type="radio" name="artist" onclick="toggleForm(this.value)" value="new" />
<label for="is_new1" class="artist_radio_label">No</label>
From Document Head Code: <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Add a Print</title> <link rel="stylesheet" href="../c/forms.css" type="text/css" /> <script type="text/javascript" src="../j/global.js"></script> <script type="text/javascript" src="../j/add_print.js"></script> </script> </head> add_print.js Code: function toggleForm(artist)
{
if (!document.getElementById) return false;
var existing = document.getElementById("existing_artist");
var newArtist = document.getElementById("new_artist");
existing.style.display = "none";
newArtist.style.display = "none";
if(this.value == existing){
existing.style.display = "block";
}else{
newArtist.style.display = "block";
}
}
addLoadEvent(toggleForm);
global.js - Add Load Event Code: function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent();
Hi Coders, I was wondering if anyone knows how you would create a link when clicked will change the width of the content. I have a feeling this will use jQuery? E.g. A link saying 'expand' will change the width of the body to 1000px and change the link to 'contract'. When the link 'contract' is clicked it will change the width back to 800px and change the link to 'expand' Thanks in advance! Haydn. |
|||||||