|
JavaScript - Changing Div Background On Hover
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;
}
Similar TutorialsHey, I want javascript to change the background image on hover. This is my javascript: Code: function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){
var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
obj.style.background='imgUrl';
}
and this is the HTML: Code: <li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li> This doesn't work, can anyone help me and say me what to do? Hi guy not the greatest with javascript i use it now and then. so far i have this code working correctly. Currently on mouse-over its changes the img background of imgholder. this is the HTML Code: <div id="imgholder">
</div>
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a onmouseover="changeImg(this, 'img2.jpg');" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a>
<a onmouseover="changeImg(this, 'img3.jpg');" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a>
<a onmouseover="changeImg(this, 'img4.jpg');" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a>
<a onmouseover="changeImg(this, 'img5.jpg');" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a>
<a onmouseover="changeImg(this, 'img1.jpg');" class="pt" href="penetration.htm" title="Penetration Testing"> </a>
<a onmouseover="changeImg(this, 'img6.jpg');" class="as" href="application.htm" title="Application Security"> </a>
<!--span class="jFlowNext2 NextFlash"> </span-->
</div>
<div>
<!--span class="jFlowPrev2 BackFlash"> </span-->
</div>
</div>
</div>
This is the script Code: <script language="javascript" type="text/javascript" src="inc/js/changeImg.js"></script>
function changeImg(e, imgName)
{
URL_prefix = 'http://www.website.co.uk/surecloud';
// set image url
image_url = new Array();
image_url[0] = URL_prefix+"/images/img1.jpg";
image_url[1] = URL_prefix+"/images/img2.jpg";
image_url[2] = URL_prefix+"/images/img3.jpg";
image_url[3] = URL_prefix+"/images/img4.jpg";
image_url[4] = URL_prefix+"/images/img5.jpg";
image_url[5] = URL_prefix+"/images/img6.jpg";
preload_image_object = new Array();
for(var i = 0; i < image_url.length; i++)
{
preload_image_object[i] = new Image();
preload_image_object[i].src = image_url[i];
}
document.getElementById('imgholder') .style.background="transparent url('images/" + imgName + "') no-repeat";
}
currenly if you hover over any of the <a> a css class is applied css code Code: #flash a.grc:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../../images/animated_nav.gif) no-repeat scroll -148px -59px;
}
what i need to do is keep this class applied over the last <a> that is hovered. so what i would like to do is change the class of the last <a> hover so it stays active until another one is hovered. does this make sense? any help or guidance would be appreciated Here is the link: http://sovietgaming.com/misc.php?page=roster We have a roster for Starcraft 2 and when you hover over one of the pictures it displays more info however if you start to scroll and hover you can no longer see it. We need to make so that you can see the hover over no matter where you are on the page. I'm pretty sure the problem is in style #10 of the js code posted below. Code: /* Please refer to readme.html for full Instructions Text[...]=[title,text] Style[...]=[TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor] */ var FiltersEnabled = 1 // if your not going to use transitions or filters in any of the tips set this to 0 Text[0]=["Forum Username: Soviet_Nova","<li>Best Race: Zerg</li><li>League: Silver</li> <li>Times Online: Afternoons/late night</li> <li>Favorite Custom map: Nexus Wars, Gem TD, Squadron TD, any other T or D really </li> <li>Location: Ft. Collins, Colorado</li>"] Text[1]=["Forum Username: Figgy13","<li>Best Race: Zerg</li><li>League: Gold</li> <li>Times Online: Whenever possible (Wednesday's dedicated to SC2)</li> <li>Favorite custom map: SOTIOS and Risk</li> <li>Location: New Jersey</li>"] Text[2]=["Forum Username: Soviet-Mario","<li>Offrace: meh, i like to offrace as both, but i suppose my toss is better</li><li>Location: New Orleans Louisiana</li> <li>Favorite Gear: Razer Deathadder mouse, banshee headset, marauder keyboard</li> <li>SC1 AKA: Soviet_Mario</li>"] Text[3]=["Forum Username: Cheapliquid","<li>Best Race: Random</li><li>League: Gold</li> <li>Times Online: Randomly all day</li> <li>Favorite Custom map: GEM D</li> <li>Location: The Dirty Jersey</li>"] Text[4]=["Forum Username: Trooper","<li>Best Race: Terran</li><li>League: Master</li> <li>Times Online: Almost every night</li> <li>Favorite Custom map: Nexus Wars</li> <li>Location: Pennsylvania</li>"] Text[5]=["Forum Username: Soviet_Smoke","<li>Best Race: Unknown</li><li>League: Unkown</li> <li>Times Online: Unkown</li> <li>Favorite Custom map: Unkown</li> <li>Location: Unknown</li>"] Text[6]=["Forum Username: MAXPOWER","<li>Best Race: Unknown</li><li>League: Practice</li> <li>Times Online: Never</li> <li>Favorite Custom map: Unknown</li> <li>Location: Southern Colorado</li>"] Text[7]=["Forum Username: Oreo","<li>Best Race: Protoss</li><li>League: High Masters -peaked top 1000's NA</li> <li>Times Online: 3-5, 8-10 weekedays and weekends varies</li> <li>Favorite Custom map: Marine Arena or a MOBA</li> <li>Location: Massachusetts</li>"] Text[8]=["Forum Username: Soviet-cbel","<li>Offrace: Both of my offraces suck, unfortunately</li><li>Stream: None</li> <li>Location: NC</li> <li>Favorite Gear: Logitech/Razer</li> <li>SC1 AKA: None</li>"] Text[9]=["Forum Username: Frosty","<li>Best Race: Random</li><li>League: Diamond</li> <li>Times Online: Medium Activity</li> <li>Favorite Custom map: Squadron/hero attack/zealot frenzy</li> <li>Location: Edmonton, Alberta, Canada</li>"] Text[10]=["Forum Username: Wartourist","<li>Best Race: Terran</li><li>League: Diamond</li> <li>Times Online: Mostly week nights</li> <li>Favorite Custom map: Mafia</li> <li>Location: Montreal, Canada</li>"] Text[11]=["Forum Username: Soviet_Nova","<li>Best Race: Zerg</li><li>League: Silver</li> <li>Times Online: Afternoons/late night</li> <li>Favorite Custom map: Nexus Wars, Gem TD, Squadron TD, any other T or D really </li> <li>Location: Ft. Collins, Colorado</li>"] Text[12]=["Forum Username: Soviet_Hegemon","<li>Best Race: Terran</li><li>League: Silver/Scrub</li> <li>Times Online: Sporadically</li> <li>Favorite Custom map: BattleCraft and Desert Strike</li> <li>Location: Everett,WA</li>"] Text[13]=["Forum Username: Acid","<li>Off Race: Zerg</li> <li>Stream: twitch.tv/sGAcid </li> <li>Location: Upstate New York</li> <li>Favorite Gear: Logitech</li> <li>Location: Upstate New York</li> <li>SC1 AKA: Soviet_Acid</li>"] Text[14]=["Forum Username: Hauskta","<li>Offrace: Terran</li> <li>Stream: http://www.twitch.tv/haustka</li> <li>Location: Tucson, Arizona</li> <li>Favorite Gear: Logitech</li> <li>SC1 AKA: Soviet_Haustka</li>"] Text[15]=["Forum Username: Soviet_Greywolf","<li>Offrace: None</li><li>Stream: None</li> <li>Location: Everett, WA</li> <li>Favorite Gear: Logitech</li> <li>SC1 AKA: Soviet_Greywolf</li>"] Text[16]=["Forum Username: Soviet_Nova","<li>Best Race: Zerg</li><li>League: Silver</li> <li>Times Online: Afternoons/late night</li> <li>Favorite Custom map: Nexus Wars, Gem TD, Squadron TD, any other T or D really </li> <li>Location: Ft. Collins, Colorado</li>"] Text[17]=["Forum Username: MAXPOWER","<li>Best Race: Unknown</li><li>League: Practice</li> <li>Times Online: Never</li> <li>Favorite Custom map: Unknown</li> <li>Location: Southern Colorado</li>"] Text[18]=["Forum Username: Maesy","<li>Best Race: Random</li><li>League: Diamond</li> <li>Times Online: Scattered depending on work schedule</li> <li>Favorite Custom map: Gem TD/Desert Strike equally.</li> <li>Location: Florida</li>"] Text[19]=["Forum Username: PeaceSC2","<li>Best Race: Terran</li><li>League: Masters</li> <li>Times Online: Depends on the day</li> <li>Favorite Custom map: no idea</li> <li>Location: Vancouver BC, Canada</li>"] Text[20]=["Forum Username: Link uK","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Any other day but Wed.</li> <li>Favorite Custom map: Any map made by Darglein or Multitasking trainer.</li> <li>Location:Don't Be a Creep Bro</li>"] Text[21]=["Forum Username: Kenjiman","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Whenever i dont have homework or midterms/finals.</li> <li>Favorite Custom map: Don't really have one..</li> <li>Location: Cal Poly San Luis Obispo</li>"] Text[22]=["Forum Username: DCE_Mason","<li>Best Race: Zerg</li><li>League: Platinum</li> <li>Times Online:After school (4pm-10pm CST)</li> <li>Favorite Custom map: 1v1 Obs Metalopolis Slime</li> <li>Location: Chicago, IL</li>"] Text[23]=["Forum Username: MicroSyntax","<li>Offrace: No! There is no Offrace, there is only one race and it has machineguns and women with long legs. </li><li>Stream: under construction</li> <li>Location: Canoobian</li> <li>Favorite Gear: If it moves or clicks, I like it. </li> <li>SC1 AKA: None</li>"] Text[24]=["Forum Username: TeamSnorlax","<li>Best Race: Protoss</li><li>League: Platinum</li> <li>Times Online: Afternoon / Evening Central</li> <li>Favorite Custom map: N/A</li> <li>Location: Chicago, IL, USA/li>"] Text[25]=["Forum Username: SniperRome","<li>Best Race: Protoss (Random)</li><li>League: High Masters</li> <li>Times Online: Random</li> <li>Favorite Custom map: Starjeweled, Diplomacy</li> <li>Location: Alberta, Canada</li>"] Text[26]=["Forum Username: Swordy","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Frequently</li> <li>Favorite Custom map: MageCraft + RMC</li> <li>Location: Devon, United Kingdom</li>"] Text[27]=["Forum Username: fox","<li>Best Race: Terran</li><li>League: High Masters</li> <li>Times Online: All the time</li> <li>Favorite Custom map: None</li> <li>Location: USA</li>"] Text[28]=["Forum Username: CivilAnarchy","<li>Best Race: Zerg</li><li>League: Master</li> <li>Times Online: Highly active but varied times</li> <li>Favorite Custom map: Phantom Mode</li> <li>Location: Voorhees New Jersey</li>"] Text[29]=["Forum Username: nobodyWondeR","<li>Best Race: Terran</li><li>League: Master</li> <li>Times Online: weekdays 3-5:30pm PST</li> <li>Favorite Custom map: metalopolis, shattered, antiga</li> <li>Location: California</li>"] Text[30]=["Forum Username: steveyy153","<li>Best Race: Protoss</li><li>League: Master</li> <li>Times Online: Weekends and whenever else I have time</li> <li>Favorite Custom map: Civ Sapphire</li> <li>Location: Bloomington, Indiana</li>"] Text[31]=["Forum Username: Nemesis","<li>Best Race: Protoss</li><li>League: Master</li> <li>Times Online: Whenever I can, usually mid evning to early morning</li> <li>Favorite Custom map: None</li> <li>Location: Nova Scotia, Canada</li>"] Text[32]=["Forum Username: Lane_","<li>Best Race: Zerg</li><li>League: Diamond</li> <li>Times Online: Always</li> <li>Favorite Custom map: Star Battle, Risk</li> <li>Location: USAr</li>"] Text[33]=["Forum Username: Defrath","<li>Best Race: Protosss</li><li>League: Diamond</li> <li>Times Online: After 5</li> <li>Favorite Custom map: BW Fall of the Dark Lord, or BW Bunker Wars.e</li> <li>Location: Schenectady, New York.</li>"] Text[34]=["Forum Username: ExO","<li>Best Race: Protoss</li><li>League: Master</li> <li>Times Online: N/A</li> <li>Favorite Custom map: N/A </li> <li>Location: Houston, Texas </li>"] Text[35]=["Forum Username: Haro","<li>Stream: None</li><li>Offrace: Zerg None</li> <li>Location: New York City</li> <li>Favorite Gear: None</li> <li>Sc1 AKA: None</li>"] Text[36]=["Forum Username: ZimZam","<li>Stream: None</li><li>Offrace: Zerg</li> <li>Location: Portland, Oregon</li> <li>Favorite Gear: Rapoo </li> <li>Sc1 AKA: Zimri</li>"] Text[37]=["Forum Username: Voodoo","<li>Stream: None</li><li>Offrace: Was top Dia z, currently playing as low Dia p </li> <li>Location: Tornot, Ontario, Canada </li> <li>Favorite Gear: I use a laptop and a logitech g9x dontlaughatme</li> <li>Sc1 AKA: None</li>"] Text[38]=["Forum Username: daSnake","<li>Stream: None</li><li>Offrace: Toss is all I know</li> <li>Location: what is this? AOL? FL</li> <li>Favorite Gear: Razer all the way</li> <li>Sc1 AKA: Soviet_da5nake good times... I have another one but can't remember</li>"] Text[39]=["Forum Username: SuzumiyauK","<li>Stream: None</li><li>Offrace: None</li> <li>Location: Toronto, Ontario</li> <li>Favorite Gear: Headphone: Bose Mouse: Steelseries Keyboard: Logitech </li> <li>Sc1 AKA: SuzumiyauK, GeneraluK, Mystic_Raptor, FoW_Raptor, NoVa</li>"] Text[40]=["Forum Username: SlamDuncan","<li>Stream: SlamDuncan64 on twitchtv</li><li>Offrace: I play random lol</li> <li>Location: Canada</li> <li>Favorite Gear: Steeleseries and Razer mix</li> <li>Sc1 AKA: None</li>"] Text[41]=["Forum Username: Drpoppler","<li>Stream: justin.tv/drpoppler</li><li>Offrace: Protoss</li> <li>Location: Canada eh?</li> <li>Favorite Gear: Logitech</li> <li>Sc1 AKA: None</li>"] Text[42]=["Forum Username: Crevasse","<li>Stream: None</li><li>Offrace: Protoss</li> <li>Location: CA</li> <li>Favorite Gear: Filco, Steelseries</li> <li>Sc1 AKA: None</li>"] Text[43]=["Forum Username: Dystopian","<li>Stream: http://www.teamliquid.net/video/streams/Dystopian</li><li>Offrace: Terran</li> <li>Location: Arizona</li> <li>Favorite Gear: Logitech</li> <li>Sc1 AKA: None</li>"] Text[44]=["Forum Username: sGstorm","<li>Stream: twitch.tv/jgreen46</li><li>Offrace: Protoss like a boss</li> <li>Location: Vancouver, Canada</li> <li>Favorite Gear: Sentinel Zero-G Mouse. Changeable mouse weight? YES PLZ.</li> <li>Sc1 AKA: hizzlemafizzle, fox not sGFox</li>"] Text[45]=["Forum Username: eFeKZ","<li>Stream: http://www.twitch.tv/eFeKZ</li><li>Offrace: Zerg Top8Masters</li> <li>Location: Currently Costa Rica (Soon Canada again)</li> <li>Favorite Gear: Razer / Steel Series</li> <li>Sc1 AKA: fLow</li>"] Text[46]=["Forum Username: AceGeneral","<li>Stream: None</li><li>Offrace: Oh God No!</li> <li>Location: Corn State of Indiana</li> <li>Favorite Gear: LOL what gear</li> <li>Sc1 AKA: Ace</li>"] Text[47]=["Forum Username: Defrath","<li>Best Race: Protosss</li><li>League: Diamond</li> <li>Times Online: After 5</li> <li>Favorite Custom map: BW Fall of the Dark Lord, or BW Bunker Wars.e</li> <li>Location: Schenectady, New York.</li>"] Text[48]=["Forum Username: Kaiser","<li>Stream: None</li><li>Offrace: I only play Zerg because I have self-respect</li> <li>Location: British Columbia, Canada</li> <li>Favorite Gear: My trusty MX518.</li> <li>Sc1 AKA: None</li>"] Text[49]=["Forum Username: Comedian","<li>Stream: None</li><li>Offrace: all</li> <li>Location: Purdue University</li> <li>Favorite Gear: None</li> <li>Sc1 AKA: None</li>"] Text[50]=["Forum Username: Swordy","<li>Stream: None</li><li>Offrace: None</li> <li>Location: Devon, United Kingdom England</li> <li>Favorite Gear: Logitech</li> <li>Sc1 AKA: MyWifeForAiur, Soviet_Sword</li>"] Text[51]=["Forum Username: Blank","<li>Stream:</li><li>Offrace:</li> <li>Location: </li> <li>Favorite Gear: </li> <li>Sc1 AKA:</li>"] Text[52]=["Forum Username: MAXPOWER","<li>Best Race: Unknown</li><li>League: Practice</li> <li>Times Online: Never</li> <li>Favorite Custom map: Unknown</li> <li>Location: Southern Colorado</li>"] Text[53]=["Forum Username: Acid","<li>Off Race: Zerg</li> <li>Stream: twitch.tv/sGAcid </li> <li>Location: Upstate New York</li> <li>Favorite Gear: Logitech</li> <li>Location: Upstate New York</li> <li>SC1 AKA: Soviet_Acid</li>"] Text[54]=["Forum Username: Soviet-Mario","<li>Offrace: meh, i like to offrace as both, but i suppose my toss is better</li><li>Location: New Orleans Louisiana</li> <li>Favorite Gear: Razer Deathadder mouse, banshee headset, marauder keyboard</li> <li>SC1 AKA: Soviet_Mario</li>"] Style[0]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,1,0,"",""] Style[1]=["white","black","#000099","#E8E8FF","","","","","","","center","","","",200,"",2,2,10,10,"","","","",""] Style[2]=["white","black","#000099","#E8E8FF","","","","","","","left","","","",200,"",2,2,10,10,"","","","",""] Style[3]=["white","black","#000099","#E8E8FF","","","","","","","float","","","",200,"",2,2,10,10,"","","","",""] Style[4]=["white","black","#000099","#E8E8FF","","","","","","","fixed","","","",200,"",2,2,1,1,"","","","",""] Style[5]=["white","black","#000099","#E8E8FF","","","","","","","","sticky","","",200,"",2,2,10,10,"","","","",""] Style[6]=["white","black","#000099","#E8E8FF","","","","","","","","keep","","",200,"",2,2,10,10,"","","","",""] Style[7]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,40,10,"","","","",""] Style[8]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,50,"","","","",""] Style[9]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,0.5,75,"simple","gray"] Style[10]=["white","white","#2C2C2C","#2C2C2C","http://soviet.scdiplo.com/images/gamer/nav_sub.png","","center","left","Verdana","Verdana","center","",2,2,300,100,2,20,10,0,50,1,80,"complex","gray"] Style[11]=["white","white","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,0.5,45,"simple","gray"] Style[12]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,"","","","",""] applyCssFilter() What should be done to fix it? Thank you! 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;
}
}
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! 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 all, I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason. html: Code: <div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>
javascript: Code: <script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css: Code: #service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
Could you help me fix this please?? I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like: <head> <title> Basics Exercise</title> <script type="text/javascript" src="js.js"></script> </head> <body> <form> <p> Click this button and the document's color will change again </p> <input name="button" type="button" value="Change the background color of the document"/> </form> js.js has function changecolor() { document.bgColor='#ea0d17'; } document.forms[0].button.onClick=changecolor(); I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working. Hello all, I want to set dynamically a div's background image when the page loads, so I have my code like so: javascript code: window.onload = init; function init(){ $(document).ready(function(){ $('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)'); $('#pg1').css('color', 'black'); $('#pg1').css('font-weight', 'normal'); }); } My CSS stylesheet is like so: #buttonsWrapper { position:relative; margin 50px 0px 0px 0px; } .buttons { text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:17px; font-weight:bold; color:#FFF; } #button1 { margin: 31px 0px 0px 0px; } #button2 { margin: -43px 0px 0px 195px; } #button3 { margin: -43px 0px 0px 390px; } #button4 { margin: -43px 0px 0px 585px; } #button5 { margin: -43px 0px 0px 780px; } #button1, #button2, #button3, #button4, #button5 { width:172px; height:33px; /* 33px */ padding-top:10px; text-align:center; } #button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover { background-image:url(../imagenes/buttonNormal.jpg); background-repeat:no-repeat; background-position:top; } My HTML sourcecode is like so: <div id="buttonsWrapper"> <div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div> <div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div> <div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div> <div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div> <div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div> </div> The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong? Thank you so much in advance... I have a JS that works, but only on the first Dynamically created check box and once the colour has chaned it wont change back when clicked again Please inspect my code to see exactly what I mean ... Code: <?php
function create_time_range($start, $end, $by='30 mins') {
$start_time = strtotime($start);
$end_time = strtotime($end);
$times = array();
for ( ;$start_time < $end_time; ) {
$times[] = $start_time;
$start_time = strtotime('+'.$by, $start_time);
}
$times[] = $start_time;
return $times;
}
// create array of time ranges
$times = create_time_range('0:00', '23:00', '1 hour');
// $times = create_time_range('9:30am', '5:30pm', '30 mins');
// format the unix timestamps
foreach ($times as $key => $time) {
$times[$key] = date('H:i', $time);
}
//print '<pre>'. print_r($times, true).'</pre>';
$days = array(
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
);
$s_day = array(
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
);
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
legend{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
fieldset{
width:300px;
height:auto;
}
label{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
display:inline-table;
width:50px;
}
.short{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
display:inline-table;
width:15px;
}
.on_lbl{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
display:inline-table;
width:100px;
}
#myfield{
display: none;
}
#Toptions{
}
</style>
<script type="text/javascript">
function disshow(num)
{
var dayname = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
document.getElementById('legend').innerHTML = dayname[num];
document.getElementById('myfield').style.display = 'block';
}
/* Color Changes*/
function changeColour () {
if (document.getElementById('Toptions').style.backgroundColor=='green') {
document.getElementById('Toptions').style.backgroundColor='red'
}
else if (document.getElementById('Toptions').style.backgroundColor=='red') {
document.getElementById('Toptions').style.backgroundColor=='green'
}
}
</script>
</head>
<body>
<?php
// Days Active
echo("<form method=\"POST\">");
echo("<fieldset><legend>Days Active</legend>");
for ($i=0; $i<sizeof($days); $i++){
echo("<div class=\"on_lbl\">
<input type=\"checkbox\" name=\"dayOption\" value=\"" . $i . "\" id=\"option" . $i . "\">
<label for=\"option" . $i . "\">" . $days[$i] . "</label>
</div>");
}
echo ("</fieldset>");
// Select Days for Schedule
echo ("<fieldset><legend>Schedule Times</legend>");
for ($i=0; $i<sizeof($s_day); $i++)
{
echo("<input type=\"radio\" name=\"sdayOption\" value=\"" . $i . "\" id=\"opt" . $i . " \" onclick=\"disshow('$i')\">
<label class=\"short\">$s_day[$i]</label>");
}
echo("</fieldset>");
// Day: Schedule show Hours
echo "<div id=\"myfield\">";
echo("<fieldset><legend id=\"legend\">day</legend>");
for ($i=0; $i<sizeof($times); $i++)
{
echo("<span id=\"Toptions\" style=\"background-color:green;\"><input type=\"checkbox\" name=\"timeOption\" checked=\"checked\" value=\"" . $i . "\" id=\"Toption" . $i . "\" onClick=\"changeColour()\">
<label for=\"timeOption" . $i . "\">" . $times[$i] . "</label></span>");
}
//<input type=\"submit\" value=\"Save\">
echo ("</fieldset>"); echo ("<input type=\"submit\" value=\"Update\"><input type=\"submit\" value=\"Check All\"></form>");
echo "</div>";
?>
</body>
</html>
I am at my wits end and have spent over 2 hours looking into 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, I used this on-click changeable background code for my website: http://www.codingforums.com/showthread.php?t=136821 And now I have the same question as the original poster: is there any way to get it so that the chosen background stays put even if the page is refreshed or navigated away from? Or is it not possible because all my pages are separate files? website is: http://mintymix.com/ I hope it's ok to post here, the other thread is from 2008. Thanks for reading =) *edit* Ah, I'm kind of figuring that javascript doesn't work like that. If it won't work, is there any other type of coding I may use to achieve this? hi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks Code: <iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe> Here is my script -- Applied in <head> Code: <script language="JavaScript">
var bgImage = new Array(); // don't change this
bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";
function changeBG(bgImage)
{
document.body.background = backImage[bgImage];
}
</script>
And here is the code im using that is not working within <body> Code: <body>
<div id="map"></div>
<div id="bf_container" class="bf_container">
<div id="bf_background" class="bf_background">
<img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>
<div class="bf_overlay"></div>
<div id="bf_page_menu" class="bf_menu" >
<h1 class="title">Fujiyama<span>Japanese</span></h1>
<ul>
<li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
<li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>
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. Any help would be greatly appreciated. Thanks, Cross Hi coders, I need to achieve two things upon making a selection from a drop down field: 1) Changing the background picture of a cell. 2) Changing the size of a uploaded foreground picture within the same cell. Code: <select name=ADDITIONALINFO> <option value="25 x 25">25 x 25</option> <option value="35 x 35">35 x 35</option> <option value="45 x 45">45 x 45</option> <option value="55 x 55">55 x 55</option> </select> Any guidance how to achieve this is appreciated. OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html>
<head><title>menu</title>
<script type="text/javascript">
var element = null;
function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
}
element = xx;
xx.style.backgroundColor='navy';
}
</script>
<style type="text/css">
a {text-decoration:none; color:white}
a:visited {color:white}
a:active {color:white}
a:hover {color:white}
table#lay_menu {width:100%; margin:0px}
table#lay_menu td {text-align:center; width:20%}
.menu {text-align:center; background-color:gray; }
.start {text-align:center; background-color:navy; }
</style>
</head>
<body>
<table id="layout">
<tr>
<td width="188">
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">CPAs</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">Doctors</div>
</a> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Hi guys. How would I implement this css: Code: .story-wrap:hover .dates This obviously allows the .dates div to react when I hover over the .story-wrap div. How would I select the same in javascript with this code: Code: $(".story-wrap .dates").hover(function () {
Because currently it just reacts when .dates is hovered over. Cheers! Rather than post everything here, I'll give a link to my stackoverflow post, which didn't receive a good answer. Note: I have a different function that uses toggleClass on these same elements One person suggested using CSS. That worked very well, until I went to toggle my elements the second time (remove the added class). Then, the new "transition" line in my CSS caused the jQuery transition to perform very quickly. html - Using jquery .hover, with $this - Stack Overflow How can I get hover to work? Or better, use css transition, which I prefer - without ruining my jQuery toggleclass' animate time? Thanks. I have a quick search box in my home page that I can't seem to get working properly. When the user types in the input field and hits the "Add" button, the word they typed in appears in a box below the "Add" button. I got that, no problem. The issue arises because I want the user to be able to hover over any of the words they typed in, see some visual change (like text color changing), and be able to click the word to delete it. Right now, when the user hits the "Add" button, a function is called and the word is stored to an array. Then I have a for() loop to display the contents of the array, but the for() is only displaying one word on the screen and it is the most recent word that was added. How can I make this right? HTML Form: Code: <form> <table> <th>Recipe Quick Search</th> <tr> <td class="quickSearchHeader">Ingredient:</td> </tr> <tr> <td><input type="text" name="quicksearch" size="18" id="quickSearchInput"/></td> </tr> <tr> <td class="quickSearchAddButton" name="quickSearchAddButton" id="quickSearchAddButton"><input type="image" src="images/quickAddButton.png" name="quicksearchadd" alt="Add" onclick="insert(this.form.quicksearch.value);show();this.form.quicksearch.value='';return false;"/></td> </tr> <tr> <td class="quickSearchIngList" id="quickSearchIngList" valign="top"></td> </tr> <tr> <td class="QSSubmit"><input type="submit" name="quickSearchSubmit" value="Search!"></td> </tr> </table> </form> Javascript Code: Code: <script type="text/javascript">
var array = new Array();
function insert(val)
{
if(val != "")
{
array.push(val);
}
}
function show()
{
if(array.length > 0)
{
for(i = 0; i < array.length; i++)
{
document.getElementById('quickSearchIngList').innerHTML = "<p id='quickList'>" + array[i] + "</p>";
}
}
}
</script>
Instead of loading the data when the page loads (thus making the page load slower) I wanna make it load when you hover over the tool tip so how would I change this? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test Screenname</title> <style type="text/css"> body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;} /*tooltip*/ div.tooltip { width: 200px; color: #fff; text-align: center; } div.tooltip h4 { color: #fff; font-weight: bold; text-shadow: 2px 2px 1px #222; margin: 0; padding: 13px 10px 5px; background: url(img/balloon.png) top left no-repeat !important; background: url(img/balloon.gif) top left no-repeat; font-size: 11px; } div.tooltip p { margin: 0; padding: 0 10px 15px; text-shadow: 2px 2px 1px #222; background: url(img/balloon.png) bottom left no-repeat !important; background: url(img/balloon.gif) bottom left no-repeat; font-size: 10px; } </style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.onload=function() { /* setup tooltips */ var as = []; $S('a').each(function(a){ if (a.getAttribute('title')) as.push(a); }); new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25}); } </script> </head> <body> <a href="#" title=" <?php $url = "http://www.blockstatus.com/aim/status-checker/index.php"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS,"aimac=screenname"); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); $result2 = curl_exec ($ch); curl_close ($ch); $data = $result2; $pattern = '/Status:<\/b>(.*?)<br.*?><\/td>/i'; preg_match($pattern, $data, $status); $output = str_replace("Status: ", "", $status[1]); $aimstatus = trim($output); echo "$aimstatus"; ?> ">Test tooltip</a> </body> </html> |
|||||||