|
JavaScript - Backgroundimage Change
Hi
i have a div box with some menu links as text. i need to change the background image of the whole div when i mouseover it and need to bring the original image when i mouseout it. i have used a javascript to do this. and here is my code <style type="text/css"> #test { background-image:url(home.gif); width:100%; } </style> <script type="text/javascript"> function changeBgImage (image, id) { var element = document.getElementById(id); element.style.backgroundImage = "url("+image+")"; } </script> <table width="100%" height="305" border="0" cellpadding="0" cellspacing="0" onMouseOver="changeBgImage('home1.gif', 'test1')" onMouseOut="changeBgImage(home.gif, 'test1')" id="test1"> this works fine but when i hover text links which is in the div, the background image flickers on mouseout in ie6. How to overcome this. Similar TutorialsHi there, I have two textboxes and I want some images to be displayed in my textboxes randomly if randomNumber==1 let textbox1/textbox2 backgroundimage change and if randomnumber==2 let textbox1 backgroundimage change again. I think I need some fixing in the following lines: document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); Thanks for any help.. PHP Code: <script> setInterval("showimages()",500); function showimages() { var rno=Math.floor(Math.random()*2)+1; document.getElementById("box1").value=rno; if(rno==1){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(2.jpg)';"); } if(rno==2){ document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(3.jpg)';"); document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(4.jpg)';"); } } </script> <input type="text" id="txtbox1" style="position:absolute;top:200px;left:200px;height:150px"> <input type="text" id="txtbox2" style="position:absolute;top:200px;left:500px;height:150px"> <input type="text" id="box1" style="position:absolute;top:100px;left:100px;width:40px;"> <input type="button" onclick='location.reload()' style="position:absolute;top:20px;left:100px;"> Hi all, I've a set of similar elements (to display thumbnails) having style attributes like Code: style="background:#ddd url('/images/photos/thumbs/89625045.jpg') top center no-repeat;"
Code: style="background:#ddd url('/images/photos/thumbs/708905 copy.jpg') top center no-repeat;"
etc. I need to get the background-image urls from the style (and then remove the part thumbs). My intention is to dynamically create an img element corresponding to each thumbnail image. I was thinking to use a substr() to get the urls and replace() to remove "thumbs", but the property style.backgrounImage gives a string like Code: url("/images/photos/thumbs/4923face.jpg")
in FF3, where as in FF2 and IE6 it gives Code: url(/images/photos/thumbs/4923face.jpg) . How can I proceed with this? Any help would be apreciated. Thanks. Hi every1, i am quite new to java-script programming. i created two images , one to display when during 'event.mouseout' and the other during mouseover Both images are the background images of a td element. I created a javascript : document.getElementById('bg_image').style.backgroundImage=url('sample.gif'); it works fine in Internet Explorer but doesnt in mozilla or opera thanx in advnc 4 any1 who wants ta help me. http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hello, Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so. Code: SList.getSelect = function (slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if (SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else {
var addata = '<option>- - -</option>';
for (var i = 0; i < SList[slist][option].length; i++) {
addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
}
// cases for each dropdown list
switch (slist) {
case 'slist2':
document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
document.getElementById('slist3').innerHTML = '';
break;
case 'slist3':
document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
break;
}
}
} else {
// empty the tags for select lists
if (slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
document.getElementById('slist3').innerHTML = '';
} else if (slist == 'slist3') {
document.getElementById('slist3').innerHTML = '';
}
}
}
I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies. Or do I simply need to make another big list to do them all? Best Regards, Tim Reply With Quote 03-21-2013, 06:35 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period. I would certainly toss out your entire getSelect() function and rewrite it. But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point. If that's what you are asking, one possible way: Code: SList.slist2 = {
...
"United Kingdom" :
{ "England" : ["Staffordshire", "Derby", ... ],
"Scotland" : ["Edinburgh", ... ],
"Wales" : [ ... ],
"Northern Ireland" : [ .... ]
},
...
};
I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting? I used div tag in my field. that field has date value. there is another field that is also date field and it's in div tag. when i change the first date field automatically second date field should be changed with the first date value. Here is my first date field code. Code: <div id=apptTimeEditOD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
<%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate()) %>
</div>
Here is my second date field code. Code: <div id=apptTimeEditEnD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
<%=_r.drawDatePicker( _ahsPage, "startDate1", appt.getApptDate() )%>
<div id=apptODEndTime style="position: absolute; width: 90; height: 22; left: 140; top: 2; text-align: left;" > </div>
</div>
how do i change my 2nd date field value with first date value when i do change in first date field. I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow: 1 Door phone 1.1 Ready Kits 1.1.1 Audioset 1.1.2 Videoset 1.2 Audio Kits 1.2.1 Elphone 1.2.2 Video Door phone 2 CCTV 2.1 Camera 2.1.1 Dome Camera 2.1.2 IP Camera 2.2 Others Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open...1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone...evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened. I hope it will be possible to achieve this and i would be helped. My succeeding post will be the javascript i need help with. Thanks can anyone give me a sample code for this situation ? - button A = labeled as Unlocked - when I on mouse over button A the label should turn into "Lock me ?" - and then when I click the button, the label will change to "Locked" Hello, Is there a way to change the font of the text within a document.writeln statement? Here is my code: Code: <pre><script type="text/javascript">
var num1= prompt ("Enter a number between 1 and 5");
try {
if(x>5) {
throw "Err1";
}
else if(x<1) {
throw "Err2";
}
}
catch(err) {
if(err=="Err1") {
document.writeln("Error! The value is too high.");
document.writeln("Please enter a new value.");
}
if(err=="Err2"){
document.writeln("Error! The value is too low.");
document.writeln("Please enter a new value.");
}
}</script></pre>
Thanks. Hi can you change this javascript for me please -------------------------------------------------------------------------- -------------------------------------------------------------------------- Code: <script type = "text/javascript">
function LogIn(){
loggedin=false;
username="";
password="";
username=prompt("Username:","");
username=username.toLowerCase();
password=prompt("Password:","");
password=password.toLowerCase();
if (username=="guest" && password=="login") {
loggedin=true;
window.location="home-page.html";
}
if (username=="guest2" && password=="login2") {
loggedin=true;
window.location="home-page2.html";
}
if (loggedin==false) {
alert("Invalid login!");
}
}
</SCRIPT>
---------------------------------------------------------------------------------------------------------------------------------------------------- Can someone change this script to instead of prompts i would like two text boxes and a button to login p.s There is also a different bit but thats for the button if you need this part then please ask Dear Experts Var str="this is a string" I want to know how to replace this with Uppercase while using regular expression. Please help I'm trying to determine whether a word exists in the URL and if so, change the CSS of a div. I know how to do each task individually, but combining the two is giving me trouble. So far I have: Code: function checkSent(divname)
{
if(document.URL.indexOf("sent") >= 0)
*document.getElementById(success).style.display = 'block';
}
var sentornot = checkSent();
// If the URL contains the word, sent, then change the display of the element "success" to block
I can successfully determine whether the string exists in the URL by adding an alert, but the Javascript to change the CSS doesn't work. The CSS for the div element "success" is as follows: Code: #success {
display: none;
}
Any help is appreciated! Thanks! Edit: If needed, this is the code I used to test whether the "check URL" portion works: Code: function checkSent(divname)
{
if(document.URL.indexOf("sent") >= 0) {
alert("found");
document.getElementById("success").style.display = 'block'; //this line doesn't work :(
}
else{ alert("not found"); }
}
I've got an idea for simplifying my code and avoid a bunch of switch functions but don't know how, though I assume it's possible. How do I write a function to change/insert only part of an img src? in other words something along the lines of if url contains: "/folder1/folder3/"; change this to: "/folder1/ folder2 /folder3/"; Hi.. Im currently working on my project and I have a big problem with changing the layout of tabs. Basically, when I launch my GUI, it will display "No Data Available" in my view tab. In my Add tab, I have the admin panel whereby the user enters the data to be stored and display. the problem now lies when displaying. It is a juke ringtone gallery whereby when there are data being stored in the database, it will display the following in a Gridlayout; I applied the ChangeListener to the JTabbedPane which is tp. I added tabs using tp.add. I declared this in my ChangeListener: if(tp.getSelectedIndex() == 0) createViewPanel(); else if(tp.getSelectedIndex()==1) createAddPanel(); where createViewPanel() is for the View tab and createAddPanel() is for the Add tab. i also called the respective tabs using frameView = (JPanel)tp.getComponent(0); to get the layout for View tab and frameAdd = (JPanel)tp.getComponent(1); to get the layout for the Add tab. What methods need I use so that I can display the different data in the specific GridLayout to be displayed in the View tab or what other ways can I do it? Hello. I am trying to create a javascript function which when declaring a new object, would give it properties. I'll try and show what I am doing with some code, then explain it. Code:
<script type="text/javascript">
var Draggable = {
Create: function(e, options) {
newStyle(e, options);
}
};
function newStyle(destination, options) {
for (x in options) {
document.getElementById(destination).style.x = options[x];
}
}
new Draggable.Create('text', options = {border: "1px solid red"});
</script>
<div id="text">Text</div>
With this code, I am trying to create a new instance. I am then trying to change the border of the div with the id of "text". I know doing .style.x is what is breaking, but I'm not sure how to make it so the x will, work or to return that back to the Create function and work with it there? Any help would be appreciated. Thanks. For Script http://www.dynamicdrive.com/dynamici...htmlticker.htm How do I change the "subject" color above each message from the default black to white ? Hi, I need to change my class, but this isn't doing it for me and I don't see why. No error messages, but nothing happens. Code: .myClass {
background-color: yellow;
}
document.getElementById("myId").setAttribute("class","myClass");
Thank You in Advance for Your Help, Lou I am aiming to change a couple of items on a CSS definition using JavaScript, so the servicer only needs to update one JS variable. I am so a novice at this... I would like to be able to set the "top" and "height" attributes of my graphbar ID element after the percent in the JS script is changed. Here's the js and CSS that is pertinent: Code: var btmrtx= 380; var btmrty= 280; var tplftx= 40; var tplfty= 20; var totalheight= (btmrty)-(tplfty); <!---- Here is the number or percentage of surveys done as a decimal. This you enter into this script for every update! --> var pctdone= .34; var barpixels= totalheight*pctdone; var newtoplfty = btmrty - barpixels; Code: #graphbar {
background:#dd6000;
position:relative;
float:left;
width: 20px;
height: 36px;
left: 40px;
top: 244px;
}
I don't even know where to begin on a function. Thanks for help! hi ! i have a div which some how i make when mouseover it become cursor and link to other page i wants to, and it has also some text inside of it which is also linked to other page and when mouseover on text it change colors too, but the problem is if mouse come on div it will not change the color of text inside of div, so what i wants is it will change the color of text too when mouseover on the div, here is code i am using: Code: <-- THIS IS IN CSS file -->
div.test{
position:relative;
font-family:Arial;
font-size: 12px;
padding-left: 82px;
padding-top: 47px;
width: 162px;
padding-bottom: 15px;
cursor:pointer;
cursor:hand;
}
div.test a{
color:#000;
text-decoration: none;
}
div.test a:hover{
color:#4E6D00;
text-decoration: none;
}
<-- THIS IS IN HTML file -->
<div onClick="document.location='otherpage.html';" class="test">
<a href="otherpage.html">here is all content,This is content hyperlinked</a>
</div>
you notice i am using cursor in css so when mouseover it becomes hand, what i wants is when it will become hand the text inside of it will also change the color, for now it change only if i mouseover to that text, thanks for any quick help please |
|||||||