I am relatively new to working with Javascript so I am hoping somebody can help me out here. What I would like to do is have the div background change when a user clicks on another image or link.
I set up a few classes in CSS each with their own background image. Here is what I have but I am not sure what I am missing.
[Code]...
I've tried to adapt some pre-existing scripts to do this but not getting anywhereI have five navigation div's.They are:
#navtab1
#navtab2
#navtab3
[code]....
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?
<?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">
[code]....
l have got a series of menus. What l want to do is change the background-color of the link onclick.
What l have done use jquery like this
jQuery('.menu a').click(function(){
var clz = jQuery(this).attr('id');
jQuery(this).attr('class','active'+clz);
})
This is not work.The code needs to work on mobile phones
I am trying to change my sites background color. The color changes but it doesn't go back to the first image anymore. does anybody know what the problem could be?
jQuery Code:
HTML Code:
I want to make it so that when I click on something, it changes what document.onclick does.
This is a simplified version of what I'm trying to do:
Code:
<div id="clickme" onclick="document.onclick = function(){ alert ('This should not be alerted on the first click'); }">Click here</div>
However, as you'll notice, the alert box shows up on the first click as well. The only way I have been able to get around this behaviour is to have the first onclick execute a timer that will then set the document.onclick after 1ms, however this seems very messy to me.
Here is my script -- Applied in <head>
<script language="JavaScript">
var bgImage = new Array(); // don't change this
bgImage[0] = "images/aboutus_1.jpg";
[code]....
this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1.
I try to find working example, but no luck.I need this very simply javascript to onClick change value and second click change value back and third click change value again back and so on..
View 7 Replies View RelatedI 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:
<div class="colour-picker">
<div class="tick-off" id="red" onclick="changeclass();">
</div>
[code]....
I'm pretty new at javascript. I came here with my last problem and it was solved quickly and really helped. Alas now I am stuck again.
I have a series of buttons on the stage, each with their own div tag with the same ID. The number of buttons will be dynamic based on the users account. When you click the button, I would like the background of the div tag, which contains that button, to change. I have no idea how to go about this. I've tried different approaches but none seem to be panning out. Is there a simple this.div function that I could call?
How can I change the background IMAGE (not just color) of a CELL in a table?
I know that I can do this using CSS, but I really need to be able to do it
using JavaScript. Anyone know how?
Must be able to change the image for each cell - not the whole table.
How can I change the background color of a DIV when the mouse is over it?
View 3 Replies View RelatedIs it possible to have a different background image on IE to firefox, I am doing my background image as shown below:
However I want script that says if IE, show unbranded_bg2.png and if firefox show unbranded_bg.png.
Clearly I'm doing something wrong. Here's my external javascript:
document.getElementById('maincontent').style.backgroundColor = "#660000";
Here's my external CSS
#maincontent {
background-color: #999;
}
Here's my HTML:
<div id="container">
<div id="maincontent">
[code]...
Nothing happens. What am I doing wrong?
what I want to do is create a menu with rollover buttons but each button also changes the background image of a div.
I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong.
I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference).
<body onload="addHandlers()">
<script type="text/javascript" language="javascript">
function addHandlers(){
var allMenus =
[Code]....
Change background color a row of depending on cell data on that row. e.g Items
<table border="1">
<tr>
<td><b>Cost</b></td>
<td><b>Item</b></td>
[code]....
I want to change the background color ONLY if it is #d0d0d0, so I made up these scripts:
<b class="nav1" id="nav1" onclick="highlightnav1()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 1</b>
<b class="nav2" id="nav2" onclick="highlightnav2()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 2</b>
<b class="nav3" id="nav3" onclick="highlightnav3()" onmouseover="overnavigation(this)" onmouseout="outnavigation(this)">Link 3</b>[code]....
This doesn't work,
I'm currently using this script to highlight the text within a whole row of a table on mouseOver.
What I'd like to do is change it so that the background color changes. I've tried 'this.style.backgroundcolor = "#e00000" ' but with no success.
function highlightRows() {
if (!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
rows[i].onmouseover = function() {
this.style.color = "#e00000";
}
rows[i].onmouseout = function() {
this.style.color = "#000000";
}
}
}
addLoadEvent(highlightRows);
<html>
<head>
<title>Web just for training</title>
<script type="text/javascrip">
[code]....
Here is my code to change the background color but I does not work!
We've just been introduced to Javascript. I have a document where as it loads it gives an alert box. Upon clicking "OK" it brings up a header and an image and then another alert box stating that the page is now loaded. However, I need to change the background of the document by clicking on the "OK" button in the second alert box but can't figure out how to do that.
<style type="text/css">
.header2 {
text-align:center;
} p.center {
text-align:center;
} .center img {
border-style: none;
}
</style>
<script type="text/Javascript">
function rollover_onmouseover() {
document.images.real.src = "../../Images/Homework 13/dream.jpg";
} function rollover_onmouseout() {
document.images.real.src = "../../Images/Homework 13/real.jpg";
}
</script></head><body>
<script type="text/Javascript">
alert("I'm about to load my page");
</script>
<script type="text/Javascript">
document.write('<h2 class="header2">This h2 header was loaded using Javascript</h2>');
</script>
<p class="center">Point at Llumi to see what she's thinking<br />
<a href="Homework13.html" id="rollover" onmouseover="rollover_onmouseover()" onmouseout="rollover_onmouseout()">
<img src="../../Images/Homework 13/real.jpg" alt="" name="real" /></a>
</p><script type="text/Javascript">
alert("My page is now loaded");
</script></body></html>
I wish to change the background colours of two divs, one is blue and the other is gray.i already have the pull down onchange working that changes the fields to active or disabled depending on the selection made and wish to change the background to gray out the div that has disabled fields.how is this done using Javascript
View 1 Replies View RelatedI have few backgrounds for my website, which want to change background image after few seconds with some fading effects.
I am using <body><div id="bg">Contetns</div></body>
There are three div and inside each of them there is an anchor tag.
When the anchor tag is clicked it makes an Ajax call and displays the content in the new div. Lets call this our forth div. (this is irrelevant to the title but just want to mention this because I am calling a function onclick.)
What I want to happen is when they click on of the anchor tag I want to change the background color of the div relative to the anchor tag. For example, if they click on the first anchor tag which is inside the first div I want the first div background color to change.
Code:
<style>
.ourDiv{
background:#003366;
[Code]....
I currently have a web site in which I am using some Javascript to change the Background of a DIV.
The DIV is defined as follows :
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
and the Javascript I am using is as follows :
var docEl = document.getElementById('outerscreen'); docEl.style.backgroundImage = "url('pics/intro.gif')";
My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.
Can anyone shed any light on what the problem is and how I might be able to resovle this.
I'm building a site for a friend and I know what I want to do, but I'm struggling to get any script to fit the bill. It's a little beyond me as it's my first foray into javascript aside from gallerys/sliders.
My page layout is as follows: Body > wrapper > header > 3 columns >footer
I want to put my links for my navigation in the 1st column div and on mouseover change the background image in the centre column div. the following script works well, but changes the document body background as you can see from the code.
[Code]...
I currently have a web site in which I am using some Javascript to change the Background of a DIV.[code]...
View 3 Replies View Related